我已经编写了下面的代码,但数据需要时间反映在google规范中,即使数据已加载且google gauge将设置为0作为初始值!
var url = 'http://san.gotdns.ch:8025/json';
var sensorData;
function removeTable(id) {
var tbl = document.getElementById(id);
if(tbl) tbl.parentNode.removeChild(tbl);
}
//------------- Google Gauge -------------------//
// global variables
var chart, humidityChart, data, humidityData;
// maximum value for the gauge
var max_gauge_value = 70;
// name of the gauge
var gauge_name = 'Temperature';
var outTemp, drwngRomTemp, outHumidity, drwRomHumid;
var hoptions = { animation:{
duration: 1000,
easing: 'inAndOut'
}, min: 0, max: 100, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5
};
// load the google gauge visualization google.load('visualization', '1', {'packages':['gauge']}); google.setOnLoadCallback(initChart);
// display the data
function displayData(outTemp, drwngRomTemp, outHumidity, drwRomHumid) {
chart.draw(data, options);
data.setValue(0, 0, gauge_name);
data.setValue(0, 1, outTemp);
data.setValue(1, 0, gauge_name);
data.setValue(1, 1, drwngRomTemp);
humidityChart.draw(humidityData, hoptions);
humidityData.setValue(0, 0, "Humidity");
humidityData.setValue(0, 1, outHumidity);
humidityData.setValue(1, 0, "Humidity");
humidityData.setValue(1, 1, drwRomHumid);
removeTable("pullingDataMsg") }
// load the data function loadData() {
// get the data from arduino
$.ajax({
url: url,
data: {
format: 'json'
},
dataType: 'json',
crossDomain: true,
success: function(sensorData) {
// set the sensor data pulled from arduino to global variable sensorData
outTemp = sensorData.arduino[0].temperatureInC;
drwngRomTemp = sensorData.arduino[1].temperatureInC;
outHumidity = sensorData.arduino[0].humidity;
drwRomHumid = sensorData.arduino[1].humidity;
displayData(outTemp, drwngRomTemp, outHumidity, drwRomHumid);
},
type: 'GET'
}); }
// initialize the chart function initChart() {
var initTempData = {
"cols": [
{"id":"","label":"Label","pattern":"","type":"string"},
{"id":"","label":"Temperature","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Temperature","f":null},{"v":-20,"f":null}]},
{"c":[{"v":"Temperature","f":null},{"v":-20,"f":null}]}
]
};
data = new google.visualization.DataTable(initTempData);
options = {
greenFrom: 10,
greenTo: 29,
redFrom: 41,
redTo: 70,
yellowFrom:30,
yellowTo: 40,
majorTicks : ['-10', '0', '10','20','30','40','50', '55'],
minorTicks: 5 ,
animation:{
duration: 1000,
easing: 'inAndOut'
},
min: -10,
max: 55,
greenColor: '#CCFFCC',
yellowColor: '#FFFFCC',
redColor: '#F78181'
};
chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
var initHumidData = {
"cols": [
{"id":"","label":"Label","pattern":"","type":"string"},
{"id":"","label":"Humidity","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Humidity","f":null},{"v":0,"f":null}]},
{"c":[{"v":"Humidity","f":null},{"v":0,"f":null}]}
]
};
humidityData = new google.visualization.DataTable(initHumidData);
humidityChart = new google.visualization.Gauge(document.getElementById('humidity_gauge_div'));
loadData();
// load new data every 10 seconds
setInterval('loadData()', 10000); }
整个意图是在谷歌图表API的开头制作动画,我做错了什么?