How do I deactivate selection and activate zoom/pan in Flot?

Question

I was able to use the selection plugin to select an area of my plot and zoom in.

Now I want to be able to switch between selection zoom and mouse wheel zoom+panning.

As a test, I want to disable selection as soon as something is selected and zoomed in, while activating the pan and zoom with mouse wheel.

I can set options using getOptions() , but I can't change selection/zoom/pan. I inspect the options object and it does change ( interactive = true ). I redraw the plot with draw() , but the selection/zoom/pan doesn't change.

The code will let me select and zoom, but that's it:

$("#chart1").bind("plotselected", function (event, ranges) {
    var o=plot.getOptions();
    o.xaxes[0].min = ranges.xaxis.from;
    o.xaxes[0].max = ranges.xaxis.to;
    o.yaxes[0].min = ranges.yaxis.from;
    o.yaxes[0].max = ranges.yaxis.to;
    // block 1: not working as expected, although the options object does change                                                                                                                                                                     
    o.pan.interactive = true;
    o.zoom.interactive = true;
    o.selection.mode = null;
    // block1 end                                                                                                                                                                                
    plot.setupGrid();
    plot.draw();
    plot.clearSelection();
}

What am I doing wrong?

Answer 1

I couldn't figure out how to solve this problem, so instead, I decided to leave both zoom.interactive = true and selection.mode = "xy" .

For panning, I added 4 buttons to the side of the plot (like the arrows in the example of the navigation plugin). Although panning with the mouse is really cool, the user would have to toggled between modes (zoom+pan OR selection zoom) anyway.

Although this is not an answer to my question, if other people are looking for a way of having selection/zoom/panning, this solution will work.

Answer 2

To make this work in Flot 0.8.2, I made a small modification to the 2 plugins.

In function onDragStart(e) in jquery.flot.navigate.js, change

if (e.which != 1)  // only accept left-click

to

if (e.which != 1 || !plot.getOptions().pan.interactive)  // only accept left-click

and in function onMouseDown(e) in jquery.flot.selection.js, change

if (e.which != 1)  // only accept left-click

to

if (e.which != 1 || !plot.getOptions().selection.mode)  // only accept left-click

Initialize your plot with both options enabled, otherwise the event handlers won't be bound for the disabled options. Then disable one of the options.

var plot = $.plot ($("#chart1"), data, {selection:{mode:"xy"}, pan:{interactive:true}});
plot.getOptions().selection.mode = null;

It would be nicer if I had modified the Flot code to bind and unbind the event handlers, but this was simpler.

Answer 3

I find a good solution: draw the plot again with current data and options.

plot = $.plot("#flotplaceholder",data, options);

//change options to enable/disable pan/selection

            var theOptions = plot.getOptions();
            if (actionMode == "pan"){
                theOptions.pan.interactive = true;
                theOptions.selection.mode = null;
            }else if(actionMode == "select"){
                theOptions.pan.interactive = false;
                theOptions.selection.mode = "xy";
            }

// redraw the plot

plot = $.plot("#flotplaceholder", plot.getData(), theOptions);

hope it help