使用JSON和PHP显示谷歌图表

时间:2013-08-16 13:21:41

标签: php javascript ajax google-visualization

我试图从数据库中显示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>

我一直在努力工作很长时间,我找不到我所缺少的东西,会感激任何评论。

2 个答案:

答案 0 :(得分:0)

问题在于:

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

或者使用推荐的方法[{1}}并避免使用promise

async: false

答案 1 :(得分:0)

需要更改此

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