Home forums Using CanvasJS Dyanmic Chart: grid not shifting

This topic contains 11 replies, has 2 voices, and was last updated by  Shashi Ranjan 6 days, 4 hours ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #24182

    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.

    #24186

    Shashi Ranjan
    Moderator

    @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

    #24239

    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.

    #24241

    Shashi Ranjan
    Moderator

    @nidhipathak002,

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

    ____
    Shashi Ranjan
    Team CanvasJS

    #24281

    Shashi Ranjan
    Moderator

    @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

    #24287

    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.

    Screenshot of the chart after crossing the specified data limit

    Please check the screenshot attached.

    • This reply was modified 1 week, 2 days ago by  nidhipathak002. Reason: Not sure if the screenshot link was updated
    #24288
    #24304

    Shashi Ranjan
    Moderator

    @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

    #24311

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

    #24346

    Shashi Ranjan
    Moderator

    @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

    #24350

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

    #24352

    Shashi Ranjan
    Moderator

    @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

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

You must be logged in to reply to this topic.