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

Answer 2

The FixedDuration class does not work with RandomData, as far as I know. What I do, is remove the first datapoint in the series arrays so that the graph does not get crowded and it streams to the left as more data is added:

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

I am not entirely sure why you need to add the last added datapoint back on to the end of the array (series[x].push(seriesX)), but it does not work otherwise. It does not have the effect of doubling the last datapoint, only one is added. Hope this works for you!