Pages

Thursday, January 26, 2012

Google Charts not displayed in IE9

Google Charts not displayed in IE9 / Google Charts not rendered in IE9 / IE9 is not showing the Google Charts

Google charts are displayed correctly in Firefox and Chrome. But when I open the same page in Internet Explorer 9 (IE9), it shows blank area instead. IE9 does not throw any error either.

Bug:
We usually load the packages in the page before drawing the cart. So check out the package that you are using. If you are using "areachart" or "piechart" then this is the issue. These packages have known IE9 compatibility issues.

Your existing code may look something like this:

google.load("visualization", "1", {packages:["piechart"]});
google.setOnLoadCallback(drawChart);
....
.....
chart.draw(data, {width: 400, height: 240, is3D: true, legend: 'right', legendFontSize: 10, colourArray});

Fix:
change your package to "corechart" and your chart.draw parameters will also change as follows;

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
....
.....
chart.draw(data, {chartArea:{left:20},width: 400, height:240, is3D: true, legend: 'right',title:'Portfolio %', pieSliceText: 'none', legendFontSize: 10, colourArray});


The new charts available in this "corechart" package are compatible with IE9, even in standard
mode of IE9. The older charts ( available in "areachart" and "piechart" are using VML in IE9) - it seems that - are not supported anymore. 

Changing the package this way should fix your issue. It will now correctly show your Google Chart in IE9.

Reference: