As a relative newcomer to web development, my usual focus is on server-side work. Currently, I'm diving into a fun little electronic project where a Netduino server handles JSON requests within my LAN. The JSON response format from the Netduino looks like this:
[ { "sensor" : "bk", "temp" : "68.9000015", "time" : "01/01/2009 01:04:46"},{ "sensor" : "mt", "temp" : "69.0124969", "time" : "01/01/2009 01:04:46"},{ "sensor" : "hlt", "temp" : "68.9000015", "time" : "01/01/2009 01:04:46"} ]
I want to designate my sensors as series {bk, mt, hlt} (with two additional series not included in this response).
However, it seems that my AJAX request isn't sending GET requests to my Netduino. I've checked using HttpFox and haven't seen any activity towards 192.168.0.11...
This is the JavaScript code I am currently using:
//data arrays for holding the points
var HLT=[],
MT =[],
BK =[],
PC =[],
CL =[];
var chart;
//after DOM is loaded setup timeout to call the ajax method
$(document).ready(function() {
setInterval(reqData, 5000);
options.series[0].data = HLT;
options.series[1].data = MT;
options.series[2].data = BK;
options.series[3].data = PC;
options.series[4].data = CL;
//call function to render the chart and setup the options
renderChart();
});
//this function requests the data
function reqData(){
$.ajax({
url: "http://192.168.0.11/"+Math.random(),//using math.random to avoid browser caching
contentType: "application/json; charset=utf-8",
success: mergeData(data)
});
}
//this function merges the data and refreshes the table
function mergeData(data){
//$(this).addClass("done");
}
function renderChart(){
chart = new Highcharts.Chart(options);
}
The chart displays when the page loads but I'm unable to see reqData being called. Any assistance would be greatly appreciated. Also, what would be a good way to update the series data? I have limited experience with JavaScript - could a foreach loop matching on series names work? My goal is to chart the temperature (y-axis) against datetime (x-axis) of the temperatures.
Thank you!
---edit 1/23/2012---
I apologize for not clearly stating the issue earlier. In this function:
//after DOM is loaded setup timeout to call the ajax method
$(document).ready(function() {
setInterval(reqData, 5000);
options.series[0].data = HLT;
options.series[1].data = MT;
options.series[2].data = BK;
options.series[3].data = PC;
options.series[4].data = CL;
//call function to render the chart and setup the options
renderChart();
});
The reqData() function doesn't seem to be triggering (confirmed by no GET requests to 192.168.0.11 in HttpFox), however, renderChart() is being executed. Any suggestions?