Dual x-axis on same line in stock chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Dual x-axis on same line in stock 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" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {//from www . j  ava2  s  .  c  om
   $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
      // split the data set into ohlc and volume
      var ohlc = [],
         volume = [],
         dataLength = data.length;
      for (i = 0; i < dataLength; i++) {
         ohlc.push([
            data[i][0], // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
         ]);
         volume.push([
            data[i][0], // the date
            data[i][5] // the volume
         ])
      }
      // set the allowed units for data grouping
      var groupingUnits = [[
         'week',                         // unit name
         [1]                             // allowed multiples
      ], [
         'month',
         [1, 2, 3, 4, 6]
      ]];
      // create the chart
      $('#container').highcharts('StockChart', {
          rangeSelector: {
              selected: 1
          },
          title: {
              text: 'AAPL Historical'
          },
          yAxis: [{
              title: {
                  text: 'OHLC'
              },
              height: 200,
              lineWidth: 2
          }, {
              title: {
                  text: 'Volume'
              },
              top: 300,
              height: 100,
              offset: 0,
              lineWidth: 2
          }],
          series: [{
              type: 'area',
              name: 'AAPL',
              data: ohlc,
              dataGrouping: {
               units: groupingUnits
              }
          }, {
              type: 'area',
              name: 'Volume',
              data: volume,
              yAxis: 1,
              dataGrouping: {
               units: groupingUnits
              }
          }]
      });
   });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <div id="container" style="height: 500px; min-width: 500px"></div>  
   </body>
</html>

Related Tutorials