title: Not able to generate a Google Chart using MySQL table data as the data source
body: <p>I am trying to generate google chart from MySQL database. I refereed to this post : <a href="https://stackoverflow.com/questions/12994282/php-mysql-google-chart-json-complete-example">PHP MySQL Google Chart JSON - Complete Example</a> </p>
  
  <p>I did everything mentioned in the post but getting this on the webpage:</p>
  
  <blockquote>
    <p>'Weekly Task', 'type' => 'string'), array('label' => 'Percentage', 'type' => 'number') ); $rows = array(); while($r = mysql_fetch_assoc($sth)) { $temp = array(); // the following line will be used to slice the Pie chart $temp[] = array('v' => (string) $r['Weekly_task']); // Values of each slice $temp[] = array('v' => (int) $r['percentage']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; $jsonTable = json_encode($table); //echo $jsonTable; ?></p>
  </blockquote>
  
  <p>I tried and checked my database at everything seems to be fine.</p>
  
  <p>Code:</p>
  
  <pre><code> &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;?php
  $con=mysql_connect("localhost","root","password") or die("Failed to connect with database!!!!");
  mysql_select_db("googlecharts", $con); 
  // The Chart table contains two fields: weekly_task and percentage
  // This example will display a pie chart. If you need other charts such as a Bar chart, you will need to modify the code a little to make it work with bar chart and other charts
  $sth = mysql_query("SELECT weekly_task, percentage FROM chart");
  
  /*
  ---------------------------
  example data: Table (Chart)
  --------------------------
  weekly_task     percentage
  Sleep           30
  Watching Movie  40
  work            44
  */
  
  $rows = array();
  //flag is not needed
  $flag = true;
  $table = array();
  $table['cols'] = array(
  
      // Labels for your chart, these represent the column titles
      // Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title
      array('label' =&gt; 'Weekly Task', 'type' =&gt; 'string'),
      array('label' =&gt; 'Percentage', 'type' =&gt; 'number')
  
  );
  
  $rows = array();
  while($r = mysql_fetch_assoc($sth)) {
      $temp = array();
      // the following line will be used to slice the Pie chart
      $temp[] = array('v' =&gt; (string) $r['Weekly_task']); 
  
      // Values of each slice
      $temp[] = array('v' =&gt; (int) $r['percentage']); 
      $rows[] = array('c' =&gt; $temp);
  }
  
  $table['rows'] = $rows;
  $jsonTable = json_encode($table);
  //echo $jsonTable;
  ?&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>
  
  <p><strong>UPDATE</strong>
  I separated HTML and PHP codes into different files.
  Now I am getting blank web page.
  CODE: 
  PHP:</p>
  
  <pre><code>&lt;?php
  $con=mysql_connect("localhost","root","pass") or die("Failed to connect with database!!!!");
  mysql_select_db("googlechart", $con); 
  // The Chart table contains two fields: weekly_task and percentage
  // This example will display a pie chart. If you need other charts such as a Bar chart, you will need to modify the code a little to make it work with bar chart and other charts
  $sth = mysql_query("SELECT weekly_task, percentage FROM chart");
  
  /*
  ---------------------------
  example data: Table (Chart)
  --------------------------
  weekly_task     percentage
  Sleep           30
  Watching Movie  40
  work            44
  */
  
  $rows = array();
  //flag is not needed
  $flag = true;
  $table = array();
  $table['cols'] = array(
  
      // Labels for your chart, these represent the column titles
      // Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title
      array('label' =&gt; 'Weekly Task', 'type' =&gt; 'string'),
      array('label' =&gt; 'Percentage', 'type' =&gt; 'number')
  
  );
  
  $rows = array();
  while($r = mysql_fetch_assoc($sth)) {
      $temp = array();
      // the following line will be used to slice the Pie chart
      $temp[] = array('v' =&gt; (string) $r['Weekly_task']); 
  
      // Values of each slice
      $temp[] = array('v' =&gt; (int) $r['percentage']); 
      $rows[] = array('c' =&gt; $temp);
  }
  
  $table['rows'] = $rows;
  $jsonTable = json_encode($table);
  //echo $jsonTable;
  ?&gt; 
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;?php
      include('new.php');
      ini_set('display_errors', 1); 
      error_reporting(E_ALL);
  ?&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: 'No. of Kills',
            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;/body&gt;
  &lt;/html&gt;
  </code></pre>