c00kiemonster c00kiemonster - 7 months ago 118
Javascript Question

How can I limit the size of the navigator in highstock.js?

I have an application with long time series and I want to limit the maximum size of the navigator. I found the afterSetExtremes event in the documentation, which I thought I could capture and then limit the size of the navigator from there. But it doesn't really work as expected. I seem to be able to limit the x size of the plotted data. But the navigator doesn't follow the size of the plotted data at all. Am i missing something here? How can I get it to work properly? Ideally the navigator would just remain fixed in size over a specific size. Is that possible to achieve?

Here the jsfiddle:

http://jsfiddle.net/jn3cww8n/2/

$(function () {
$('#container').highcharts('StockChart', {
xAxis: {
events: {
afterSetExtremes: function(e) {

var dmin = Math.abs(e.min - this.oldMin),
dmax = Math.abs(e.max - this.oldMax),
range = e.max - e.min,
new_min = e.min,
new_max = e.max,
yr_range = range / 1000 / 60 / 60 / 24;
if (0.0 === dmin && 0.0 < dmax) {
$('#report').html('Max changed ' + yr_range);

if (31536000000.0 < range) {
$('#report').html('setting new max');
new_max = new_min + 31536000000.0;
}

} else if (0.0 < dmin && 0.0 === dmax) {
$('#report').html('Min changed ' + yr_range);

if (31536000000.0 < range) {
$('#report').html('setting new min');
new_min = new_max - 31536000000.0;
}

} else {
$('#report').html('Nothing changed');
}

this.setExtremes(new_min, new_max);

}
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});

Answer

I changed tack on this one. Instead of having a max size of the navigator, I restricted users from changing its size altogether.

I got the idea from this post.

Just two changes required:

  1. Blank the drawHandle function Highcharts.Scroller.prototype.drawHandle = function () {};
  2. Commment out a few lines:

    22472,22476c22472,22476
    
    <                     //if (isOnNavigator && math.abs(chartX - zoomedMin - navigatorLeft) < handleSensitivity) {
    
    <                         //scroller.grabbedLeft = true;
    
    <                         //scroller.otherHandlePos = zoomedMax;
    
    <                         //scroller.fixedExtreme = baseXAxis.max;
    
    <                         //chart.fixedRange = null;
    
    ---
    
    >                     if (isOnNavigator && math.abs(chartX - zoomedMin - navigatorLeft) < handleSensitivity) {
    
    >                         scroller.grabbedLeft = true;
    
    >                         scroller.otherHandlePos = zoomedMax;
    
    >                         scroller.fixedExtreme = baseXAxis.max;
    
    >                         chart.fixedRange = null;
    
    22479,22483c22479,22483
    
    <                     //} else if (isOnNavigator && math.abs(chartX - zoomedMax - navigatorLeft) < handleSensitivity) {
    
    <                         //scroller.grabbedRight = true;
    
    <                         //scroller.otherHandlePos = zoomedMin;
    
    <                         //scroller.fixedExtreme = baseXAxis.min;
    
    <                         //chart.fixedRange = null;
    
    ---
    
    >                     } else if (isOnNavigator && math.abs(chartX - zoomedMax - navigatorLeft) < handleSensitivity) {
    
    >                         scroller.grabbedRight = true;
    
    >                         scroller.otherHandlePos = zoomedMin;
    
    >                         scroller.fixedExtreme = baseXAxis.min;
    
    >                         chart.fixedRange = null;
    
    22486,22487c22486
    
    <                     //} else if (chartX > navigatorLeft + zoomedMin - scrollbarPad && chartX < navigatorLeft + zoomedMax + scrollbarPad) {
    
    <                     if (chartX > navigatorLeft + zoomedMin - scrollbarPad && chartX < navigatorLeft + zoomedMax + scrollbarPad) {
    
    ---
    
    >                     } else if (chartX > navigatorLeft + zoomedMin - scrollbarPad && chartX < navigatorLeft + zoomedMax + scrollbarPad) {
    

Pretty clean all in all.