Changing axis min/max on an existing plot using Flot JQuery Library

jfaghihnassiri picture jfaghihnassiri · Jul 19, 2013 · Viewed 13.7k times · Source

I've created a series of plots using the flot library, which are all displayed on a single page. Is there a way to update the X axis min and max options (options.xaxis.min, options.axis.max) values WITHOUT re-plotting the plots ($.plot('placeholder',data,options))?

I found this solution: http://osdir.com/ml/flot-graphs/2012-02/msg00064.html Which suggests that the following line would do it, but it does not work for me - the plots visible min and max are not modified based on this call.

monitorGraph.getOptions().xaxis[0].max = xaxis.max;

Any tips on updating the graphs xaxis max and min values would be greatly appreciated!

EDIT: Solution Below

The following code will take an existing plot, update the range that is visible, and redraw it in a very light and efficient way.

            plot.getOptions().xaxis[0].min = time.start;
            plot.getOptions().xaxis[0].max = time.end;
            plot.setupGrid();
            plot.draw();

Answer

matty-d picture matty-d · Jul 19, 2013

After you set the value of the yaxis max height, try

yourPlot.setupGrid();

Not sure if it'll be as smooth as you want but I think it does the trick.