Custom chart font scrambles labels

[Adam Clements]

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:

CORRECT CHART:

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);

        }

    }