如何爲Xively數據流創建一個Highstock圖表？

Question

我試圖從Xively數據創建一個Highstock圖表。

我能夠從Xively數據流的歷史查詢中創建常規line chart，並具有一些基本的數據格式適配，我可以將它傳遞給Highcharts.Chart()。

我曾試圖使Highstock chart沒有任何成功。

我是新來使用Highcharts我不熟悉JavaScript。

Answer 1

在基本Highcharts例如，你有一個比特的代碼相適應的數據格式。該代碼取數據點對象與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] 
] 

我可以用一個簡單的for循環和我也用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 
      } 
     }] 
    });