highcharts panning

Question

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/

Using Mozilla 11 both left and right mouse button pan but don't zoom. — dgw, Apr 20 '12 at 12:32
@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, Apr 20 '12 at 13:01
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, Jan 17 '13 at 15:15

score 3 · Answer 1 · answered Mar 14 '13 at 18:49

3

You can try with selection event:

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

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

answered Mar 14 '13 at 18:49

Luca

4,223
1
21
24

I used this method for achieving the right-click panning (only x direction for my application). It works pretty well, but I would like to get rid of the rectangle that appears in the graph when you zoom. I want to have it there for left-click zoom but not for right-click pan. Is there something else I can do inside the if-block above that would disable this rectangle as well? – Knut Marius Apr 04 '13 at 11:39

score 0 · Accepted Answer · edited Sep 08 '14 at 20:34

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/

This works great! Is there also a way to prevent the tooltip from jumping to adjacent values when panning? — roldugin, Nov 25 '14 at 01:40

highcharts panning

2 Answers2