javascript - updating flot data and axis

Question

I have created a highly interactive graph. all of the interactions have been achieved without re-initiating the flot object. re-initiating the flot object causes the interactions to break, i would have liked to have done this as efficiently as possible.

the interactions my graph supports are:

• changing visibility of individual series
• multiple y-axes and toggling between them
• zoom graph(with a reset)
• click and drag panning

the final two features i have to add are:

• adding/subtracting individual series
• updating individual series

both of which require ajax requests, the graph must support 1000's of datapoints so efficiency is key (i will have to reduce the datapoints at some point).

as i mentioned i have managed to do all of this so far without multiple calls to $.plot, i have used plugins in-built functions and setting some options from the getOptions() method. instead of using $.plot i call the plot.draw() method to update the chart. But, i am struggling to find anyway to push data into the provided methods that don't involve calling the entire function again (besides doing so makes it harder to keep track of the variables i am changing in options.)

My question is has anyone had experience with updating, not replacing, flot axes and data using ajax requests and how were you able to achieve efficient results?

Answer 1

The method you are missing is the setupGrid. This will recreate the axises without re-initing the plot.

In general my workflow for modfiying an existing plot is something like this:

var series = plot.getData(); // reference to your series
series[0].data = someNewArray;
series[0].color = 'blue'; // modify existing series
series.push({data: [[0, 5], [1, 1], [2, 7]], color: 'green'}); // add a new one
plot.setData(series); // you need to set the data so that flot will re-process any newly added series
var opts = plot.getOptions() // get a reference to the options
opts.xaxes[0].min = -1; // adjust an axis min, use the xaxes property NOT the xaxis
// there is no need to "setOptions"...
plot.setupGrid() // if you need to redraw the axis/grid
plot.draw()