Zoom for stock chart - Javascript highcharts

Javascript examples for highcharts:Stock Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Stock Chart

Description

Zoom for stock chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <title>Zoom Test</title>  
      <script>
$(function () {//from   w w w . ja va2s  .  c  o  m
       $('#container').highcharts('StockChart', {
          chart: {
              type: 'columnrange'
          },
                    exporting: {enabled: false},
                    legend: {
                        enabled: false,
                        itemHoverStyle: {
                        cursor: 'default'
                    }
                    },
                    navigator: {
                        maskFill: 'rgba(255, 255, 255, 0.20)',
                    },
          rangeSelector: {
             selected: 0
          },
                    xAxis:{
                        type: 'datetime'
                    },
                    series: [{ "dataGrouping": {"enabled": false}, "name":"Zoom Test", "data": [
                        [1369065600000,200,220],
                        [1369670400000,220,240],
                        [1370275200000,230,250],
                        [1370880000000,240,260],
                        [1371484800000,250,270],
                        [1372089600000,260,280],
                        [1372694400000,270,300],
                        [1373299200000,260,280],
                        [1373904000000,240,245],
                        [1374508800000,220,225],
                        [1375113600000,200,240],
                        [1375718400000,240,260],
                        [1376323200000,250,270],
                        [1377522000000,200,230],
                        [1377532800000,210,240]]}]
      });
});

      </script> 
      <div id="container" style="min-width:400px; height:400px;"></div>   
   </body>
</html>

Related Tutorials