Джаваскрипт и рикша. Как обновить потоковую передачу в реальном времени?

Как обновить данные рикши с потоковой передачей в реальном времени?

Я инициирую график следующим образом.

for (var i = 0; i < json_data.length; i++) {
    meta = json_data[i];
    seriesJsonData.push({color: palette.color(),data: meta['series'],name: meta['name']});
}
var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    width: 900,
    height: 500,
    renderer: 'area',
    stroke: true,
    series: seriesJsonData
} );

Затем я хочу сделать обратный вызов, чтобы получить данные в этом формате.

//new data to plot.
setInterval( function() {
    // data = mycallback('ajax_time_series/');
    data = {y: 0.013342943046016261, x: 1362914220};
    graph.series.addData(data);
    graph.update();
}, 3000 );

json_data = [{"series": [{y: 0.013342943046016261, x: 1362914220}, {y: 0.03332711471721182, x: 1362914280}, {y: 0.01995987637052034, x: 1362914340}, {y: 0.02667808501229039, x: 1362914400}, {y: 0.026667576407988548, x: 1362914460}, {y: 0.02666090465447435, x: 1362914520}, {y: 0.039902022061890564, x: 1362914580}, {y: 0.040065222851502304, x: 1362914640}, {y: 0.026725544622339118, x: 1362914700}, {y: 0.03328597880035014, x: 1362914760}, {y: 0.020025583265634844, x: 1362914820}, {y: 0.013351483328567889, x: 1362914880}, {y: 0.013327807174645642, x: 1362914940}, {y: 0.03327930933245091, x: 1362915000}, {y: 0.060011496243413356, x: 1362915060}, {y: 0.026726823599964183, x: 1362915120}, {y: 0.06625748681407234, x: 1362915180}, {y: 0.08716853007016215, x: 1362915240}, {y: 0.019958925851731625, x: 1362915300}, {y: 0.026628071716283376, x: 1362915360}, {y: 0.053539335295842476, x: 1362915420}, {y: 0.013329419200217766, x: 1362915480}, {y: 0.020005110867173173, x: 1362915540}, {y: 0.03985835992510624, x: 1362915600}, {y: 0.04009389940367332, x: 1362915660}, {y: 0.020015945088387825, x: 1362915720}, {y: 0.02661011443819408, x: 1362915780}, {y: 0.06656881334811096, x: 1362915840}, {y: 0.04690556277785193, x: 1362915900}, {y: 0.03326433994636323, x: 1362915960}, {y: 0.02670133346693278, x: 1362916020}, {y: 0.033335701795225714, x: 1362916080}, {y: 0.020001391989344027, x: 1362916140}, {y: 0.02000903195967164, x: 1362916200}, {y: 0.013308784414422375, x: 1362916260}, {y: 0.058279492803009744, x: 1362916320}, {y: 0.034243644495436376, x: 1362916380}, {y: 0.020081534665136593, x: 1362916440}, {y: 0.026653921622562717, x: 1362916500}, {y: 0.0199648119499449, x: 1362916560}, {y: 0.03338215889686262, x: 1362916620}, {y: 0.04659716637539024, x: 1362916680}, {y: 0.033199969663029336, x: 1362916740}, {y: 0.020053008656297493, x: 1362916800}, {y: 0.020083574882737414, x: 1362916860}, {y: 0.013338712371294185, x: 1362916920}, {y: 0.013285462289789874, x: 1362916980}, {y: 0.03342980523147545, x: 1362917040}, {y: 0.013318560614522242, x: 1362917100}, {y: 0.020054761094019935, x: 1362917160}, {y: 0.02649323226604952, x: 1362917220}, {y: 0.08046447455222104, x: 1362917280}, {y: 0.033380214683152935, x: 1362917340}, {y: 0.01998459181555401, x: 1362917400}, {y: 0.11263974301203006, x: 1362917460}, {y: 0.03351645707155687, x: 1362917520}, {y: 0.02667373118205504, x: 1362917580}, {y: 0.020004237840478896, x: 1362917640}, {y: 0.0867493421006396, x: 1362917700}], "name": "cpuUsage"}];

У меня будет несколько серий для обновления. Мои диаграммы не обновляются, и я не понимаю, какие документы нужно обновлять.

Кроме того... я не связан с рикшей. Существует ли JS-библиотека для потоковой передачи в реальном времени с хорошей документацией? Рикша выглядит красиво, но реальное время плохо документировано.


javascript rickshaw
person Tampa    schedule 10.03.2013    source источник
comment
Примечание. Я отказался от рикши. Поддержки нет, документация не очень. Вместо этого я использую флот. Отличная документация и поддержка пользователей и просто работает.   -  person Tampa    schedule 12.03.2013

Ответы (2)


arrow_upward
3
arrow_downward

Я хотел бы сообщить вам о моем обходном пути для этого:

  1. Сохраните внутренний HTML-код div диаграммы для последующего использования (после визуализации диаграммы внутренний HTML-код изменяется)

  2. Когда вы добавляете данные, добавляйте их в массив, к которому вы сможете получить доступ позже.

  3. Визуализируйте диаграмму как обычно с массивом данных.

  4. Когда вам нужно добавить данные, добавьте данные в массив, содержащий ваши данные, и заново сгенерируйте диаграмму. Вы можете сделать это только в том случае, если вы снова вставите исходный html обратно в div диаграммы перед повторным рендерингом.

Это хорошо работает с 8 диаграммами, обновляемыми каждые 5 секунд, с 20 точками данных на диаграмму. Он практически не требует ресурсов. Я уверен, что потребуется много, если вы увеличите количество точек данных или используете расширенные параметры рендеринга.

Я должен получить Нобелевскую премию по обходному пути за это.

person Niels Brinch    schedule 14.05.2013
comment
Не могли бы вы опубликовать код для этой работы? У меня такая же проблема с обновлением графика. - person Connor Black; 09.08.2013
comment
У меня нет кода, который не был бы тесно интегрирован в другой код. Какая часть моего описания вам непонятна? - person Niels Brinch; 09.08.2013

arrow_upward
2
arrow_downward

Для тех, кто отстает, серия FixedDuration это, вероятно, то, что вы хотите.

Кажется, это нигде не задокументировано, кроме как в этом примере, демонстрирующем обновления в реальном времени с фиксированным окном., но было еще до выпуска версии 1.1 в августе 2012 г..

Вот код для создания графика в их примере:

var tv = 250;

// instantiate our graph!
var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    width: 900,
    height: 500,
    renderer: 'line',
    series: new Rickshaw.Series.FixedDuration([{ name: 'one' }], undefined, {
        timeInterval: tv,
        maxDataPoints: 100,
        timeBase: new Date().getTime() / 1000
    }) 
} );

graph.render();

// add some data every so often

var i = 0;
var iv = setInterval( function() {

    var data = { one: Math.floor(Math.random() * 40) + 120 };

    var randInt = Math.floor(Math.random()*100);
    data.two = (Math.sin(i++ / 40) + 4) * (randInt + 400);
    data.three = randInt + 300;

    graph.series.addData(data);
    graph.render();

}, tv );
person turtlemonvh    schedule 05.03.2014