JSFiddle - React, Tailwind, and code Playground

by Jaime Romero

HTML

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

JavaScript

var dataLength = 0;
var data = [];
var updateInterval = 40;
function updateEcg() {
$.getJSON("/data_ecg4.php", 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++) {
                   data.push({
								   x: parseInt(result[i].valuex),
								   y: parseFloat(result[i].valuey),
								   });
							  
								if (data.length > 478) {
                                data.shift(); }
                            }
                            dataLength = result.length;
                            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);