Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flot reset zoom

Tags:

flot

I'm using Flot Charts with mouse scroll to zoom in and out. I created a button to call zoomOut() and it works well, but I can't find any solution to how I can zoom out all the way so that it Looks just like when it was first loaded. I don't want to reload that who container because it using ajax to pull data from mysql on refresh.

I Googled but couldn't find anything.

like image 272
codeBarer Avatar asked May 17 '13 16:05

codeBarer


3 Answers

You can also set a double click to reset the zoom function of the Flot chart. It redraws the Flot chart to its original state and can be used with dynamic data.

$("#placeholder").dblclick(function () {
plot = $.plot(placeholder, dataset, options);
});
like image 159
ShaunCoder Avatar answered Nov 03 '22 00:11

ShaunCoder


You can set the ranges of the axes to null. By setting this, the zoom level will be set so every data point is visible, just like the default zoom level.

Unlike the other solutions, this solution will not construct a whole new plot.

var axes = plot.getAxes(),
    xaxis = axes.xaxis.options,
    yaxis = axes.yaxis.options;
xaxis.min = null;
xaxis.max = null;
yaxis.min = null;
yaxis.max = null;

// Don't forget to redraw the plot
plot.setupGrid();
plot.draw();
like image 35
oscfri Avatar answered Nov 02 '22 22:11

oscfri


You can save your initial ranges of axes and redraw your plot like in example for navigating. But your code will be look like these:

// do the zooming
plotObjectPointer = $.plot(placeholder, plotData,
    $.extend(true, {}, options, {
        xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
        yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
    }));

where ranges will be your initial ranges. To prevent repeated Ajax loading you can use window.localStorage or just another var for storing plotData.

like image 35
Roman Spiridonov Avatar answered Nov 02 '22 22:11

Roman Spiridonov