CODEWITHSUNDEEP
google-visualization
user2997269
user2997269

Reputation: 7

Google pie chart not appearing in IE 7 and 8

The pie chart works perfectly on all browsers except for IE 7 and 8, where all I see is a blank screen. I've looked around but I could not seem to find a solution that works.

Any help is appreciated

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
       google.load("visualization", "1", {packages:["corechart"]});
       google.setOnLoadCallback(drawChart);
       function drawChart() {
       var data = google.visualization.arrayToDataTable([
         ['Product', 'Amount'],
         ['Product 1', 31],
         ['Product 2', 28],
         ]);

       var options = {
         title: 'Pie Chart',
         legend: {postion:'right', alignment: 'center'},
         pieSliceText: 'value',
         chartArea: {left: 10, width:"30%", height:"50%"},
         height: 300
        };

       var chart = new google.visualization.PieChart(document.getElementById('piechart'));

       chart.draw(data, options);

      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Upvotes: 1

Views: 890

Answers (1)

asgallant
asgallant

Reputation: 26340

You have an errant comma at the end of your data array:

var data = google.visualization.arrayToDataTable([
    ['Product', 'Amount'],
    ['Product 1', 31],
    ['Product 2', 28], <-- this comma is the problem
]);

IE does not like commas after the last element in an array, and will kick and scream and throw a tantrum to rival a petulant two-year-old child when it sees one.

Upvotes: 2

Related Questions