title: Using Google charts with php/mysqli - cannot get it working
body: <p>I've read many many examples from here and for some reason I just cant get them to work.</p>
  
  <p>I have taken the example from here:</p>
  
  <p><a href="https://stackoverflow.com/questions/12994282/php-mysql-google-chart-json-complete-example">PHP MySQL Google Chart JSON - Complete Example</a></p>
  
  <p>and am using the PHP-MySQLi-JSON-Google Chart Example</p>
  
  <p>For some reason the data was just not pulled from the mysql database using the foreach method. I have now changed this to a while loop using fetch_assoc and it has pulled the data and created the correct json format. </p>
  
  <p>When I load the page though I just get a blank page. </p>
  
  <p>I now have no idea as to why its not working.</p>
  
  <p>Here's some info which might help:
  php 5.3.17
  OpenSuse 12.3</p>
  
  <p>I've checked the apache logs and there are no errors. Any ideas what else I can do to figure this out?</p>
  
  <pre><code>jsonTable:
  {
  "cols":[
      {"label":"Weekly Task","type":"string"},
      {"label":"Percentage","type":"number"}
      ],
  "rows":[
      {"c":[{"v":"running"},{"v":30}]},
      {"c":[{"v":"jorunning"},{"v":30}]},
      {"c":[{"v":"job"},{"v":20}]},
      {"c":[{"v":"sleeping"},{"v":40}]},
      {"c":[{"v":"exercise"},{"v":50}]},
      {"c":[{"v":"resting"},{"v":30}]}
  ]
  }
  </code></pre>
  
  <p>Here is my code:</p>
  
  <pre><code> &lt;?php
  
   $DB_NAME = 'chart';
   $DB_HOST = 'localhost';
   $DB_USER = 'test';
   $DB_PASS = '123456';
  
  $mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
  
  if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
  }
  $query = "select * from googlechart";
  
  if ($result = $mysqli-&gt;query($query)) {
      {
      $rows = array();
      $table = array();
      $table['cols'] = array(
              array('label' =&gt; 'Weekly Task', 'type' =&gt; 'string'),
              array('label' =&gt; 'Percentage', 'type' =&gt; 'number')
      );
  
      while ($row = $result-&gt;fetch_assoc()) {
              $temp = array();
              $temp[] = array('v' =&gt; (string) $row['weekly_activity']);
              $temp[] = array('v' =&gt; (int) $row['percentage']);
              $rows[] = array('c' =&gt; $temp);
              }
     }
   }
  
  $table['rows'] = $rows;
  $jsonTable = json_encode($table);
  ?&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;!--Load the Ajax API--&gt;
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript"&gt;
   // 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);
  
   function drawChart() {
  
    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(&lt;?=$jsonTable?&gt;);
    var options = {
         title: 'My Weekly Plan',
        is3D: 'true',
        width: 800,
      height: 600
      };
    // Instantiate and draw our chart, passing in some options.
    // Do not forget to check your div ID
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!--this is the div that will hold the pie chart--&gt;
  &lt;div id="chart_div"&gt;&lt;/div&gt;
      &lt;?php echo $jsonTable; ?&gt;
   &lt;/body&gt;
   &lt;/html&gt; 
  </code></pre>
  
  <p>Here is the source from a loaded page:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;   &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  // 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);
  
  function drawChart() {
  
    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(&lt;?=$jsonTable?&gt;);
    var options = {
         title: 'My Weekly Plan',
        is3D: 'true',
        width: 800,
        height: 600
      };
    // Instantiate and draw our chart, passing in some options.
    // Do not forget to check your div ID
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!--this is the div that will hold the pie chart--&gt;
  &lt;div id="chart_div"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>