Re: Chart not working in IE 8

[asgallant]

My guess is that the problem lies with the for loop that you use to build the data table, as you leave a comma at the end of every line, even the last one.  IE < 9 can't handle these errant commas, so you have to either trim it from your string, or use the for loop to build an array and then implode the array with comma separators:

$tmpArr = array();
for ($i=0; $i<count($results); $i++) {            
    $tmpArr[] = '{"c":[{"v":"'.substr($labels[$i],0,47).'...","f":null},{"v":'.$results[$i].',"f":null}]}';                                 

}

$stringData .= implode(',\n', $tmpArr);

On Monday, July 30, 2012 8:23:14 AM UTC-4, Charl de Bruyn wrote:

Hi can anybody assist me with why my code is breaking in IE 8

I get a red: Unable to get value of the property 'c': object is null or undefined
I use a php page to display content which includes the chart in a div

I write the json data to a file:

            //Build the chart file
            $myFile = "dataMod.json";
            $fh = fopen($myFile, 'w') or die("can't open file");
           
            $stringData .= "{\n\"cols\": [\n{\"id\":\"\",\"label\":\"Module\",\"pattern\":\"\",\"type\":\"string\"},\n";         
            $stringData .= "{\"id\":\"\",\"label\":\"Result\",\"pattern\":\"\",\"type\":\"number\"}\n";
            $stringData .= "],\n";
            $stringData .= "\"rows\": [\n";
            for($i=0;$i<count($results);$i++)
            {           
                $stringData .= "{\"c\":[{\"v\":\"".substr($labels[$i],0,47)."...\",\"f\":null},{\"v\":".$results[$i].",\"f\":null}]},\n";                                
            }
            $stringData .= "]\n";
            $stringData .= "}\n";
            fwrite($fh, $stringData);
            fclose($fh);

I then build the chart with javascript, there are 2 charts displayed on the page:

 <script type="text/javascript" src="js/jsapi.js"></script>
    <script type="text/javascript">
   
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
     
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
    google.setOnLoadCallback(drawChart1);
     
    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType:"json",
          async: false
          }).responseText;
         
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));     
      //chart.draw(data, {width: 550, height: 350});
      chart.draw(data, {width: 550,
            height: 350,
            isStacked: true,           
            title: '<?php echo "Client Report: ".$surveyName; ?>',
            colors: [<?php echo "'green'" ?>],
            vAxis: {
              title: 'Percentage',
              viewWindowMode:'pretty',
              viewWindow:{
                max:100,
                min:0
              }
            }
            });
    }
    function drawChart1() {
      var jsonData = $.ajax({
          url: "getDataMod.php",
          dataType:"json",
          async: false
          }).responseText;
         
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));     
      //chart.draw(data, {width: 550, height: 350});
      chart.draw(data, {width: 550,
            height: 350,
            isStacked: true,           
            title: '<?php echo "Evaluator Report: ".$surveyName; ?>',
            colors: [<?php echo "'green'" ?>],
            vAxis: {
              title: 'Percentage',
              viewWindowMode:'pretty',
              viewWindow:{
                max:100,
                min:0
              }
            }
            });
    }
    </script>
           
            <div id="chart_div1"></div>


Everything works dandy with IE 9 and firefox, but IE 8 won't play nice.

Any help please