HighCharts: Panning in yAxis is happening too slow

Question

I made a small code for panning in yAxis, but its a little slow. it becomes faster if I increase the value of tickInterval. But the downside is that with increased tickInterval, the code starts working oddly when I drag the mouse for less than the tickInterval size (try changing tickInterval to 500 in my fiddle and then drag mouse for a minute increment.

My link to jsfiddle.

Pertinent Code:

var mouseY;
$(chart.container)
.mousedown(function(event) {
    mouseY=event.offsetY;
    yData=chart.yAxis[0].getExtremes();
    yDataRange=yData.max-yData.min;
    isDragging=true;
})
.mousemove(function(e) {
    var wasDragging = isDragging;
    if (wasDragging) {
        yVar=mouseY-e.pageY; 
        if(yVar!=0) {
            yVarDelta=yVar/500*yDataRange;
            chart.yAxis[0].setExtremes((yData.min-yVarDelta),(yData.max-yVarDelta));
        }
    }
})
.mouseup(function (e) {
    isDragging = false;
});

Will also appreciate if someone can provide an alternate route to converting pixels (e.pageY) to y co-ordinate. As you can see in code, currently I am doing a workaround.

EDIT I included translate function in this jsfiddle and have put logic such that the panning happens only at mouseup and not at mousemove. The issue I am currently facing is that if the drag is less than tick interval, not only does the code pan, but it also zooms. I presume its happening because the change in yAxis min and max occurs at a floor for min and ceiling for max.

Answer 1

There are a few problems here. Firstly, when you call setExtremes, your range gets bigger ( causing the zoom effect). This is because you are not moving by an exact tick interval. You can cure this by setting set/end on tick on the y axis to false:

    yAxis: {
        min: -50,
        tickInterval: 500,
        startOnTick:false,
        endOnTick:false
    },

The way to convert pixels to coordinates is to use 'translate'. I changed your first jsfiddle as follows: http://jsfiddle.net/uLHCx/

       if(yVar<-50 || yVar > 50) {
           mouseY = e.pageY;
            yVarDelta=yVar/100*yDataRange;
           yVarDelta =  chart.yAxis[0].translate(e.pageY) - chart.yAxis[0].translate(e.pageY - yVarDelta);
            chart.yAxis[0].setExtremes((yData.min-yVarDelta),(yData.max-yVarDelta));
        }

You can change the scroll amount by changing the calculation of yVarDelta.

Note, I put a range check on the yVar so that we don't redisplay unless the mouse has moved a given amount, and reset the valu of mouseY.

This may not do exactly what you want, but it should be enough for you to modify it as required.