将json数据从PHP传递到javascript - Google Pie Chart

将json数据从PHP传递到javascript  -  Google Pie Chart

问题描述:

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>

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);

The quotes?

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