Json could not fetch table column in Google chart using php and mysql

Question

I am trying to create google chart using google api which works fine for this:

<?php
echo "hi";
$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
  $result = $mysqli->query('SELECT * FROM new_view');

  $rows = array();
  $table = array();
  $table['cols'] = array(
    array('label' => 'ind_type', 'type' => 'string'),
    array('label' => 'Index_val', 'type' => 'number')

);
    /* Extract the information from $result */
    foreach($result as $r) {

      $temp = array();

      // The following line will be used to slice the Pie chart

      $temp[] = array('v' => (string) $r['ind_type']); 

      // Values of the each slice

      $temp[] = array('v' => (int) $r['Index_val']); 
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;

// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;


?>


<html>
  <head>
    <!--Load the Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.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);

    function drawChart() {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);
      var options = {
           title: 'Index analysis',
          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);
    }
    </script>
  </head>

  <body>
    <!--this is the div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

But Now I tried with taking html part in another file and database part in another like this:

ajax_form_temp.php

    <html>
      <head>
        <!--Load the Ajax API-->
            <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
        <meta content="utf-8" http-equiv="encoding" />
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.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);

        function drawChart() {

        var jsonTable = $.ajax({
            url:"ajax_graph_temp.php",
            dataType:"json",
            async:true
            }).responseText;

          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable(jsonTable);
          var options = {
               title: 'Index analysis',
              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);
        }
        </script>
      </head>

      <body>
        <!--this is the div that will hold the pie chart-->
        <div id="chart_div"></div>
      </body>
    </html>

and ajax_graph_temp.php

<?php

$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
  $result = $mysqli->query('SELECT * FROM new_view');

  $rows = array();
  $table = array();
  $table['cols'] = array(
    array('label' => 'ind_type', 'type' => 'string'),
    array('label' => 'Index_val', 'type' => 'number')

);
    /* Extract the information from $result */
    foreach($result as $r) {

      $temp = array();

      // The following line will be used to slice the Pie chart

      $temp[] = array('v' => (string) $r['ind_type']); 

      // Values of the each slice

      $temp[] = array('v' => (int) $r['Index_val']); 
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;

// convert data into JSON format
$jsonTable = json_encode($table);
echo $jsonTable;
?>

Code is same. Just in 2nd methods fetch table data using json. But at line var data = new google.visualization.DataTable(jsonTable); jsonTable could not fetch column, though it exist.

And in browser: Table has no column error comes! Column are alread declared $table['cols'] = array( array('label' => 'ind_type', 'type' => 'string'), array('label' => 'Index_val', 'type' => 'number')

Where is the problem?

Please show us your final json output. Maybe you have some non-utf8 characters in your result so json json_encode returns null. — steven, Jul 16 '13 at 07:03
This sounds like a support request for Google Data Table. Please contact the software vendor for your support options. Much of the code you've posted in your question seems unrelated btw, if you ask a question reduce the code first to the minimum to show your problem. Also this sounds like a debugging request for very individual lines of code. Here as well, reduce the complexity, troubleshoot first so that you generalize your individual problem to a programming question. — hakre, Jul 16 '13 at 07:11
@steven: thanks for reply! final output is pie chart. If there's problem in utf8 chars then it should not work in first case also! — user123, Jul 16 '13 at 07:21
I have givens answer which do all above needed: [enter link description here][1] [1]: http://stackoverflow.com/questions/17680900/loading-the-content-of-div-from-another-php-page-and-showing-using-ajax/17717170#17717170 — user123, Jul 18 '13 at 07:32
Here's a [Solution](https://stackoverflow.com/questions/22380968/display-a-bar-chart-using-google-chart-api-in-php-mysql) . I also got the same problem and used ajax to get this working. — JassJava, Mar 13 '14 at 14:25

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

This does not answer your question, but here is a way how you can do it.

First of all restore the working version by checking it out again from version control.

Then do little edits to the wroking code where you check that - after each edit - the code still works.

In these little edits you move parts of the code first into function definitions and then - if still working - those function definitions into a new file that you include.

After each little edit do a commit so that you granulary can step back or diff to review in which lines of code you exactly introduced the error.

By creating function and moving them out in part you can easily do what you'd like to do. Doing all at once can introduce many errors and is not helpful to review quickly.

Hope this help.

See as well:

PHP file cannot enter some part of code

edited May 23 '17 at 12:29

Community

1
1

answered Jul 16 '13 at 07:16

hakre

193,403
52
435
836

I checked step by step in firebug, and as I mentioned in question I am stucking at`var data = new google.visualization.DataTable(jsonTable);` – user123 Jul 16 '13 at 07:23
Okay, so you were able to restore the working code? Fine! So how to move out parts now? Which version control system are you using? – hakre Jul 16 '13 at 07:24
Yes I could, I am not using any version control system! – user123 Jul 16 '13 at 07:34
1

Okay, start with using a version control system. This makes your life way more easy. But apart from that you don't *need* to to follow the suggestion in the answer. It works as well if you keep copies of each working revision. It's just the version control system does this similarly so less work and more structured. The first part you could move out is the database connection and querying. You could create a function that returns an iterator over the database results for example. – hakre Jul 16 '13 at 07:36
you are talking about version control system like github? – user123 Jul 16 '13 at 09:39
git would be a version control system, github is "just" a website where you can publish version-ed code (and it uses git) and where you can collaborate with other developers. – hakre Jul 16 '13 at 10:34

Json could not fetch table column in Google chart using php and mysql

1 Answers1