Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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();
like image 864
jfaghihnassiri Avatar asked Jul 18 '13 23:07

jfaghihnassiri


2 Answers

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.

like image 187
matty-d Avatar answered Oct 17 '22 10:10

matty-d


You can also dynamically modify MIN/MAX parameters in axis options:

plot.getAxes().xaxis.options.min = 0;
plot.getAxes().xaxis.options.max = 999; 

plot.setupGrid();
plot.draw();
like image 42
Baumi Avatar answered Oct 17 '22 12:10

Baumi