[英]Google Charts using JSON
我以前沒有使用谷歌圖表,但我正在嘗試使用位於房子周圍的傳感器進行一些溫度圖表,但是我不斷得到一個例外。 我很確定它是因為JSON的格式不正確,但是在它需要什么格式以及如何讓我的腳本以這種格式生成JSON方面苦苦掙扎。
PHP腳本從數據庫生成JSON
<?php
require_once ("config.php");
$array = array();
$res = mysqli_query($con, "SELECT * FROM sensors WHERE vera_variable='CurrentTemperature'");
while ($row = mysqli_fetch_array($res)) {
$sensor_id = $row['sensor_id'];
$sensor_name = $row['sensor_name'];
$res2 = mysqli_query($con, "SELECT * FROM logs WHERE sensor_id='$sensor_id'");
while ($row2 = mysqli_fetch_array($res2)) {
$time = strtotime($row2['log_time']);
$formattedTime = date("m-d-y g:i", $time);
$sensor_value = $row2['sensor_value'];
$array[$formattedTime][$sensor_name] = $sensor_value;
}
}
$json = json_encode($array, JSON_PRETTY_PRINT);
echo "<pre>" . $json . "</pre>";
?>
上述腳本的示例輸出。 您可以看到有一個日期,多個傳感器及其相應的值
{
"12-12-15 8:35": {
"Living Room Temperature": "18.3",
"Outside Temperature": "-5",
"Mud Room Temperature": "16.0",
"Basement Temperature": "14.0"
},
"12-12-15 8:40": {
"Living Room Temperature": "18.3",
"Outside Temperature": "-5",
"Mud Room Temperature": "16.0",
"Basement Temperature": "13.0"
},
"12-12-15 8:45": {
"Living Room Temperature": "18.3",
"Outside Temperature": "-5",
"Mud Room Temperature": "16.0",
"Basement Temperature": "13.0"
},
"12-12-15 8:50": {
"Living Room Temperature": "18.3",
"Outside Temperature": "-5",
"Mud Room Temperature": "16.0",
"Basement Temperature": "13.0"
},
"12-12-15 8:55": {
"Living Room Temperature": "18.3",
"Outside Temperature": "-5",
"Mud Room Temperature": "16.0",
"Basement Temperature": "13.0"
},
"12-12-15 9:00": {
"Living Room Temperature": "17.8",
"Outside Temperature": "-5",
"Mud Room Temperature": "16.0",
"Basement Temperature": "13.0"
}
}
以下是我所擁有的(只是一個使用json的簡單示例圖表)
<html>
<head>
<!-- Load jQuery -->
<script language="javascript" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!-- Load Google JSAPI -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages : ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url : "json_temp.php",
dataType : "json",
async : false
}).responseText;
var obj = window.JSON.stringify(jsonData);
var data = google.visualization.arrayToDataTable(obj);
var options = {
title : 'Graph'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
編輯:以下是Chrome在嘗試加載圖表時顯示的錯誤:
未捕獲錯誤:不是arraylha @ format + en,默認+ en,ui + en,corechart + en.I.js:191bha @ format + en,默認+ en,ui + en,corechart + en.I.js:193drawChart @ temperature.php:22
由於輸入JSON數據格式( obj
變量)與Google Chart數據JSON格式不兼容 ,因此會發生此錯誤。
您可以將輸入數據轉換為支持的格式,如下所示:
var chartData = [];
chartData.push(['Time','Living Room Temperature','Outside Temperature','Mud Room Temperature','Basement Temperature']);
for (var key in obj) {
var item = obj[key];
chartData.push([new Date(key),parseFloat(item['Living Room Temperature']),parseFloat(item['Outside Temperature']),parseFloat(item['Mud Room Temperature']),parseFloat(item['Basement Temperature'])]);
}
var data = google.visualization.arrayToDataTable(chartData);
工作實例
對數據的加載方式進行了一些更改,特別是因為將同步調用
async
設置為true
被認為是一種不好的做法。 此外,請求通過promises處理。
google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart); function drawChart() { $.ajax({ url: "https://gist.githubusercontent.com/vgrem/e08a3da68a5db5e934a1/raw/2f971a9d1524d0457a6aae4df861dc5f0af0a2ef/data.json", //json_temp.php dataType: "json" }) .done(function (data) { var chartData = []; chartData.push(['Time','Living Room Temperature','Outside Temperature','Mud Room Temperature','Basement Temperature']); for (var key in data) { var item = data[key]; chartData.push([new Date(key),parseFloat(item['Living Room Temperature']),parseFloat(item['Outside Temperature']),parseFloat(item['Mud Room Temperature']),parseFloat(item['Basement Temperature'])]); } var dataTable = google.visualization.arrayToDataTable(chartData); var options = { title: 'Graph' }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(dataTable, options); }); }
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div" style="width: 900px; height: 500px;"></div>
看起來你正在傳遞一個Object
而不是預期的Array
。
試試這個:
var obj = window.JSON.stringify(jsonData);
var arr = [];
Object.keys(obj).forEach(function(key){
var o = obj[key];
o.time = key;
arr.push(o);
});
var data = google.visualization.arrayToDataTable(arr);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.