Dyanmic Chart: grid not shifting

[nidhipathak002]

Hi,
I am using canvasjs to plot ECG data. I have managed to get a dynamic chart with shift function to change data after the length of the data point is increased beyond 50. The data seems to be moving but the gridlines are becoming denser after some time. I want to have a fixed number of gridlines with fixed interval or at least maintain it and keep on shifting along with the data points. I have been working on this since last week and could not find any solution. Please help.

[Shashi Ranjan]

@nidhipathak002,

Can you please create a JSFiddle reproducing the issue you’re facing so that we can look into the code, understand it better and help you out?

____
Shashi Ranjan
Team CanvasJS

[nidhipathak002]

Hi,
I have recreated the problem here in jsfiddle.
https://jsfiddle.net/nidhipathak/40otzqxs/14/
The grids automatically get dense. Even when I have set the data length to 10 it still gets more than 10 data points at a time in the canvas.

[Shashi Ranjan]

@nidhipathak002,

Thanks for the JSFiddle. We are looking into your query and will get back to you at the earliest.

____
Shashi Ranjan
Team CanvasJS

[Shashi Ranjan]

@nidhipathak002,

In the above JSFiddle you were adding new dataPoints just after performing dps.shift() operation which was making the gridlines denser on each successive call. Hence just by removing the line dps.push({y: yVal, x : xVal}); from your code will work fine as shown in this updated JSFiddle.

____
Shashi Ranjan
Team CanvasJS

[nidhipathak002]

Hi Shashi,
I checked the code and ran it in our environment. The thing is that if we remove the push function as per your instruction, the data after the specified length gets updated at the same x value and the x-axis stops shifting.

Please check the screenshot attached.

• This reply was modified 5 years, 9 months ago by nidhipathak002. Reason: Not sure if the screenshot link was updated

[nidhipathak002]

https://ibb.co/D7g7jYz

[Shashi Ranjan]

@nidhipathak002,

The JSFiddle shared by us seems to be working fine. Can you please create a JSFiddle reproducing the issue you’re facing so that we can look into the code, understand the issue and help you out.

____
Shashi Ranjan
Team CanvasJS

[nidhipathak002]

https://jsfiddle.net/nidhipathak/db7vmh5t/2/
This is the updated fiddle link. I am not pushing any value to x in push() function.

[Shashi Ranjan]

@nidhipathak002,

In this case, updated x-values should be pushed along with y-values to display the dataPoints as shown in this updated JSFiddle.

____
Shashi Ranjan
Team CanvasJS

[nidhipathak002]

Then how is it automatically taking the value of x without pushing it for the first datalength values?

[Shashi Ranjan]

@nidhipathak002,

When x-values are not passed to dataPoints, it’ll assign the x-value based on the number of dataPoints. As you are performing shift operation every second, x-value doesn’t get incremented. Incrementing the x-value manually along with the y-value and passing it to dataPoint should work fine in your case.

____
Shashi Ranjan
Team CanvasJS