Paul Jaker

HighChart

by Black Label

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
    ]);
  }

  var chart = 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() {
                           ...