Google charts - “Quick Start Hello World” not rendering in IE8
Question
Hello I am trying to run the Google Chart Quick Start and it won't render in IE8.
I can see that the Google Chart does create some IE funky markup however nothing is displayed.
The guide is located on https://developers.google.com/chart/interactive/docs/quick_start
Is there some extra config required to get this to work in IE8?
2 answers
solution1
0 2015-03-27 11:05:21
According to the Google Charts documentation there are sometimes problems in Internet Explorer 8 and earlier, for two reasons:
- IE8 doesn't support SVG, so Charts fails over into VML, which is more limited.
- IE8's JavaScript doesn't allow trailing commas in lists.
In order to get it to work you need to add the vml namespace and add a specific css behaviours
<!--[if lte IE 8 ]>
<script type="text/javascript">
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
document.createStyleSheet().cssText =
'vml\\:fill, vml\\:path, vml\\:shape, vml\\:stroke' +
'{ behavior:url(#default#VML); display: inline-block; } ';
</script>
<![endif]-->
I have double checked and the example below is working in IE8 on Windows 7. However, it does initially display the warning "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer." Only after allowing the blocked content the pie chart is rendered.
<html> <head> <!--Load the AJAX API--> <!--[if lte IE 8 ]> <script type="text/javascript"> document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml'); document.createStyleSheet().cssText = 'vml\\\\:fill, vml\\\\:path, vml\\\\:shape, vml\\\\:stroke' + '{ behavior:url(#default#VML); display: inline-block; } '; </script> <![endif]--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // 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', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = { 'title': 'How Much Pizza I Ate Last Night', 'width': 400, 'height': 300 }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <!--Div that will hold the pie chart--> <div id="chart_div"></div> </body> </html>
solution2
0 2015-03-27 11:18:38
IE8 will fall back to use VML; from their gallery ( https://developers.google.com/chart/interactive/docs/gallery ):
These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions)
After a little digging, it looks like VML won't just work , so try putting this at the beginning of your js (or maybe better yet, as an inline script at the top of your html):
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");
This person had the same issue: How do I get VML working in standards mode?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.