Живого обновление Рикши график

Question

Я пытаюсь использовать Рикша, чтобы создать хороший замещающий график, который показывает живое обновление со случайными данными, например, так:

var series = [[], []]; 
var random = new Rickshaw.Fixtures.RandomData(150); 

for(var i = 0; i < 80; i++) { 
    random.addData(series); 
} 

var throughput = new Rickshaw.Graph({ 
    element: document.querySelector("#throughput_chart"), 
    width: "300", 
    height: "200", 
    renderer: "line", 
    series: [{ 
     color: "gold", 
     data: series[0] 
    }] 
}); 

var alerts = new Rickshaw.Graph({ 
    element: document.querySelector("#alerts_chart"), 
    width: "300", 
    height: "200", 
    renderer: "line", 
    series: [{ 
     color: "red", 
     data: series[1] 
    }] 
}); 

throughput.render(); 
alerts.render(); 

setInterval(function() { 
    random.addData(series); 
    throughput.update(); 
    alerts.update(); 
    /* XXX: This causes the data to stop drawing properly 
    series.forEach(function(s) { 
     s.shift(); 
    }); 
    */ 
}, 1000); 

Это работает, за закомментированное исключением части. Как бы то ни было, он продолжает добавлять данные, что означает, что график становится все более и более переполненным. Я хотел бы иметь возможность удалить первый элемент каждый раз, когда я добавляю новый элемент в конец, чтобы сохранить график с одинаковым количеством точек данных, но когда я помещаю в него этот код, для отображения любых данных, хотя console.log показывает, что массив по-прежнему заполнен данными.

Как я могу сделать эту работу, так что я показываю только фиксированное количество точек данных за раз?

Answer 1

Следуя пример примера на документации Рикши (http://code.shutterstock.com/rickshaw/examples/fixed.html), я сколотил что-то похожее на то, что вам нужно:

JS FIDDLE

var tv = 50; 

var throughput = new Rickshaw.Graph({ 
    element: document.querySelector("#throughput_chart"), 
    width: "300", 
    height: "200", 
    renderer: "line", 
    series: new Rickshaw.Series.FixedDuration([{ 
     name: 'one', color: 'gold' 
    }], undefined, { 
     timeInterval: tv, 
     maxDataPoints: 100, 
     timeBase: new Date().getTime()/1000 
    }) 
}); 

var alerts = new Rickshaw.Graph({ 
    element: document.querySelector("#alerts_chart"), 
    width: "300", 
    height: "200", 
    renderer: "line", 
    series: new Rickshaw.Series.FixedDuration([{ 
     name: 'one', color: 'red' 
    }], undefined, { 
     timeInterval: tv, 
     maxDataPoints: 100, 
     timeBase: new Date().getTime()/1000 
    }) 
}); 

for(var i = 0; i < 100; i++){ 
    addRandomData(throughput); 
    addRandomData(alerts); 
} 

throughput.render(); 
alerts.render(); 

setInterval(function() { 

    addRandomData(throughput); 
    addRandomData(alerts); 
    throughput.render(); 
    alerts.render(); 

}, tv); 

function addRandomData(chart) { 
    var data = { 
     one: Math.floor(Math.random() * 40) + 120 
    }; 
    chart.series.addData(data); 
} 

Answer 2

Класс FixedDuration не работает Насколько я знаю, RandomData. Что я могу сделать, это удалить первую Datapoint в массивах серии, так что граф не переполнен, и потоки слева, как больше данных добавлено:

setInterval(function() { 
    random.addData(seriesData); 
    for (i=0; i < seriesData.length; i++){ 
     var series0 = seriesData[i][seriesData[i].length-1]; 
     seriesData[i].shift(); 
     seriesData[i].push(series0); 
    } 
    graph.update(); 
}, 3000); 

Я не совсем уверен, почему вы должны добавить последний добавленный datapoint обратно в конец массива (series[x].push(seriesX)), но он не работает иначе. Он не влияет на удвоение последнего дататота, добавляется только один. Надеюсь, что это работает для вас!