用JSON和PHP显示谷歌图表

Display google chart with JSON and PHP

本文关键字：谷歌显示 PHP JSON 更新时间：2023-09-26

我试图显示来自数据库的JSON对象查询，我收到的JSON对象似乎是正确的：

{
    "cols": [
        {
            "id": "A",
            "label": "Date",
            "type": "string"
        },
        {
            "id": "B",
            "label": "User",
            "type": "string"
        },
        {
            "id": "C",
            "label": "Cement Brand",
            "type": "string"
        },
        {
            "id": "D",
            "label": "Volume",
            "type": "string"
        },
        {
            "id": "E",
            "label": "Type",
            "type": "string"
        }
    ],
    "rows": [
        {
            "c": [
                {
                    "v": "08-06-2013"
                },
                {
                    "v": "razee.hj@gmail.com"
                },
                {
                    "v": "Muthana"
                },
                {
                    "v": "27"
                },
                {
                    "v": "Local Plant"
                }
            ]
        }
    ]
}

但我查询数据的php文件似乎有问题，但我找不到错误。这是dataTableViewDaily.php文件

  <?php
    $selectQuery = 'SELECT * FROM competitive_daily_volume';
    $table = array();
    $table['cols'] = array(
        array("id"=>"A","label"=>"Date","type"=>"string"),
        array("id"=>"B","label"=>"User","type"=>"string"),
        array("id"=>"C","label"=>"Cement Brand","type"=>"string"),
        array("id"=>"D","label"=>"Volume","type"=>"string"),
        array("id"=>"E","label"=>"Type","type"=>"string")
    );

    $rows = array();
    $result = mysql_query($selectQuery);
        while($row = mysql_fetch_assoc($result)){
            $temp =  array();
            $temp[] = array("v"=> $row['Date']);
            $temp[] = array("v"=> $row['UserId']);
            $temp[] = array("v"=> $row['CementBrand']);
            $temp[] = array("v"=> $row['VolumeBGLP']);
            $temp[] = array("v"=> $row['Type']);
            $rows[] = array("c"=> $temp);
        }
    $table['rows'] = $rows;
    $jsonObj = json_encode($table);
    header('Cache-Control: no-cache, must-revalidate');
    header('Content-type: application/json');
    echo $jsonObj;
    ?>

这是javascript文件：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">
    function drawVisualization() {
       // var jsonData = null;
        var jsonData = $.ajax({
          url: "php/DailyVolume/dataTableViewDaily.php", // make this url point to the data file
          dataType: "json",
          async: false
        }).responseText;
    var data = new google.visualization.DataTable(jsonData); 
      // Create and draw the visualization.
      visualization = new google.visualization.Table(document.getElementById('table'));
      visualization.draw(data, null);
    }

    google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="table"></div>
  </body>
</html>

我已经在这方面工作了很长一段时间，我找不到我缺少的东西，如果有任何意见，我将不胜感激。

问题是：

var jsonData = $.ajax({
          url: "php/DailyVolume/dataTableViewDaily.php", // make this url point to the data file
          dataType: "json",
          async: false
        }).responseText;

更改为：

 var jsonData;
 $.ajax({
              url: "php/DailyVolume/dataTableViewDaily.php", // make this url point to the data file
              dataType: "json",
              async: false,
              success:function(data){
                   //get data in your callback
                  jsonData = data;
              }
            });

或者使用推荐的方法使用promise并避免async: false:

$.ajax({
           url: "php/DailyVolume/dataTableViewDaily.php", // make this url point to the data file
           dataType: "json",
}).done(function(jsonData){
      var data = new google.visualization.DataTable(jsonData); 
      // Create and draw the visualization.
      visualization = new google.visualization.Table(document.getElementById('table'));
      visualization.draw(data, null);
});

需要更改此

var jsonData = $.ajax({
      url: "php/DailyVolume/dataTableViewDaily.php", // make this url point to the data file
      dataType: "json",
      async: false
    }).responseText;
var data = new google.visualization.DataTable(jsonData);

到这个

$.ajax({
      url: "php/DailyVolume/dataTableViewDaily.php", // make this url point to the data file
      dataType: "json",
      async: false,
      success : function(response){
          var data = new google.visualization.DataTable(response);
          // other code
      }
    });