Highcharts Demo

author(s): Torstein Hønsi

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/exporting.js"></script>


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

JavaScript

$(function() {
  /**
   * Load new data depending on the selected min and max
   */
  function afterSetExtremes(e) {
console.log('reloading data');
    var chart = Highcharts.charts[0];
    chart.showLoading('Data loading ...');
    $.getJSON('http://46.101.198.242/data1?start=' + Math.round(e.min / 1000) + '&end=' + (Math.round(e.max / 1000) + 86400) + '&callback=?', function(data) {
console.log(data);
      var ohlc = [],
        volume_neg = [],
        volume_pos = [],
        dataLength = data.length,
        i = 0;

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

        volume_neg.push([
          data[i]['0'], // the date
          data[i]['5'] // the volume
        ]);

        volume_pos.push([
          data[i]['0'], // the date
          data[i]['6'] // the volume
        ]);
      }
      //chart.plotOptions.series.dataGrouping.enabled = true;
      chart.series[0].setData(ohlc);
      chart.series[1].setData(volume_neg);
      chart.series[2].setData(volume_pos);

      chart.hideLoading();
    });
  }

  var initTimeStart = 1481897400
    //var initTimeStart = (Date.now() / 1000) - 604800
    //initTimeStart = parseInt(initTimeStart)    
  var initTimeEnd = (Date.now() / 1000) //- 300
  initTimeEnd = parseInt(initTimeEnd)

  $.getJSON('http://46.101.198.242/data1?start=' + initTimeStart + '&end=' + initTimeEnd + '&callback=?', function(data) {

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

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

      volume_neg.push([
       ...