Zoom In & Zoom Out chart - Javascript highcharts

Javascript examples for highcharts:Zoom

  1. HOME
  2. Javascript
  3. highcharts
  4. Zoom

Description

Zoom In & Zoom Out chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from  w  ww . j a  v a  2s  . c om*/
(function (H) {
    H.wrap(H.Chart.prototype, 'showResetZoom', function (proceed) {
    });
}(Highcharts));
var chart
$(function() {
  chart = Highcharts.chart('container', {
    chart: {
      type: 'bubble',
      zoomType: 'xy'
    },
    xAxis: {
      type: 'datetime',
      reversed: true,
      labels: {
        formatter: function() {
         var _dayInMillis = 1000*3600*24;
         var _backEndVal = this.value;//Value from Backend
         console.log(this.value);
         var _curr = new Date(); //getting the current date
         var _currUTC = Date.UTC(_curr.getUTCFullYear(),_curr.getUTCMonth(),_curr.getUTCDate());
          var _diff = Math.floor((_currUTC-_backEndVal)/_dayInMillis);
          var _noOfYrs = Math.floor(_diff/365);
          return _noOfYrs+'Year';
        }
      }
    },
    series: [{
      data: [
      //[1373155200000,29.9],
        //    [1373241600000,71.5],
         // [1373328000000,106.4]
        [1327449600000, 10, 30],
        [1366848000000, 20, 40],
        [1422144000000, 30, 50],
       [1498953600000, 0 , 0]
      ]
    }]
  });
});
$('#reset').click(function() {
   chart.zoomOut();
});
$('#zoom').click(function() {
  chart.xAxis[0].setExtremes(1327449600000,1422144000000, false)
  chart.yAxis[0].setExtremes(10, 20)
//   $('#container').highcharts().xAxis[0].zoom(5,11);
//   $('#container').highcharts().yAxis[0].zoom(50,100);
   // $('#container').highcharts().redraw();
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
      <div id="container" style="height: 400px; width: 500px"></div> 
      <input id="reset" type="button" value="Zoom Out"> 
      <input id="zoom" type="button" value="Zoom In">  
   </body>
</html>

Related Tutorials