chart zoomable - Javascript highcharts

Javascript examples for highcharts:Zoom

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

Description

chart zoomable

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Zoom Range | Highchart @ A Humble Opinion</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.src.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.src.js"></script> 
      <style id="compiled-css" type="text/css">

#container {/*from w ww.  j a  va 2  s . c  o m*/
   min-width:500px;
}


      </style> 
      <script type="text/javascript">
    $(window).on('load', function() {
(function ($) {
    var chart;
    var chartingOptions = {
        chart:{
            zoomType:'x'
        },
        title: {
            text: 'Monthly Average Temperature'
        },
        subtitle: {
            text: '<a href="http://java2s.com/">java2s.com</a>',
            useHTML: true
        },
        credits: {
            text: "Jugal Thakkar",
            href: "http://jugal.me/"
        },
        xAxis: {
            minRange:1,
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (?C)'
            }
        },
        series: [{
            name: 'Mumbai',
            data: [24.2, 24.6, 26.7, 28.6, 30.1, 29.0, 27.5, 27.2, 27.4, 28.2, 27.4, 25.6]
        }, {
            name: 'New Delhi',
            data: [14.1, 16.9, 22.4, 28.6, 32.8, 33.8, 31.0, 29.8, 29.2, 26.0, 20.3, 15.4]
        }],
        tooltip: {
            valueSuffix: '?C'
        }
    };
    chart = $('#container').highcharts(chartingOptions).highcharts();
})(jQuery);
    });

      </script> 
   </head> 
   <body> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials