Dynamic Chart from External JSON - CanvasJS JavaScript Charts

Dynamic Chart from External JSON - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://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 = 40;
function updateEcg() {
  $.getJSON("https://api.npoint.io/9a8aa58385bcf255d0f5", function (result) {
    if (dataLength !== result.length) {
      for (var i = dataLength; i < result.length; i++) {
        data.push({
          x: parseInt(result[i].valuex),
          y: parseFloat(result[i].valuey),
        });

        if (data.length > 478) {
          data.shift(); }
      }
      dataLength = result.length;
      sortDataPoints(data, 'x'); // sort dataPoints based on x
      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,	
    color:"black",
    type: "line", dataPoints: data}],
});       
setInterval(updateEcg,updateInterval);