CODEWITHSUNDEEP
internet-explorergoogle-visualizationvml
Fresheyeball
Fresheyeball

Reputation: 30015

Google visualization chart ie font-family not respected

As you can see I attempted to set the font-family, and I've attempted it in every way mentioned in the documentation: http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html

but in ie7-8 (the vml version) the wrong font is displayed. It could be a vml issue and not a google issue, but I am out of ideas. Thanks folks!

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Vote');
    data.addColumn('number', 'Votes');
    data.addRows([
    ['BLAH', blah],
    ['AHH', ahh]
    ]);

    // Set chart options
    var options = {
        is3D:false,
        width:200,
        height:200,
        fontSize: '14px',
        fontName: 'Arial',
        colors: ['#bcbdc0', '#FFF'],
        legend: 'none',
        pieSliceText: 'label',
        backgroundColor: '#f8f6e8'  ,
        pieSliceBorderColor: 'black',
        pieSliceTextStyle: {
            color: 'black', fontName: 'Arial', fontSize:'14'
        }

    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart-div-'+id));
    chart.draw(data, options);
    }

Upvotes: 2

Views: 4202

Answers (1)

Johan
Johan

Reputation: 780

Try changing to:

fontName: '"Arial"'

that is, add extra double-quotes within the single quotes. That worked for me (but still looks ugly as the font used is Arial Bold, but the sizes of all elements seems to be set using standard Arial resulting in missing pixels at the end of all words)

Upvotes: 9

Related Questions