Flot reset zoom

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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