Home Forums Chart Support Data plotting like on an Oscilloscope.

Data plotting like on an Oscilloscope.

Viewing 9 posts - 1 through 9 (of 9 total)
  • #26938

    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>
    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
    var updateChart = function () {
    	y : yVal,
    	x : xVal--
    if (dataPoints.length >  500 )
    chart.options.title.text = "Update " + updateCount;
    webSocket1 = new WebSocket('ws://' + window.location.hostname + ':81/');
    	var t = a.data;
    		var l = t.substring(0,t.length-1);
        		yVal = parseInt(l,10);


    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


    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 4 years, 4 months ago by zekageri.
    • This reply was modified 4 years, 4 months ago by 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


    Thank you! I will research this tomorrow!


    Can i get fixed axis on this canvas somehow?



    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


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



    Glad that you were able to achieve your requirements.

    Indranil Deo
    Team CanvasJS

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.