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 mented 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?
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 mented 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?
Share Improve this question edited Mar 5, 2016 at 21:12 Peter 3,9561 gold badge24 silver badges44 bronze badges asked Jun 5, 2013 at 15:38 singpolymasingpolyma 11.3k5 gold badges51 silver badges75 bronze badges2 Answers
Reset to default 11Following the lead of the example on the documentation for Rickshaw (http://code.shutterstock./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);
}
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!