Highcharts Demo

author(s): Torstein Hønsi

by koh_edwin

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


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

JavaScript

$.getJSON('https://www.highcharts.com/samples/data/aapl-ohlcv.json', function (data) {

    // split the data set into ohlc and volume
    var ohlc = [],
        volume = [],
        newVol=[],
        dataLength = data.length,
        // set the allowed units for data grouping
        groupingUnits = [
        	['week',[1]], // unit name // allowed multiples
        	['month',[1, 2, 3, 4, 6]]
        ],
        i = 0;

    for (i; i < dataLength; i += 1) {
        ohlc.push([data[i][0], data[i][1], data[i][2], data[i][3], data[i][4] 
        ]); // the date // open // high // low // close
        volume.push([data[i][0],data[i][5]]); // the date // the volume
        newVol.push([data[i][0],data[i][5]]);// the date // the volume
    }


    // create the chart
    Highcharts.stockChart('container', {

        rangeSelector: {selected: 1},

        title: {text: 'AAPL Historical'},

        yAxis: [
        	{labels: {align: 'right',x: -3},title: {text: 'OHLC'},height: '45%',lineWidth: 2,resize: {enabled: true}}, 
        	{labels: {align: 'right',x: -3},title: {text: 'Volume'},top: '50%',height: '20%',offset: 0,lineWidth: 2,},
        	{labels: {align: 'right',x: -3},title: {text: 'NewVol'},top: '75%',height: '20%',offset: 0,lineWidth: 2,}
        ],

        tooltip: {split: true},

        series: [
        	{type: 'candlestick',name: 'AAPL',data: ohlc}, 
        	{type: 'column',name: 'Volume',data: volume,yAxis: 1},
        	{type: 'line',name: 'newVol',data: newVol,yAxis: 2}

					//{type: 'candlestick',name: 'AAPL',data: ohlc,dataGrouping: {units: groupingUnits}}, 
        	//{type: 'column',name: 'Volume',data: volume,yAxis: 1,dataGrouping: {units: groupingUnits}},
        	//{type: 'line',name: 'newVol',data: newVol,yAxis: 2,dataGrouping: {units: groupingUnits}}
        ]
    });
});