Home forums Using CanvasJS How to draw an array value and repeat at the end, running real time chart

This topic contains 9 replies, has 2 voices, and was last updated by  dungeonlegend 3 years, 3 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #4878

    dungeonlegend
    Participant

    Hi again !

    Next mini step in my project is draw a dynamic chart using a series of value running with step time. I’ve got an array[] value, example [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]. The target is, after 1 second count, one value will be added, and when the final value is count, take back from the beginning and countinue adding.

    How to push this data on Y axis, and repeat the progress ? Thank you so much.

    • This topic was modified 3 years, 3 months ago by  dungeonlegend.
    #4880

    Sunil Urs
    Keymaster

    here is an example of dynamic chart with explanation.

    #4884

    dungeonlegend
    Participant

    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 3 years, 3 months ago by  dungeonlegend.
    #4886

    Sunil Urs
    Keymaster

    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>
    #4887

    Sunil Urs
    Keymaster

    Here is a jsfiddle that I created.

    #4889

    dungeonlegend
    Participant

    I have checked back my code and it still running as well :|, but as I can say, what you just did above exactly the same idea I ever want, even better than I could do, you plot every each items in array while I just could plot the whole series points. Although It still have a few difference things, but is it ok if I’ll turn back and get to ask you later ? Million thanks and I really appreciate what you’ve done for me. Thank you again, wish you all the best wishes 🙂

    • This reply was modified 3 years, 3 months ago by  dungeonlegend.
    #4891

    Sunil Urs
    Keymaster

    You are welcome… 🙂

    #4892

    dungeonlegend
    Participant

    Cause I’ve been WOW for a little while, and after getting back to work, sorry but I have to ask you more & more…

    1. what different in for() function between j < count and j < yVal.length, changing two type this condition get two different results

    2. if I set time = (new Date()).getTime(); and than take time++ for seeking x Axis by time, is it the same as time.setSeconds(time.getSeconds() + 1); in your code ?

    3. whats yVal[updateCount % yVal.length] mean ? Sorry I can’t get it 🙂

    • This reply was modified 3 years, 3 months ago by  dungeonlegend.
    #4895

    Sunil Urs
    Keymaster

    >> what different in for() function between j < count and j < yVal.length, changing two type this condition get two different results count determines the number of data points to be updated in one go. Because we want to render the entire array in the beginning, we use yVal.length. But after the first render we don't pass it any parameter inside setInterval because of which it defaults to 1 update every second. >> if I set time = (new Date()).getTime(); and than take time++ for seeking x Axis by time, is it the same as time.setSeconds(time.getSeconds() + 1); in your code ?
    time is actually in milliseconds and doing ++ will just increment it by a millisecond and not by one second. Here you have more details.

    >> whats yVal[updateCount % yVal.length] mean ? Sorry I can’t get it
    Modulo operator (%) is used to wrap around the yVal array once the end is reached. So once the end of array is reached, it gets you back to the first position of the array. Here it is explained with examples.

    #4896

    dungeonlegend
    Participant

    Getting new knowledge everyday ! Thank you so much 🙂

    • This reply was modified 3 years, 3 months ago by  dungeonlegend.
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.