Live updating Rickshaw graph

Question

I'm trying to use Rickshaw to create a nice placeholder graph that shows live updating with random data, like so:

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

This works, except for the commented out part. As it is, it keeps adding data, which means the graph gets more and more crowded. I'd like to be able to remove the first item each time I add a new item to the end, in order to keep the graph with the same number of data points, but when I put that code in it quickly causes the graph not to display any data, even though console.log shows that the array is still full of data.

How can I make this work, so that I am only displaying a fixed number of data points at a time?

Answer 1

Following the lead of the example on the documentation for Rickshaw (http://code.shutterstock.com/rickshaw/examples/fixed.html), I've knocked together something similar to what you need:

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