Refresh/Reload Flot In Javascript

Question

How to reload a flot graph in Javascript? For instance, I want to redraw the graph every time an input value is changed. I tried experimenting with a few methods found in the flot API, such as draw() and setupGrid() without any luck.

Here's some example code:

$("#some_input_box").change(function(){
   plot.draw(); // redraw graph
});     

Answer 1

You are on the right track with draw and setupGrid, here's what you need to do:

var plot = $.plot($('#placeholder'),data,options);

//time passes, you now want to replot

var newData = [[0,2],[1,3],[2,5]];

plot.setData(newData);
plot.setupGrid(); //only necessary if your new data will change the axes or grid
plot.draw();

Alternatively, it's not too much worse to just re-call $.plot. The above way is more efficient, but...