Data plotting like on an Oscilloscope.

[zekageri]

Hello guys!
I want to plot my dynamic data on the canvas like on oscilloscope.
The idea:
-The data comes and drawed from left to right, and when it hits for example 500 or 1000 datapoints, it draws from the beginning again but with the previous data on the canvas.

Can i do that somehow?

My code is looks like this now:

<div style = "height: 400px; width: 70%;"id="mydiv">
            <div id = "chartContainer" style = "height: 400px; width: 70%;"></div>
</div>

<script>

var yVal , xVal = 0;
var updateCount = 0;
var dataPoints = [];
var chart;
window.onload = function () {
chart = new CanvasJS.Chart("chartContainer", {
		title : {
			text : "Osc_Test"
		},
		data : [{
				type : "line",
				dataPoints : dataPoints
			}
		]
	});
chart.render();
}	

var updateChart = function () {
	updateCount++;
	dataPoints.push({
	y : yVal,
	x : xVal--
});
if (dataPoints.length >  500 )
	  {
		dataPoints.shift();
		//dataPoints.unshift();
	}    
chart.options.title.text = "Update " + updateCount;
chart.render();   
};

/** MY DATA COMES FROM A WEBSOCKET MESSAGE LIKE THIS **/
webSocket1 = new WebSocket('ws://' + window.location.hostname + ':81/');
webSocket1.onmessage=function(a){
	var t = a.data;
	if(t.indexOf('}')>-1){
		var l = t.substring(0,t.length-1);
    		yVal = parseInt(l,10);
    		updateChart();
}
};
</script>

[Indranil]

@zekageri,

Can you please provide a pictorial representation or a live example of your requirement so that we can understand your scenario better and help you out with an appropriate solution.

___________
Indranil Deo
Team CanvasJS

[zekageri]

Sorry. I can not do a live example if i dont know how to do it.
My question is based on the fact that i can’t do it.

A pictorial representation would be an actual oscilloscope.
An oscilloscope is not scrolling or shifting the data from the left to the right or vica-versa.
An oscilloscope just showing the data. When a data point comes, it draws on the y and x axises.
When the x axis is full, it is reseted and the data comes to the first point on the x axis again.
And the latest datapoint is deleted because the new data takes its place on the axis.
That is what i want.

Here is a drawing from it.
I hope its clear.

• This reply was modified 5 years, 1 month ago by zekageri.
• This reply was modified 5 years, 1 month ago by zekageri.

[Indranil]

@zekageri,

You can achieve the above requirement by replacing the existing dataPoints with a new set of dataPoints as shown in this JSFiddle.

___________
Indranil Deo
Team CanvasJS

[zekageri]

Thank you! I will research this tomorrow!

[zekageri]

Can i get fixed axis on this canvas somehow?

[Indranil]

@zekageri,

Can you kindly brief us more about your requirement – which axis are you trying to fix and also which elements of the axis(axis labels or axis range)?

___________
Indranil Deo
Team CanvasJS

[zekageri]

Thank you for your help! Your collegue helped me on the chat! I have made it.

[Indranil]

@zekageri,

Glad that you were able to achieve your requirements.

___________
Indranil Deo
Team CanvasJS