Как создать диаграмму Highstock для потока данных Xive?

Question

Я пытаюсь создать диаграмму Highstock из данных Xively.

Я могу создать обычный line chart из исторического запроса потока данных Xively и с некоторой базовой адаптацией формата данных. Я могу передать его Highcharts.Chart().

Я попытался сделать Highstock chart без каких-либо успехов.

Я новичок в использовании Highcharts, и я не знаком с JavaScript.

Answer 1

В базовом примере Highcharts у вас есть немного кода, который адаптирует формат данных. Этот код принимает массив объектов datapoint с ключами value/at и делает двумерный массив.

Он отображает это:

[ 
    { 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" } 
] 

к этому:

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

Я могу сделать это с помощью простой для цикла и я также использовал Date.parse(), а также parseFloat() для обеспечения Highcharts понять мои данные правильно:

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) 
     ]); 
    } 

я затем передать chartdata массив в Highcharts так:

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