How to create a Highstock chart for Xively datastream?

Question

I'm trying to create a Highstock chart from Xively data.

I'm able to create regular line chart from a historic query of a Xively datastream and with some basic data format adaptation I am able to pass it to Highcharts.Chart() .

I have tried making Highstock chart without any success.

I'm new to using Highcharts and I'm not familiar with JavaScript.

Answer 1

In the basic Highcharts example you have a bit of code which adapts the data format. That code takes the array of datapoint objects with value / at keys and making a two-dimensional array.

It maps this:

[
  { value: "59", at: "2013-05-01T00:59:45.645022Z" },
  { value: "59", at: "2013-05-01T01:59:48.550144Z" },
  { value: "59", at: "2013-05-01T02:59:51.313604Z" }
]

to this:

[
  ["2013-05-01T00:59:45.645022Z", 59],
  ["2013-05-01T01:59:48.550144Z", 59],
  ["2013-05-01T02:59:51.313604Z", 59]
]

I can do this using a simple for-loop and I also used Date.parse() as well as parseFloat() to ensure Highcharts understand my data correctly:

    var xively_datapoints = data.datapoints;
    var chartdata = [];

    for (i = 0; i < xively_datapoints.length; i++) {
        chartdata.push([
            Date.parse(xively_datapoints[i].at),
            parseFloat(xively_datapoints[i].value)
        ]);
    }

I then pass chartdata array to the Highcharts like so:

    $('#container').highcharts('StockChart', {
        rangeSelector : {
            selected : 1
        },
        series : [{
            name : 'Highstock+Xively',
            data : chartdata, // reformatted data
            tooltip: {
                valueDecimals: 2
            }
        }]
    });