MySQL 到 JSON 结果为空 Google 可视化图表

Question

我正在使用以下代码从数据库中提取的数据创建一个 JSON 字符串：

//Build table
$table = array();
$table['cols'] = array(
    array('label'=>'DateTime', 'type'=>'datetime'),
    array('label'=>'Temperature','type'=>'number')
);

while($row=mysql_fetch_assoc($result)){
    array_push($table,$row);
}
echo json_encode($table);

'validated'JSON输出为：

{
"0": {
    "datetime": "2015-08-21 16:32:00",
    "temp": "19.062"
},
"1": {
    "datetime": "2015-08-21 16:40:00",
    "temp": "19.062"
},
"2": {
    "datetime": "2015-08-21 16:47:00",
    "temp": "19.062"
},
"3": {
    "datetime": "2015-08-21 17:00:00",
    "temp": "19.062"
},
"4": {
    "datetime": "2015-08-21 18:00:00",
    "temp": "19.062"
},
"5": {
    "datetime": "2015-08-21 18:26:00",
    "temp": "19"
},
"6": {
    "datetime": "2015-08-21 19:00:00",
    "temp": "19.062"
},
"7": {
    "datetime": "2015-08-21 20:00:00",
    "temp": "19"
},
"8": {
    "datetime": "2015-08-21 21:00:00",
    "temp": "19"
},
"9": {
    "datetime": "2015-08-21 22:00:00",
    "temp": "18.937"
},
"10": {
    "datetime": "2015-08-21 23:00:00",
    "temp": "18.875"
},
"11": {
    "datetime": "2015-08-22 00:00:00",
    "temp": "18.875"
},
"12": {
    "datetime": "2015-08-22 01:00:00",
    "temp": "18.812"
},
"13": {
    "datetime": "2015-08-22 02:00:00",
    "temp": "18.812"
},
"14": {
    "datetime": "2015-08-22 03:00:00",
    "temp": "18.75"
},
"15": {
    "datetime": "2015-08-22 04:00:00",
    "temp": "18.687"
},
"16": {
    "datetime": "2015-08-22 05:00:00",
    "temp": "18.687"
},
"17": {
    "datetime": "2015-08-22 06:00:00",
    "temp": "18.687"
},
"18": {
    "datetime": "2015-08-22 07:00:00",
    "temp": "18.625"
},
"19": {
    "datetime": "2015-08-22 08:00:00",
    "temp": "18.625"
},
"20": {
    "datetime": "2015-08-22 09:00:00",
    "temp": "18.625"
},
"21": {
    "datetime": "2015-08-22 10:00:00",
    "temp": "18.625"
},
"22": {
    "datetime": "2015-08-22 11:00:00",
    "temp": "18.625"
},
"23": {
    "datetime": "2015-08-22 12:00:00",
    "temp": "18.625"
},
"24": {
    "datetime": "2015-08-22 13:00:00",
    "temp": "18.625"
},
"25": {
    "datetime": "2015-08-22 14:00:00",
    "temp": "18.625"
},
"26": {
    "datetime": "2015-08-22 15:00:00",
    "temp": "18.625"
},
"27": {
    "datetime": "2015-08-22 16:00:00",
    "temp": "18.625"
},
"cols": [
    {
        "label": "DateTime",
        "type": "datetime"
    },
    {
        "label": "Temperature",
        "type": "number"
    }
]
}

当我尝试在 Google 可视化折线图中绘制此数据时，图表是空的。我在应该绘制图表的页面上使用以下内容：

function drawChart() {
    var jsonData = $.ajax({
    url: "data.php",
    dataType:"json",
    async: false
    }).responseText;

    // Create the data table.
    var data = new google.visualization.DataTable(jsonData);

页面显示了图表，但没有绘制数据。

Google 可视化 API 的典型数据结构是：

{
  "cols": [
        {"id":"","label":"DateTime","pattern":"","type":"datetime"},
        {"id":"","label":"Temperature","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"2015-08-18 13:00:00","f":null},{"v":21,"f":null}]},-
        {"c":[{"v":"2015-08-18 14:00:00","f":null},{"v":20,"f":null}]},
        {"c":[{"v":"2015-08-18 15:00:00","f":null},{"v":20.2,"f":null}]},
        {"c":[{"v":"2015-08-18 16:00:00","f":null},{"v":20.3,"f":null}]},
        {"c":[{"v":"2015-08-18 17:00:00","f":null},{"v":20.5,"f":null}]}
      ]
}

这是我第一次使用这些方法，所以我可能遗漏了一些非常明显的东西。不过，我们将不胜感激。

Answer 1

A datetime 值无法通过字符串提供，例如mysql-时间戳，API 需要 JS-Date-object。

此类对象可能无法通过 JSON 传输，但 API 支持特定的字符串格式（参见：https://developers.google.com/chart/interactive/docs/datesandtimes#dates-and-times-using-the-date-string-representation）

例如Mysql-日期：

 2015-08-21 19:00:00

必须成为字符串

Date(2015,7,21,19,0,0,0)

（注意 JS 从 0 开始计算月份，所以例如八月是 7 而不是 8）

您可以直接在 SELECT 语句中构建字符串。

其他问题：

你应该使用 mysqli 函数而不是 mysql（它们是 deprecated/outdated）
你不应该运行 $.ajax 同步
您没有使用列填充行数组

像这样尝试：

data.php

<?php
ob_start();
header('Content-Type:application/json');

//use your custom data
$dbhost   ='localhost';
$dbuser   ='username';
$dbpass   ='password';
$dbname   ='db-name';
$dbtable  ='table-name';


//db-connection
$mysqli = new mysqli($dbhost,$dbuser,$dbpass,$dbname);


if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

//prepare the datatable
$table = array('cols'=>array(
                              array('label' => 'DateTime', 
                                    'type'  => 'datetime'),
                              array('label' => 'Temperature',
                                    'type'  => 'number')),
                'rows'=>array()
);


//build the query
$sql="SELECT 
              CONCAT(
                     'Date(',
                     YEAR(datetime),
                     ',',
                     Month(datetime)-1,
                     DATE_FORMAT(datetime,',%e,%k,%i,'),
                     '0)'
                    ) 
                        as `datetime`,
                            `temp` 
              FROM `{$dbtable}`";

//run the query  
if ($result = $mysqli->query($sql)) {
    while ($row = $result->fetch_assoc()) {

        //populate the rows-array
        $table['rows'][]=array('c'=>array(
                                            array('v'=>$row['datetime']),
                                            array('v'=>$row['temp'])
                                         )
                              );
    }
    $result->close();
}
ob_end_clean();
die(json_encode($table));
?>

HTML-文件:

<body>
<div id="chart_div" style="height:300px;"></div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script  type="text/javascript">
/*<![CDATA[*/
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
   $.getJSON('data.php',function(data){

      var data = new google.visualization.DataTable(data);

      var chart = new google.visualization
                     .LineChart(document.getElementById('chart_div'));

      chart.draw(data, {});
   });   
}
/*]]>*/
</script>
</body>

MySQL 到 JSON 结果为空 Google 可视化图表

MySQL to JSON results in empty Google visualisation chart

php

mysql

json

google-visualization

data.php

HTML-文件: