CODEWITHSUNDEEP
jqueryhighcharts
jayesh
jayesh

Reputation: 2492

highstock chart move selection on keybord arrow key press

I like to scroll graph with keyboard arrow key I have added an event but it not work.

this code I have tried but not work

$(document).keydown(function (eventObject) {
    if(eventObject.keyCode == 37 || eventObject.keyCode == 39){
      $($('.highcharts-scrollbar-button')[0]).trigger( "click" );
    }
});

This is the graph that I like to scroll zoom area with keyboard arrow key.

http://jsfiddle.net/z4kgsfnp/64/

Upvotes: 0

Views: 490

Answers (1)

ewolden
ewolden

Reputation: 5803

You can use setExtremes() to decide what is shown of a graph in highcharts. Combined with getExtremes() you can then get the current zoom and set new zoomed area based on this. Like this:

$(document).keydown(function(eventObject) {
  let chart = $('#container').highcharts().xAxis[0]
  let extremes = chart.getExtremes()
  let zoomLevel = extremes.max - extremes.min
  if (eventObject.keyCode == 37 && extremes.max - zoomLevel > extremes.dataMin) {
    chart.setExtremes(extremes.min - zoomLevel, extremes.min)
  } else if (eventObject.keyCode == 39 && extremes.min + zoomLevel < extremes.dataMax) {
    chart.setExtremes(extremes.max, extremes.max + zoomLevel, extremes.min)
  }
});


$(function() {
  var delta = 0;
  $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
    // Create the chart
    $('#container').highcharts('StockChart', {
      chart: {
        events: {
          load: function() {
            // this is always constant after the chart is loaded
            delta = this.scroller.navigatorGroup.getBBox().height + 30;
          }
        }
      },

      rangeSelector: {
        selected: 1
      },

      title: {
        text: 'AAPL Stock Price'
      },

      series: [{
        name: 'AAPL',
        data: data,
        tooltip: {
          valueDecimals: 2
        }
      }]
    }, function(chart) {

    });
  });

});
$(document).keydown(function(eventObject) {
  let chart = $('#container').highcharts().xAxis[0]
  let extremes = chart.getExtremes()
  let zoomLevel = extremes.max - extremes.min
  if (eventObject.keyCode == 37 && extremes.max - zoomLevel > extremes.dataMin) {
    chart.setExtremes(extremes.min - zoomLevel, extremes.min)
  } else if (eventObject.keyCode == 39 && extremes.min + zoomLevel < extremes.dataMax) {
    chart.setExtremes(extremes.max, extremes.max + zoomLevel, extremes.min)
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="clip" style="height: 500px; overflow: hidden;">
  <div id="container" style="height: 500px; min-width: 500px"></div>
</div>

Working JSFiddle example: http://jsfiddle.net/ewolden/z4kgsfnp/88/

Upvotes: 3

Related Questions