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 unment 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?

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 unment 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?

• javascript
• flot

• d1 = getRandomData(d1, totalPoints); -- why is d1 both assigned from and passed into this function? – Mark Commented Sep 12, 2013 at 23:10

1 Answer 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();

Here's a jsFiddle demo.