You must be logged in to post your query.
Home › Forums › Chart Support › Dyanmic Chart: grid not shifting
Tagged: autoadjust, dynamic chart, fixed gridlines, gridlines
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.
@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
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.
Thanks for the JSFiddle. We are looking into your query and will get back to you at the earliest.
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.
dps.shift()
dps.push({y: yVal, x : xVal});
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.
https://ibb.co/D7g7jYz
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.
https://jsfiddle.net/nidhipathak/db7vmh5t/2/ This is the updated fiddle link. I am not pushing any value to x in push() function.
In this case, updated x-values should be pushed along with y-values to display the dataPoints as shown in this updated JSFiddle.
Then how is it automatically taking the value of x without pushing it for the first datalength values?
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.
You must be logged in to reply to this topic. Login/Register