highcharts panning

6
votes

I'm trying to implement highcharts panning based on this example: http://jsfiddle.net/HXUmK/5/

But I want to be able to zoom with the left mouse button and pan with the right mouse button. So I modified the code above and managed to make it work a little, but when I pan holding the right mouse button, the charts also zoomes.

Is there a way I can disable right mouse button zooming in highcharts?

Edit: Sorry for not being very clear about it. The code in the jsfiddle is not my code. Forget that code, it's just an example form witch I started. I am trying to modify that code in order to get left button zoom and right button pan. So I disabled the mousewheel zoom and activated the standars highcharts zoom

Edit2: Here is my code: http://jsfiddle.net/TKPQN/

2
zoominghighchartspanning
Using Mozilla 11 both left and right mouse button pan but don't zoom. – dgw
@dgw - use mousewheel to zoom in that jsFiddle. – wergeld
Mousewheel to zoom works, (both) mouse buttons pan. – dgw
@dgw - correct. This does not work in IE8 very well. Zooming is fine but panning is broken. The x/y axis values change with the panning but the chart data points stay in the same position until you release the mouse button then it snaps to where it should be. This would have been cool to implement but our user base is 99.9% IE. – wergeld
hi, I updated you code to fix some small issues. mouseup is not handled at document level. a normalization factor added to keep panning more human friendly. Frankly, 8 is a result of trial and error, not a magical number. – Erdogan Kurtur

2 Answers

3
votes

You can try with selection event:

chart: {
        ...
        events:{
            selection: function(event) {
                if (lastButton == 1)
                    event.preventDefault();
            }
       }
    }

See http://jsfiddle.net/TKPQN/48/

0
votes

I've wanted to use the Shift key for zooming, so this is my solution

 $('#container').highcharts('StockChart', {
    chart: {
        //zoomType: 'x', // we declare it without zoom, so the pan is enabled
        // ...
    }}); 
    var chart = $('#container').highcharts();
    chart.pointer.cmd = chart.pointer.onContainerMouseDown;
    chart.pointer.onContainerMouseDown = function (a){
        //in my case, I need only X zooming, so I enable it if shift is pressed
        this.zoomX=this.zoomHor=this.hasZoom=a.shiftKey;
        this.cmd(a);
    };

seems to work ok, so hope it help you

here is a JSFiddle working example: http://jsfiddle.net/73bc23zq/