Highchart zooming - Javascript highcharts

Javascript examples for highcharts:Zoom

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

Description

Highchart zooming

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//ww  w .j ava 2s  .c  o  m
 $(document).ready(function () {
     var zoomSeries = [{
         name: "Series A",
         data: [
             [Date.parse("2013-05-16T11:01:25-04:00"), 99.75],
             [Date.parse("2013-05-14T10:18:41-04:00"), 99.5]
         ]
     }, {
         name: "Series B",
         data: [
             [Date.parse("2013-05-16T10:58:34-04:00"), 99.489],
             [Date.parse("2013-05-14T10:13:32-04:00"), 99.297]
         ]
     }];
     var ch = new Highcharts.Chart({
         chart: {
             renderTo: 'container',
             type: 'scatter',
             zoomType: 'xy'
         },
         xAxis: {
             type: 'datetime'
         },
         yAxis: {
             min:99.2
         },
         series: zoomSeries
     });
 });
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials