I am trying to get some formatted JSON data from a COSM feed into a simple graph, but I am having problems with this. I am not sure that I do not understand how the array of rows works (even after looking at the documentation on it.
This is my code with experiments in it (in the end I want the JSON data to be broadcast through the loop, but now I just manually tried to push the second data point).
$(document).ready(function(){ var options = { chart: { renderTo: 'container', type: 'line', marginRight: 130, marginBottom: 25 }, title: { text: 'Temperature', x: -20 //center }, xAxis: { //type: 'datetime', }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C'; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, exporting: { enabled: false }, series: [{"name":"Temperature", "data":[]}] }; $.getJSON('http://api.cosm.com/v2/feeds/79903.json?key=dNSiSvXZtR6QBUqbzll4CCgnngGSAKxIQVFSeXBneGpqWT0g', function(data) { var xval = data.datastreams[7].at; var yval = parseFloat(data.datastreams[7].current_value); alert(xval); alert(yval); var pointChart = new Array(xval, yval); options.series[0].data.push(pointChart); xval = data.datastreams[2].at; yval = parseFloat(data.datastreams[2].current_value); pointChart = [xval, yval]; options.series[0].data.push(pointChart); //options.series[0].data.push(data.datastreams[7].at, 25); alert(options.series[0].data[0]); alert(options.series[0].data[1]); }); var chart = new Highcharts.Chart(options); });
JSON looks like this:
{ "version" : "1.0.0", "created" : "2012-10-12T05:01:53.231981Z", "status" : "live", "location" : { }, "datastreams" : [{ "max_value" : "100.0", "min_value" : "0.0", "at" : "2012-10-22T01:28:12.610947Z", "id" : "Battery_Level", "current_value" : "88" }, { "max_value" : "30431.0", "min_value" : "-26691.0", "at" : "2012-10-22T01:22:32.905001Z", "id" : "Heading", "current_value" : "95" }, { "max_value" : "64.9304", "min_value" : "21.6153", "at" : "2012-10-22T01:30:52.656318Z", "unit" : { "symbol" : "%" }, "id" : "Humidity", "current_value" : "55.7556" }, { "max_value" : "32684.0", "min_value" : "0.0", "at" : "2012-10-22T01:30:52.656318Z", "id" : "Light_Level", "current_value" : "37" }, { "max_value" : "649994.0", "min_value" : "-139994.0", "at" : "2012-10-18T06:47:56.226880Z", "unit" : { "symbol" : "µT" }, "id" : "Magnetic_X", "current_value" : "-24.90" }, { "max_value" : "99997.0", "min_value" : "-9.9006731e+24", "at" : "2012-10-18T06:47:56.226880Z", "unit" : { "symbol" : "µT" }, "id" : "Magnetic_Y", "current_value" : "7.35" }, { "max_value" : "432.0", "min_value" : "-3950.0", "at" : "2012-10-18T06:47:56.226880Z", "unit" : { "symbol" : "µT" }, "id" : "Magnetic_Z", "current_value" : "7.10" }, { "max_value" : "25.59", "min_value" : "11.1", "at" : "2012-10-22T01:30:52.656318Z", "unit" : { "symbol" : "°C" }, "id" : "Temperature", "current_value" : "22.3800" ], }
As I understand it, Highcharts accepts UTC date / time values for the x axis? Is UTC suitable from my JSON message?