JavaScript Stock Charts with Async Data Loading - 0 | JSFiddle Sample Code

JavaScript Stock Charts with Async Data Loading - 0 | JSFiddle Sample Code

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>

  <button id="shiftbutton">
   shiftData   
  </button>
<div id="chartContainer" style="height: 450px; width: 100%;"></div>
<img id="loader" src="https://canvasjs.com/wp-content/uploads/images/gallery/javascript-stockcharts/overview/loading.gif" style="position: absolute; top: 150px; left: 48%; display: none">
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/javascript-stockcharts/stockchart-async-data/" target="_blank" title="JavaScript Stock Charts with Async Data Loading ">https://canvasjs.com/javascript-stockcharts/stockchart-async-data/</a></div>

JavaScript

window.onload = function () {
  var dataPoints1 = [], dataPoints2 = [];
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    title:{
      text:"Async Data Loading in StockChart"
    },
    rangeChanged: rangeChanged,
    charts: [{
      
        axisY2: {
          includeZero: false,
          labelFontSize: 11,
          labelFontColor: "red",
          labelFontWeight: "bold",
          gridDashType: "dot",
          tickPlacement: "inside",
          labelPlacement: "inside",
          gridThickness: 1,
          crosshair: {
            enabled: true,
            color: "orange",
            labelFontColor: "#F8F8F8"
          }
        },
        axisX: {
          labelFontSize: 11,
          gridDashType: "dot",
          tickPlacement: "inside",
          labelPlacement: "inside",
          gridThickness: 1,
          crosshair: {
            enabled: true,
            color: "orange",
            labelFontColor: "#F8F8F8"
          }
        },
      data: [{
        type: "candlestick",
        yValueFormatString: "$#,###.##",
        axisYType: "secondary",
        dataPoints : dataPoints1
      }],
      rangeChanging: onGraphRangeChanging
    }],
    navigator: {
      dynamicUpdate: false,
      data: [{
        dataPoints: dataPoints2
      }],
      slider: {
        minimum: new Date(2015, 05, 01),
        maximum: new Date(2019, 05, 01)
      }
    }
  });
  function addData(data) {
    //stockChart.options.charts[0].data[0].dataPoints = [];
    let newdata = [];
    for(var i = 0; i < data.length; i++){
      newdata.push({x: new Date(data[i].dateTime*1000), y: [ Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close) ]});
      
    }
    stockChart.options.charts[0].data[0].dataPoints = newdata;
    stockChart.render();
  }
  function onGraphRangeChanging(e) {
  	console.log('graph event');
  	console.log(e);
  }
  var lastminimum = 1433124765;
  var lastmaximum = 1544832000;
  function...