Updating Legend in Dynamic chart - CanvasJS JavaScript Charts

Updating Legend in Dynamic chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chart" style="height: 360px; width: 100%;"></div>

JavaScript

(function(){
  $.getJSON("https://api.npoint.io/9a8aa58385bcf255d0f5", function (result) {
    for(var i = 0; i < result.length; i++) {
      data.push({
        x: new Date(result[i].valuex),
        y: parseFloat(result[i].valuey
      )});
    }
    sortDataPoints(data, 'x')
    chart.render();
  });
})();

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

function updateEcg() {
  $.getJSON("https://api.myjson.com/bins/17jg6h", function (result) {
    if(count < result.length) {
      var deltaX = result[count].valuex;
      var deltaY = result[count].valuey;

      data.push({
        x: new Date(deltaX),
        y: parseFloat(deltaY)
      });
      if (data.length > 478) {
        data.shift();
      }

      valor = CanvasJS.formatDate(new Date(deltaX), "YYYY-MM-DD hh:mm:ss:fff") + " HR: "+ deltaY + " 25mm/s 10mm/mv";
      chart.options.data[0].legendText = valor;
      chart.render();
      count ++;
    } else {
      clearInterval(chartTimer);
    }});
}

//-- Chart variables
var updateInterval = 40;
var valor = "HR: 0";
var data = [];
var count = 0;

var chart = new CanvasJS.Chart("chart", {
  title: {
    text: "Updating Legend in Dynamic chart",
  },

  toolTip:{
    enabled: true,
    animationEnabled: false,
  },

  backgroundColor: "transparent",
  colorSet: "greenShades",
  animationEnabled: true,
  theme: "theme3",
  zoomEnabled: true,

  axisX: {
    lineThickness:0,
    tickThickness:0,
    valueFormatString:" "
  },

  axisY: {
    lineThickness:0,
    tickThickness: 0,
    gridThickness: 0
  },

  data: [{
    markerSize: 1,
    showInLegend: true,
    legendText: valor,
    legendMarkerType: "none",
    color:"black",
    type: "spline",
    dataPoints: data
  }]
});

var...