Paul Jaker

HighChart

by PaulJaker

HTML

<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">


<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/stock/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>

<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>

<script src="https://code.highcharts.com/modules/stock-tools.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<div id="container" class="chart"></div>

JavaScript

Highcharts.getJSON('https://api.npoint.io/0a4122f134b91d347536', 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', {
        xAxis: {
        	type: 'datetime',
          events: {
          	afterSetExtremes: 
              function(e)                                                         
              {
                if (e.trigger == "rangeSelectorButton" && e.rangeSelectorButton.text == "Day")
                {
                  console.log("day");

                  var maxDistance = 1 * 30 * 24 * 3600 * 1000; //1 months time
                  var xaxis = this;
                  if ((e.max - e.min) > maxDistance) {
                    var min = e.max - maxDistance;
                    var max = e.max;
                    window.setTimeout(function() {
                      xaxis.setExtremes(min, max);
                    }, 1);
                  }
                }
                if (e.trigger == "rangeSelectorButton" && e.rangeSelectorButton.text == "Week")
                {
                  console.log("Week");
                
                  var maxDistance = 12 * 30 * 24 * 3600 * 1000; //12 months time
                  var xaxis = this;
                  if ((e.max - e.min) > maxDistance) {
                    var min = e.max - maxDistance;
                    var max = e.max;
                    window.setTimeout(function() {
                      xaxis.setExtremes(min, max);
                    }, 1);
                  }
                } 
                
 ...