Question

I’m trying to get some JSON formatted data from a COSM feed into a simple chart, but am having trouble doing so. I’m not sure if I’m misunderstanding how the series array works (even after reviewing the documentation on it.

This is my code with experiments in it (I eventually want to get the JSON data streamed in through a loop, but for now I just manually tried to push a 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 formatted date/time values for the x-axis? Is the UTC coming in from my JSON feed not valid?

Answer 1

You have to convert your date and time values to a Unix timestamp, then Highcharts will accept it.

Date.UTC(2010, 0, 1)

Have a look at this tutorial on how to work with date objects in Javascript.