简体   繁体   中英

Passing json data from PHP to 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);

引号?

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM