How to add an arrow navigator in highcharts highmaps - highcharts

Question

highcharts only provides me with zoom in/out buttons, how can I add arrow navigation?
this example uses pie chart to introduce a navigator using colors:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/legend/navigation/
And when i look at the technology of the navigator the code that is related to it is the below:
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 12,
inactiveColor: '#CCC',
style: {
fontWeight: 'bold',
color: '#333',
fontSize: '12px'
}
}
Is there a way to achieve arrow navigation using highcharts reference? if not what can i use to introduce arrow navigation in highcharts project?
(What I want is the North - South - East - West buttons to scroll the map)

Answer 1

How about just adding this four buttons on top of map (using HTML, not Highcharts API) and then simply attach events to them, where after click on button you will set different extremes, using setExtremes() or mapZoom() functions.

Answer 2

var diffMove = 200;
var btnLeft = $('#btnLeft');
if (btnLeft.length > 0) {
btnLeft.click(function () {
var chart = $('#container').highcharts();
var pos = chart.xAxis[0].getExtremes();
if (pos.min - diffMove < pos.dataMin) {
chart.xAxis[0].setExtremes(pos.dataMin, pos.max - pos.min, true, true);
}
else
chart.xAxis[0].setExtremes(pos.min - diffMove, pos.max - diffMove, true, true);
});
}
var btnRight = $('#btnRight');
if (btnRight.length > 0) {
btnRight.click(function () {
var chart = $('#container').highcharts();
var pos = chart.xAxis[0].getExtremes();
if (pos.max + diffMove > pos.dataMax) {
chart.xAxis[0].setExtremes(pos.min + (pos.dataMax - pos.max), pos.dataMax, true, true);
}
else
chart.xAxis[0].setExtremes(pos.min + diffMove, pos.max + diffMove, true, true);
});
}
var btnBottom = $('#btnBottom');
if (btnBottom.length > 0) {
btnBottom.click(function () {
var chart = $('#container').highcharts();
var pos = chart.yAxis[0].getExtremes();
//console.log('before : ',chart.yAxis[0].getExtremes());
if (pos.max + diffMove < pos.dataMax) {
chart.yAxis[0].setExtremes(pos.min + diffMove, pos.max + diffMove, true, true);
}
else
chart.yAxis[0].setExtremes(pos.min + (pos.dataMax - pos.max), pos.dataMax, true, true);
//console.log('after : ', chart.yAxis[0].getExtremes());
});
}
var btnTop = $('#btnTop');
if (btnTop.length > 0) {
btnTop.click(function () {
var chart = $('#container').highcharts();
var pos = chart.yAxis[0].getExtremes();
//console.log('before : ', chart.yAxis[0].getExtremes());
if (pos.min - diffMove > pos.dataMin) {
chart.yAxis[0].setExtremes(pos.min - diffMove, pos.max - diffMove, true, true);
}
else
chart.yAxis[0].setExtremes(pos.dataMin, pos.max + (pos.dataMin - pos.min), true, true);
//console.log('after : ', chart.yAxis[0].getExtremes());
});
}