'Flot javascript graphing: setData for multiple series
I am trying to plot 6 time series at once, and update their values every few ms.
Here is how I initially plot the data which works fine:
var d1 = [];
var d2 = [];
var d3 = [];
var d4 = [];
var d5 = [];
var d6 = [];
d1 = getRandomData(d1, totalPoints);
d2 = getRandomData(d2, totalPoints);
d3 = getRandomData(d3, totalPoints);
d4 = getRandomData(d4, totalPoints);
d5 = getRandomData(d5, totalPoints);
d6 = getRandomData(d6, totalPoints);
var plot = $.plot("#placeholder", [{
data: d1,
lines: { show: true, fill: false }
}, {
data: d2,
lines: { show: true, fill: false }
}, {
data: d3,
lines: { show: true, fill: false }
}, {
data: d4,
lines: { show: true, fill: false }
}, {
data: d5,
lines: { show: true, fill: false }
}, {
data: d6,
lines: { show: true, fill: false }
}]);
But my update function doesn't work:
function update() {
d1 = getRandomData(d1, totalPoints);
d2 = getRandomData(d2, totalPoints);
d3 = getRandomData(d3, totalPoints);
d4 = getRandomData(d4, totalPoints);
d5 = getRandomData(d5, totalPoints);
d6 = getRandomData(d6, totalPoints);
plot.setData([d1, d2, d3, d4, d5, d6]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
//update();
When I uncomment and call update()
, the graph goes blank. But I know data is being loaded fine initially without calling it.
How can I update my d arrays and redraw the graph properly?
Solution 1:[1]
setData
and the data argument to plot
both take data formatted the same way.
So, create a reusable function:
getSeriesObj = function() {
return [
{
data: getRandomData(d1, totalPoints),
lines: { show: true, fill: false }
}, {
data: getRandomData(d2, totalPoints),
lines: { show: true, fill: false }
}, {
data: getRandomData(d3, totalPoints),
lines: { show: true, fill: false }
}, {
data: getRandomData(d4, totalPoints),
lines: { show: true, fill: false }
}, {
data: getRandomData(d5, totalPoints),
lines: { show: true, fill: false }
}, {
data: getRandomData(d6, totalPoints),
lines: { show: true, fill: false }
}
];
}
For the intial plot:
var plot = $.plot("#placeholder", getSeriesObj());
To reset your data:
plot.setData(getSeriesObj());
plot.draw();
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 |