MySQL到JSON会产生空的Google可视化图表

时间:2015-08-22 16:04:50

标签: php mysql json google-visualization

我使用以下代码从数据库中提取的数据创建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);

经过验证的' 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 Visualization LineChart中绘制此数据时,图表为空。我将以下内容用于绘制图表的页面:

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 Visualization 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}]}
      ]
}

这是我第一次使用这些方法,所以我可能会遗漏一些非常明显的东西。不过,任何帮助都会受到赞赏。

1 个答案:

答案 0 :(得分:1)

无法通过字符串提供<Application> <Application.Resources> <ResourceDictionary> <ResourceDictionary.ThemeDictionaries> <ResourceDictionary x:Key="Dark"> <SolidColorBrush x:Key="SystemControlPageBackgroundBaseMediumBrush" Color="#99000000" /> </ResourceDictionary> </ResourceDictionary.ThemeDictionaries> </ResourceDictionary> </Application.Resources> </Application> - 值,例如一个mysql-timestamp,API需要一个JS-Date-object。

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

e.g。 Mysql-Date:

datetime

必须成为字符串

 2015-08-21 19:00:00

(请注意,JS开始以0为单位计算月份,因此例如,8月为Date(2015,7,21,19,0,0,0) 而不是7

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

其他问题:

  • 你应该使用mysqli-functions而不是mysql(它们已被弃用/过时)
  • 您不应该同步运行8
  • 您没有使用列
  • 填充行数组

试试这样:

data.php

$.ajax

HTML的文件:

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