Zoom and multiple y-axes

[Martin Niggemann]

Hi there,
i was trying to combine code from two of the flot examples, namely the "multiple axes" and the "select and zoom" example. However, the chart is drawn, but breaks on zooming. I suppose I'd have to modify the zoom part of the code to accept the second axis? See my snippet below ...

Any ideas? Cheers from Germany,
-martin

var placeholder = $("#flotChart");
    placeholder.bind("plotselected", function (event, ranges) {
        $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
var zoom = $("#zoom").attr("checked");
    if (zoom)
        plot = $.plot(placeholder, ActivityData, // 2nd axis: RiData
            $.extend(true, {}, options, {
                xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
                yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to } // zoom on both axes
            }));
    });
    placeholder.bind("plotunselected", function (event) {
        $("#selection").text("");
    });
var plot = $.plot
    (
    placeholder,
    [    { data: ActivityData, label: "Activity (counts)" },
        { data: RiData, label: "Refractive index (mV)", yaxis: 2 }],
    options
    );
    $("#clearSelection").click(function () {
        plot.clearSelection();
    });
});

[Davis Ford]

Hi Martin,

Did you have any luck with this?  I'm having trouble getting the select + zoom functionality to work.  I also have multiple yaxes in my graph, but I've set select mode to

selection: { mode: 'x' }

..so I didn't think it would matter.  My 'plotselected' event is firing, and if I was reading the plugin docs correctly, I *think* that all you need to do is call setSelection like so:

plotSelected: function (e, ranges) {

  console.log('before: ', this.plot.getSelection(), ranges);

  this.plot.setSelection(ranges, true);

  console.log('after: ', this.plot.getSelection());

}

But this doesn't work for me.  If I select, and then release, the event fires, and it calls the plugin's setSelection function and nothing happens...no errors, no change in x-axis boundaries or anything.

The range objects are identical in the 'before' / 'after' console.

So, I took a cue from the other online example: http://people.iola.dk/olau/flot/examples/selection.html

I re-wrote my selected handler like this:

plotSelected: function(e, ranges) {

  this.plot = $.plot(this.chart, data, $.extend(true, {}, this.options, { xaxis: ranges.xaxis }) );

}

It re-draws the chart but no xaxis change at all.  I inspect the range I pass into $.plot in the options, and it is correct -- it is in fact a smaller selection than the full x-range, but it doesn't seem to work, so I'm continuing to step debug into the flot source to find the issue....but It would be awesome if anyone on the group has a clue what might be going wrong here.

I've also noticed that the demo @ http://people.iola.dk/olau/flot/examples/selection.html throws some errors (at least in Chrome on Mac) if you toggle / select around in it.

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

1. Error in event handler for 'undefined': undefined event_bindings:202
1. chrome.Event.dispatchevent_bindings:202
2. chromeHidden.Port.dispatchOnMessagemiscellaneous_bindings:202
   
   

I'm not sure what the exact sequence is to get it there, but I can consistently make it happen.

Nevertheless, in the problem indicated above, where the selection isn't zooming in, there are absolutely zero errors/warnings in the console.

Regards,

Davis

[Davis Ford]

Nevermind, I was passing the range args incorrectly to the new plot -- I was not setting the xaxis: min and max properties:

this.plot = $.plot( this.chart, data,

        $.extend(true, {}, this.chartOptions, { xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to } }) ); 

On Saturday, June 9, 2012 11:45:13 PM UTC-4, Davis Ford wrote: