How to move a chart (Highcharts) using the arrow keys?

Question

How do I move a chart using Highcharts?

Instead of moving with the mouse to the right and to the left, I would like to use the arrow keys (right arrow, left arrow, up arrow, and down arrow).

http://goo.gl/oJ71Dx

This example uses the mouse to move; I need to do with the keys. Could someone help me?

Answer 1

That’s not too hard. Highcharts has a very rich object that you can manipulate. I upgraded your fiddle with a solution to move sideways with the keyboard.

The key to the solution was to first ensure that the container receives keyboard events because tags div usually do not receive them. For this I added the attribute tabindex="-1". Then it was just to monitor the event keydown and change the ends of the x-axis to each right or left arrow key:

$('#container')
.on('keydown', function(event){
    var deltaX, hc, extr;
    if(event.which === 37 || event.which === 39) {
        deltaX = 1000000000; //ajuste esse tamanho a seu gosto
        if (event.which === 37) deltaX = -deltaX; // p/ esquerda
        hc = $('#container').highcharts();
        extr = hc.xAxis[0].getExtremes();
        hc.xAxis[0].setExtremes(extr.min + deltaX, extr.max + deltaX);
    }
})

I also put the container in focus right at the beginning, with $('#container').focus();.