Stock chart with GUI

author(s): Sebastian Bochan

by oysteinmoseng

HAML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<input value="click me to focus">
<div id="container" class="chart"></div>

JavaScript

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function(data) {

  // split the data set into ohlc and volume
  var ohlc = [],
    volume = [],
    dataLength = data.length,
    i = 0;

  for (i; i < dataLength; i += 1) {
    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
    ]);
  }

  Highcharts.stockChart('container', {
	accessibility: {
    	keyboardNavigation: {
        	seriesNavigation: {
            	mode: 'serialize'
            }
        }
    },
    yAxis: [{
      height: '80%'
    }, {
      top: '80%',
      height: '20%',
      offset: 0
    }],

    series: [{
      type: 'ohlc',
      id: 'aapl-ohlc',
      data: ohlc
    }, {
      type: 'column',
      id: 'aapl-volume',
      data: volume,
      yAxis: 1
    }]

  });
});