Issue #78 open

Panning (Dragging) a plot

Andreas Dörler
created an issue

Hi Chris,

I think it would be nice if one could drag (pan) a plot.

The zooming feature is nice, but there are cases where it's better to have separate zoom controls (in/out) and use the cursor for panning the plot.

Maybe something like this flot plugin: http://code.google.com/p/flot/source/browse/trunk/jquery.flot.navigate.js?spec=svn186&r=186

Greetings Andreas

Comments (12)

  1. Anonymous

    I implemented some external JS which could probably be integrated. If wondering why there are two redraws for each function, it seems there was bug where if you just reset the zoom the axis min and max were null. So I do a replot before to make sure they are not.

    var zoomFactor = 0.10; function zoomy (plot, inout) { var axes = plot.axes;

    plot.redraw(); plot.plugins.cursor._zoom.isZoomed = true;

    for (var ax in axes) { if (axes[ax].min && axes[ax].max) { var diff = Math.abs(axes[ax].max - axes[ax].min) * zoomFactor;

    if ((axes[ax].min >= 0 && inout == 'in') || (axes[ax].min < 0 && inout == 'out')) { axes[ax].min = axes[ax].min - diff; }

    else { axes[ax].min = axes[ax].min + diff; }

    if ((axes[ax].max >= 0 && inout == 'in') || (axes[ax].max < 0 && inout == 'out')) { axes[ax].max = axes[ax].max - diff; }

    else { axes[ax].max = axes[ax].max + diff; }

    axes[ax].tickInterval = null; axes[ax].daTickInterval = null; axes[ax]._ticks = []; } }

    plot.redraw(); plot.plugins.cursor._zoom.isZoomed = true; }

    var panFactor = 0.10; function panplot (plot, way) { var axes = plot.axes; var axpatt = /^x/; if (way == 'up' || way == 'down') { axpatt = /^y/; }

    plot.redraw(); plot.plugins.cursor._zoom.isZoomed = true;

    for (var ax in axes) { alert(ax + " " + axes[ax].min + " " + axes[ax].max + " " + axpatt.test(ax) ); if (axes[ax].min && axes[ax].max && axpatt.test(ax)) { var diff = Math.abs(axes[ax].max - axes[ax].min) * panFactor;

    if (way == 'up' || way == 'right') { axes[ax].max = axes[ax].max + diff; axes[ax].min = axes[ax].min + diff; }

    else { axes[ax].max = axes[ax].max - diff; axes[ax].min = axes[ax].min - diff; }

    axes[ax].tickInterval = null; axes[ax].daTickInterval = null; axes[ax]._ticks = []; } }

    plot.redraw(); plot.plugins.cursor._zoom.isZoomed = true; }

  2. Anonymous

    Me too! JQPlot really need panning to be comparable and to replace flot (which does panning using its options) but not as sexy.

  3. Anonymous

    hello, I would like to know if jqplot can insert buttons to zoom. the idea would be to select a date and display only the data that date. I believe that the operation is the same as the 'zoom', except that the selection of the period would occur with manual entry and not by 'drag & drop'. Do you think it would be possible?

  4. Log in to comment