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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.stock.min.js"></script>
<div class="mt-2 ms-1">
  <div class="btn-group filter-data" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-sm btn-outline-primary" name="daily">Daily</button>
    <button type="button" class="btn btn-sm btn-outline-primary" name="weekly">Weekly</button>
    <button type="button" class="btn btn-sm btn-outline-primary active" name="monthly">Monthly</button>
  </div>
</div>
<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">

JavaScript

window.onload = function () {
  var dataPoints1 = [], dataPoints2 = [];
  var dataURLs = {
    "daily": {
      "url": "https://api.npoint.io/cada59b515bedeb8bd06",
      "chartDps": [],
      "chartNavigatorDps": []
    },
    "weekly": {
      "url": "https://api.npoint.io/5bc5b6d88a39e5782f5e",
      "chartDps": [],
      "chartNavigatorDps": []
    },
    "monthly": {
      "url": "https://api.npoint.io/9ba7249be867b781f701",
      "chartDps": [],
      "chartNavigatorDps": []
    }
  }
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    theme: "light2",
    charts: [{
      axisY2: {
        prefix: "$"
      },
      data: [{
        type: "candlestick",
        yValueFormatString: "$#,###.##",
        axisYType: "secondary",
        dataPoints : dataPoints1
      }]
    }],
    navigator: {
      dynamicUpdate: false,
      data: [{
        dataPoints: dataPoints2
      }],
      slider: {
        minimum: new Date(2015, 05, 01),
        maximum: new Date(2019, 05, 01)
      }
    },
    rangeSelector: {
      enabled: false
    }
  });

  function updateData(dataType) {
    jQuery(".filter-data .btn").removeClass("active");
    jQuery(".filter-data .btn[name='"+dataType+"']").addClass("active");
    stockChart.options.charts[0].data[0].dataPoints = dataURLs[dataType].chartDps;
    stockChart.options.navigator.data[0].dataPoints = dataURLs[dataType].chartNavigatorDps;
    if(dataURLs[dataType].chartDps.length == 0) {
      $("#loader").css("display", "block");
      $.getJSON(dataURLs[dataType].url, function(data) {
        for(var i = 0; i < data.length; i++) {
          dataURLs[dataType].chartDps.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});
          dataURLs[dataType].chartNavigatorDps.push({x: new Date(data[i].date), y: Number(data[i].close)})
        }
        $("#loader").css("display", "none");
        stockChart.render();
      });
    } else {
     ...