5
Tôi đang cố gắng tạo một số biểu đồ GAUGE bằng Google Graph. Mục tiêu của tôi là tải dữ liệu từ trang php và tự động làm mới. Tôi đã có thể làm điều đó, nhưng khi dữ liệu được làm mới, các đường đo không hoạt hình, nhưng thay vào đó chúng được vẽ lại từ mới. Tôi muốn xem hình ảnh động thú vị như thế này: https://jsfiddle.net/api/post/library/pure/. Thực ra tôi đang tải dữ liệu từ một tệp tĩnh, sau đó tôi sẽ tạo dữ liệu từ cơ sở dữ liệu MySQL (được kiểm tra và làm việc). Ở đây mã của tôi:Biểu đồ Google - Đồ thị đo biểu đồ không hoạt động
temperature.php
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "http://URL/fetch_data3.php?type=gauge",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 600, height: 300,
redFrom: 35, redTo: 50,
yellowFrom: 24, yellowTo: 35,
greenFrom: 18, greenTo: 24,
majorTicks : ['-10', '0', '10','20','30','40','50'], minorTicks: 10,
animation:{
duration: 1000,
easing: 'inAndOut',
},
max: 50, min: -10
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
clearChart();
}
setInterval(function() {
drawChart();
}, 5000);
</script>
</head>
<body>
<div id="chart_div" style="width: 500px; height: 400px;"></div>
</body>
</html>
và ở đây fetch_data3.php
<?php
if ($_REQUEST["type"] == "gauge") {
$sec = date('s');
if ($sec % 2 == 0) {
$string = file_get_contents("sampleData.json");
} else {
$string = file_get_contents("sampleData2.json");
}
echo $string;
}
?>
sampleData.json:
{
"cols": [
{"id":"","label":"Label","pattern":"","type":"string"},
{"id":"","label":"Value","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Esterno","f":null},{"v":0,"f":null}]},
{"c":[{"v":"Soggiorno","f":null},{"v":0,"f":null}]},
{"c":[{"v":"Stanza","f":null},{"v":0,"f":null}]}
]
}
sampleData2.json:
{
"cols": [
{"id":"","label":"Label","pattern":"","type":"string"},
{"id":"","label":"Value","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Esterno","f":null},{"v":10,"f":null}]},
{"c":[{"v":"Soggiorno","f":null},{"v":40,"f":null}]},
{"c":[{"v":"Stanza","f":null},{"v":20,"f":null}]}
]
}
Biểu đồ tải mẫu ngẫu nhiênData2.json hoặc sampleData.json nhưng không có bất thường trên biểu đồ.
Có vấn đề gì?
Cảm ơn!
Simon
https://jsfiddle.net/api/post/library/pure/là trống :) –
Xin lỗi, nó dựa trên các thông tin được hiển thị trong tài liệu google: https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge – Simon