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
Thank you ! But I still got a problem…
<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 dataLength = 50; // number of dataPoints visible at any point
var time = (new Date()).getTime();
var updateChart = function (count) {
count = count || 1;
// count is number of times loop runs to generate random dataPoints.
for (var j = 0; j < yVal.length; j++) {
dps.push({
x: time,
y: yVal[j]
});
time++;
};
if (dps.length > dataLength)
{
dps.shift();
}
chart.render();
};
// generates first set of dataPoints
updateChart(dataLength);
// update chart after specified time.
seInterval(function(){updateChart()}, updateInterval);
}
I can’t shift the frame, looks like it’s getting tighter and I can’t see the signal after few interval. I know the problem comes from if() function but I don’t know how to fix it. Can you try to use my code, you’ll see what I mean, please help me, I’m so close to get the final result !