JSFiddle - React, Tailwind, and code Playground

by Jaime Romero

HTML

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

JavaScript

var dataLength = 0;
var data = [];
var updateInterval = 40;

var chart = new CanvasJS.Chart("chart", {
        title: {
          text: "Dynamic chart JSON",
             },
        data: [{	
				type: "line", dataPoints: data}] });
        
        chart.render();
				updateEcg();

 function updateEcg() {
     $.getJSON("http://api.myjson.com/bins/uoxbx", function (result)         {
        if (dataLength !== result.length) {
          for (var i = dataLength; i <result.length; i++) {
                   data.push({
								   x: parseInt(result[i].x),
								   y: parseFloat(result[i].y),});
				        if (data.length > 478) {
                       data.shift(); }
                 }
          dataLength = result.length;
          data = sort(data);
          chart.render();
          setTimeout(updateEcg,updateInterval);
              }
           });
      }		   

function sort(dataPoints) {
			  for (var i = 0; i < dataPoints.length - 1; i++) {
                if (dataPoints[i].x > dataPoints[i + 1].x) {
                  var temp = dataPoints[i];
                  dataPoints[i] = dataPoints[i + 1];
                  dataPoints[i + 1] = temp;
                   i = 0;
                }
              }
         return dataPoints;}