Fleet event to update range in response to pan / zoom

Question

Is there an event for Flot that fires after the user has finished panning or zooming with the mouse scroll wheel (after the range range.xaxis.to/from and range.yaxis.to/from have been set)? I am trying to use the line below to update a selection in the overview graph after the user has completed or enlarged the main graph, but I found that either the update to the overview graph occurs after panning or scaling (not for both).

$("#plot").bind("mouseup scroll",updateOverviewSelection);

Thanks in advance.

Edit : http://jsfiddle.net/apandit/nu2rr58h/9/

In jsfiddle, I cannot pan the main plot, and the cursor does not seem to return to normal. The user can click and drag on the overview graph to make a selection, which leads to an increase in the scale of the main plot. I would also like to be able to allow the user to pan and zoom in on the main plot and update the selection box in the overview plot; I am trying to do this by binding a method updateOverviewSelectionto a div graphic for scroll and mouse events. Is there an event in Flot that fires every time the limits of the x and y axis are updated?

Answer 1

. , (overview.setSelection(ranges);) , plotselected . zoom , overview.setSelection(ranges); updateOverviewSelection. - /, updatingOverviewSelection.

http://jsfiddle.net/apandit/nu2rr58h/12/

var datasets = [[
                    [0,0],[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9]
                ],
                [
                    [0,0],[-1,-1],[-2,-2],[-3,-3],[-4,-4],[-5,-5],[-6,-6],[-7,-7],[-8,-8],[-9,-9]
                ]];

var plot = $.plot("#plot",datasets,{
        pan: {
          interactive: true
        },
        zoom: {
          interactive: true,
          mode: "x"
        }
    });

var overview = $.plot("#overview",datasets,{
    selection: {
        mode: "xy"
    }
});

var updatingOverviewSelection = false;

$("#plot").bind("plotpan plotzoom",updateOverviewSelection);
$("#overview").bind("plotselected", zoom);

function zoom(event,ranges) {
    if(updatingOverviewSelection) {
        updatingOverviewSelection = false;
    }
    else {
        var options = plot.getOptions();

        options.xaxes[0].min = ranges.xaxis.from;
        options.xaxes[0].max = ranges.xaxis.to;
        options.yaxes[0].min = ranges.yaxis.from;
        options.yaxes[0].max = ranges.yaxis.to;         

        plot = $.plot("#plot",datasets,options);
    }
};

// get the window x-axis and y-axis ranges for the main plot
// and set the selection in the overview plot to those ranges
function updateOverviewSelection(event) {
        var options = plot.getOptions();

        var ranges = {
            xaxis: {
                from: options.xaxes[0].min,
                to: options.xaxes[0].max
            },
            yaxis: {
                from: options.yaxes[0].min,
                to: options.yaxes[0].max
            }
        };

        updatingOverviewSelection = true;
        overview.setSelection(ranges);
};