plotted

plotted

关注
发信
关注(28)粉丝(399)

MySQL到JSON导致Google可视化图表为空

本文介绍了MySQL到JSON导致Google可视化图表为空的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  //构建表
 $ table = array（）; 
 $ table ['cols'] = array（
 array（'label'=>'DateTime'，'type'=>'datetime'），
 array（'label' ='温度'，'类型'=>'数字'）
）; 
 
 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中绘制这些数据时，是空的。我在绘制图表的页面上使用以下代码： 

 函数drawChart（）{
 var jsonData = $ .ajax（{
 url：data.php，
 dataType：json，
 async：false 
}）。responseText; 
 
 //创建数据表。 
 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}]} 
] 
 
 
 
 
 $ b 
这是我第一次使用这些方法，所以我可能错过了一些非常明显的东西。任何帮助将不胜感激。
解决方案
 A  datetime  -value can不会像通过一个字符串提供一个mysql-timestamp，API需要一个JS-Date-object。
 
 
 
这样的对象不能通过JSON传输，但API支持特定的字符串格式请参阅：） 
 
 
例如Mysql-Date： 
 
 
  2015-08-21 19:00:00 
  
 
 
 
必须成为字符串
  Date（2015， 7,21,19,0,0,0）
  
（注意JS开始计算月份0，所以例如August是 7 不是 8 ）
 
 
 
您可以直接在您的SELECT语句中建立字符串。
 
 
 
其他问题： 
 
 
     
     
  • 您应该使用mysqli函数而不是mysql（它们已被弃用/过时）
    •  
     
  • 您不应该运行 $。ajax 同步
    •  
     
  • 您没有使用列填充行数组 
     
 
 
 
尝试它像这样： 
 
 
 data.php 
 
 
 
 <？php 
 ob_start（）; 
 header（'Content-Type：application / json'）; 
 
 //使用您的自定义数据
 $ dbhost ='localhost'; 
 $ dbuser ='username'; 
 $ dbpass ='密码'; 
 $ dbname ='db-name'; 
 $ dbtable ='table-name'; 
 
 
 // db-connection 
 $ mysqli = new mysqli（$ dbhost，$ dbuser，$ dbpass，$ dbname）; （mysqli_connect_errno（））{
 printf（Connect failed：％s\\\
，mysqli_connect_error（））; 
 
 
 if 
 exit（）; 
 
 $ b $ //准备数据表
 $ table = array（'cols'=> array（
 array（'label'=&''DateTime' ，
'type'=>'datetime'），
 array（'label'=>'Temperature'，
'type'=>'number'）），
'rows'=> array（）
）; 
 
 $ b $ //建立查询
 $ sql =选择
 CONCAT（
'日期（'，
 YEAR（datetime）， 
'，'，
月（日期时间）-1，
 DATE_FORMAT（datetime，'，％e，％k，％i，'），
'0）'
）
作为`datetime`，
`temp` 
从`{$ dbtable}`; 
 
 //运行查询
 if（$ result = $ mysqli-> query（$ sql））{
 while（$ row = $ result-> fetch_assoc（ ））{
 
 //填充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-File：
 
 
 
 <身体GT; 
< div id =chart_divstyle =height：300px;>< / div> 
 
< script src =http://code.jquery.com/jquery-latest.js>< / script> 
< script type =text / javascriptsrc =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（数据）; 
 
 var chart = new google.visualization 
 .LineChart（document.getElementById（'chart_div'））; 
 
 chart.draw（data， }）; 
}）; 
} 
 / *]]> * / 
< / script> 
< / body> 
  
 
I'm using the following code to create a JSON string from data extracted from a database:
//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);

The 'validated' JSON output is:
{
"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"
    }
]
}

When I try to plot this data in a Google Visualisation LineChart, the chart is empty. I'm using the following for the page on which the chart should be plotted:
function drawChart() {
    var jsonData = $.ajax({
    url: "data.php",
    dataType:"json",
    async: false
    }).responseText;

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

The page shows the chart but there is no data plotted.
A typical data structure for the Google Visualisation API would be:
{
  "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}]}
      ]
}

This is my first time using these methods so I'm probably missing something really obvious. Any help would be appreciated though.
 解决方案 
A datetime-value can't be provided via a string like e.g. a mysql-timestamp, the API requires a JS-Date-object.
Such an object may not be transported via JSON, but the API supports a particular string-format(see: https://developers.google.com/chart/interactive/docs/datesandtimes#dates-and-times-using-the-date-string-representation)
e.g. the Mysql-Date:
 2015-08-21 19:00:00

must become the string
Date(2015,7,21,19,0,0,0)

(note that JS starts counting the months with 0, so e.g. August is 7 not 8)
You may build the string directly in your SELECT-statement.
Other issues: 
  • you should use the mysqli-functions instead of mysql(they are deprecated/outdated)
  • you should not run $.ajax synchronously
  • you didn't populate a rows-array with the columns
Try it like this:
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-File:
<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可视化图表为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-29 04:09
Powered by LMLPHP ©2024 plotted 0.040744