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

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

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

Я безуспешно пытался создать диаграмму Highstock.

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


person Scott Goldthwaite    schedule 19.05.2013    source источник


Ответы (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
            }
        }]
    });
person errordeveloper    schedule 19.05.2013
comment
@ScottGoldthwaite, надеюсь, ты продолжишь! Несколько предложений: а) не делитесь ключом API, который имеет доступ для чтения к вашим данным; б) попробуйте использовать Библиотека Xively JavaScript для этого, и вы сможете создавать графики в реальном времени, используя xively.datastream.subscribe c) отметьте это как ответ и проголосуйте, пожалуйста! - person errordeveloper; 20.05.2013
comment
Это был не мой ключ API, это был тот, который я повторно использовал из примера, опубликованного кем-то другим. Я не знаю, как пометить это как ответ. Я не вижу ничего, что позволило бы мне это сделать. - person Scott Goldthwaite; 20.05.2013
comment
справа от моего ответа есть галочка, которую вы можете нажать, и она станет зеленой... - person errordeveloper; 20.05.2013