Dynamic Chart from External JSON - CanvasJS JavaScript Charts

Dynamic Chart from External JSON - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
  <br/>
  <div id="chart" style="width: 816px; height: 150px;"></div>

JavaScript

function sortDataPoints(dps, par)
{
  var swapped;
  do {
    swapped = false;
    for (var i = 0; i < dps.length - 1; i++) {
      if (dps[i][par] > dps[i + 1][par]) {
        var temp = dps[i];
        dps[i] = dps[i + 1];
        dps[i + 1] = temp;
        swapped = true;
      }
    }
  } while (swapped);
}

      var dataLength = 0;
      var data = [];
      var updateInterval = 10;
			var value = "";
      var value2 = 0;
			var valor = "HR: 0";
  
function updateEcg() {
  $.getJSON("https://api.npoint.io/9a8aa58385bcf255d0f5", function (result) { // In this part a call a json file to provide the data into the chart
    if (dataLength !== result.length) {
      for (var i = dataLength; i < result.length; i++) {
      var deltaX = new Date(result[i].valuex);
      var deltaY = parseInt(result[i].valuey);
        data.push({
          x: new Date(result[i].valuex),
          y: parseFloat(result[i].valuey),
        });

        if (data.length > 478) {
          data.shift(); }
      }
      dataLength =  result.length;
      sortDataPoints(data, 'x');
      value  = value + deltaX; 
      value2 = value2 + deltaY;
			valor = CanvasJS.formatDate(new Date(value), "YYYY-MM-DD hh:mm:ss:fff") + " HR :"+ value2 + " 25mm/s 10mm/mv";
      
			chart.options.data[0].legendText = valor;
      chart.render();
    }
  });
}

var chart = new CanvasJS.Chart("chart", {
  toolTip:{
    enabled: true,       
    animationEnabled: false, 
  },
  backgroundColor: "transparent",
  colorSet: "greenShades",
  animationEnabled: true,
  theme: "theme3",
  zoomEnabled: true,
  panEnabled: true,
  title: {
    //text: "ECG Chart",
  },
  axisX: {
    lineThickness:0,
    tickThickness:0,
    valueFormatString:" ",//space
  },
  axisY: {
    lineThickness:0,
    tickThickness: 0,			
    gridThickness: 0,
  },
  data: [{
    markerSize: 1,
           showInLegend: true,				
				   legendText: valor,
				   legendMarkerType: "none",
					color:"black",
					type: "line",...