O MySQL para JSON resulta em gráfico vazio de visualização do Google

Estou usando o seguinte código para criar uma string JSON a partir de dados extraídos de um 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); 

A saída “validada” 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" } ] } 

Quando eu tento traçar esses dados em um Google Visualization LineChart, o gráfico está vazio. Estou usando o seguinte para a página na qual o gráfico deve ser plotado:

 function drawChart() { var jsonData = $.ajax({ url: "data.php", dataType:"json", async: false }).responseText; // Create the data table. var data = new google.visualization.DataTable(jsonData); 

A página mostra o gráfico, mas não há dados planejados.

Uma estrutura de dados típica para a API de visualização do Google seria:

 { "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}]} ] } 

Esta é a minha primeira vez usando esses methods, então provavelmente estou perdendo algo realmente óbvio. Todavia, qualquer ajuda será apreciada.

Um valor de datetime não pode ser fornecido através de uma string como, por exemplo, um mysql-timestamp, a API requer um object JS-Date.

Esse object não pode ser transportado via JSON, mas a API suporta um formato de string particular (veja: https://developers.google.com/chart/interactive/docs/datesandtimes#dates-and-times -using – the- data-string-representação )

Por exemplo, o Mysql-Date:

  2015-08-21 19:00:00 

deve se tornar a corda

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

(Observe que JS começa a contar os meses com 0, então, por exemplo, agosto é 7 não 8 )

Você pode criar a string diretamente na sua instrução SELECT.

Outros problemas:

  • você deve usar as funções mysqli em vez do mysql (elas são obsoletas / desatualizadas)
  • você não deve executar $.ajax síncrona
  • você não preencheu uma matriz de linhas com as colunas

Experimente assim:

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

Arquivo HTML: