javascript - Changing axis minmax on an existing plot using Flot JQuery Library - Stack Overflow

admin管理员组

文章数量:1297182

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: .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();

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

• javascript
• jquery
• graph
• zooming
• flot

Share Improve this question Follow edited Mar 15, 2018 at 5:32 Jacob Hulse 85911 gold badge1010 silver badges2121 bronze badges asked Jul 18, 2013 at 23:03 jfaghihnassirijfaghihnassiri 52322 gold badges44 silver badges1717 bronze badges 1

• To specify futher: I would like the plots to reflect the new x min and max, but I would not like to re-plot them completely, since that is very expensive and seems to be slowing down the process. – jfaghihnassiri Commented Jul 18, 2013 at 23:07

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 12

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.

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

本文标签： javascriptChanging axis minmax on an existing plot using Flot JQuery LibraryStack Overflow