Home › Forums › Chart Support › How to draw an array value and repeat at the end, running real time chart › Reply To: How to draw an array value and repeat at the end, running real time chart
I just tried your code and it is not updating at all. So I had to make several changes to make it update the data. Hence am not sure if this is what you expected. Below is a working code.
<script type="text/javascript"> window.onload = function () { var dps = []; // dataPoints var instance = (new Date()).getTime(); var chart = new CanvasJS.Chart("chartContainer", { title: { text: "Live SpO2 Data" }, axisX: { title: "Time", valueFormatString: "hh:mm:ss" }, axisY: { title: "%SpO2", }, data: [{ type: "spline", xValueType: "dateTime", dataPoints: dps }] }); var yVal = [0.02, 0.02, 0.02, 0.02, 0.05, 0.07, 0.06, 0.09, 0.06, -0.2, 0.9, 0.5, -0.1, 0.02, 0.02, 0.04, 0.1, 0.08, 0.03, 0.02, 0.02, 0.02, 0.02, 0.02]; var updateInterval = 1000; var maxDataLength = yVal.length; // number of dataPoints after which the series shifts var time = new Date(); var updateCount = 0; var updateChart = function (count) { count = count || 1; for (var j = 0; j < count; j++) { time.setSeconds(time.getSeconds() + 1); dps.push({ x: time.getTime(), y: yVal[updateCount % yVal.length] }); updateCount++; if (dps.length > maxDataLength) { dps.shift(); } } chart.render(); }; // generates first set of dataPoints updateChart(maxDataLength); // update chart after specified time. setInterval(function () { updateChart();}, updateInterval); } </script>