Passing json data from PHP to javascript - Google Pie Chart

Question

I'm trying to pass a json data from php after a mysql query to my javascript that loads the google charts api. Query is successful however the data format doesn't seem to be correct. Any idea on what i'm doing wrong here? I saved it as .html file and just opening it via browser. Hope that should it.

< ?php
$DB_hostname = "localhost";
$DB_Name = "root";
$DB_pass = "root";
$tbl_name="tblname"; // Table name 




$con = mysql_connect($DB_Hostname,$DB_Name,$DB_pass) or die(mysql_error());

mysql_select_db("dbname", $con);
$sql="SELECT *  FROM $tbl_name WHERE is86 = 1";
$result=mysql_query($sql);

$count1 = mysql_num_rows($result);


$sql="SELECT *  FROM $tbl_name WHERE is86 = 0";
$result=mysql_query($sql);

$count2 = mysql_num_rows($result);
$data[0] = array("Changes","count1");
$data[1] = array("Apps with IA Architecture",.$count1.);
$data[2] = array("Apps with no IA Architecture",.$count2.); 

$data = json_encode($data);
? >


<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() {
     var data = new google.visualization.DataTable(<?=$data?>);


    var options = {
        title: 'Architecture Changes',
        is3D: 'true',
        width: 800,
        height: 600
      };

   var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    }
    </script>
   </head>

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

asgallant · Accepted Answer · 2013-10-24 19:02:51Z

1

Your data format is incorrect for using the DataTable constructor like that, but you should be able to use the arrayToDataTable method:

var data = google.visualization.arrayToDataTable(<?=$data?>);

Also, you shouldn't include the .'s before and after the $count variables when adding them to the arrays:

$data[0] = array("Changes", "count1");
$data[1] = array("Apps with IA Architecture", $count1);
$data[2] = array("Apps with no IA Architecture", $count2);

answered Oct 24, 2013 at 19:02

asgallant

26.4k6 gold badges75 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Siddharthan Asokan Over a year ago

I made the following changes: pastebin.com/w3TaLbb2 and when i ran the php code alone as a php file, I got [["Changes","count1"],["Apps with IA Architecture",8],["Apps with no IA Architecture",18]] as the output on echo $data

asgallant Over a year ago

That should work with the arrayToDataTable method.

Gustavo Costa De Oliveira · Accepted Answer · 2013-10-24 18:39:46Z

0

The quotes?

var data = new google.visualization.DataTable('<?=$data?>');

answered Oct 24, 2013 at 18:39

Gustavo Costa De Oliveira

7,4942 gold badges24 silver badges22 bronze badges

Collectives™ on Stack Overflow

Passing json data from PHP to javascript - Google Pie Chart

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related