Hi Everyone,

We are using google charts to display data which can be downloaded into a 
PDF document. We have a specified font that we use for this document 
(Whitney HTF Light) and we use this in our charts as well.

When we edit a document on our application, the charts render correctly. 
When we download the document, the axis labels, and annotations scramble. 
(We noticed that every character is 2 ASCII values lower after we download 
it). Please look at the attached image (Scrambled Chart).

Working locally, we can download the document and it would be correct. 
Please see the attached image (Correct Chart). Once we published the 
application to our production server, the scrambled label problem started. 
We have installed the necessary fonts on our server as the rest of the 
document uses this font and displays correctly after download.

It is vital that we use this font in our document therefore we need to fix 
this problem. Any help is greatly appreciated.



SCRAMBLED CHART:
<https://lh3.googleusercontent.com/-cicw3QeQU8A/WY3DwTwol4I/AAAAAAAAAA4/WDZTeN8_EfQGFGmthlvVBj1bUXDDo59SACLcBGAs/s1600/Scrambled%2BChart%2BData%2B%2528Production%2529.png>
























CORRECT CHART:

<https://lh3.googleusercontent.com/-SUrZq4dY2TI/WY3D5leLEhI/AAAAAAAAAA8/K7niYMOFbAIuuEx1Tmd8WQiNRaphOhErQCLcBGAs/s1600/Correct%2BChart%2BData%2B%2528Local%2529.png>
























COLUMN CHART LOGIC:


google.charts.load('current', { 'packages': ['corechart'] });

        google.charts.setOnLoadCallback(drawChart, true);

        function drawChart() {

            // Create our data table out of JSON data loaded from server.

            var data = new google.visualization.DataTable(dataTable);

            var view = new google.visualization.DataView(data);

            view.setColumns([0, 1, {

                calc: 'stringify',

                sourceColumn: 1,

                type: 'string',

                role: 'annotation',

            }]);

            var options = {

                height: 275,

                width: 375,

                bar: {groupWidth:'35%'},

                vAxis: {

                    gridlines: {

                        color: 'transparent'

                    },

                    textPosition: 'none',

                    textStyle: {

                        bold: false,

                        fontSize: '0',

                        paddingRight: '100',

                        marginTop: '100'

                    },

                    textPosition: 'none',

                    viewWindow: {

                        //min: data.getColumnRange(1).min + 
(data.getColumnRange(1).min / 5),

                        max: data.getColumnRange(1).max + 
(data.getColumnRange(1).max / 5),

                    }

                },

                hAxis: {

                    slantedText: true,

                    slantedTextAngle: 90,

                    textStyle: {

                        fontName: 'Whitney HTF Light',

                    },

                },

                legend: {

                    position: 'none',

                    textStyle: {

                        bold: false,

                        color: 'black',

                        fontName: 'Whitney HTF Light',

                    }

                },

                tooltip: {

                    trigger: 'none'

                },

                annotations: {

                    alwaysOutside: true,

                    textStyle: {

                        fontName: 'Whitney HTF Light',

                        fontSize: 10,

                        color: 'black',

                    },

                    stem: {

                        length: 5,

                        color: 'transparent',

                    },

                },

                chartArea: {

                    height: '45%',

                    width: '75%',

                    left: 20,

                    top: 10,

                },

                legend: {

                    position: 'bottom',

                    textStyle: {

                        fontName: 'Whitney HTF Light',

                        fontSize: 10,

                        color: 'black',

                    },

                },

                colors: ["#D30D2B", "#7C232E"]

            };

            var chart_div = document.getElementById(id);

            var chart = new google.visualization.ColumnChart(chart_div);

 

 

            chart.draw(view, options);

        }

    }

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/0e1a0de2-4d6b-402a-b180-2c532c583923%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to