Reply To: How to draw an array value and repeat at the end, running real time chart

[dungeonlegend]

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 !

• This reply was modified 10 years, 8 months ago by dungeonlegend.