Home forums Using CanvasJS Live Data Adds Second Line

This topic contains 5 replies, has 2 voices, and was last updated by  James 5 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #15011

    James
    Member

    Hello all.

    I have added a live-data function using this tutorial: https://canvasjs.com/docs/charts/how-to/live-updating-javascript-charts-json-api-ajax/ however this produces an issue.

    When the page with our charts loads, we populate it with legacy data (x is a timestamp, y is a value) we get from a database. I have set the json-encoded array we generate from our PHP script which fetches this info as the default data source for our graph, and I have our update function push to this data variable. The chart IS updating, however, it creates a nasty new line under the rest of the data.

    http://prntscr.com/f42rsk

    What could be causing this? If needed I can provide some code, but not a live-view because our site is internal-only to the company.

    #15012

    Suyash Singh
    Moderator

    @jwuniseal,

    Seems like x-values are not be in order. Can you kindly make sure that dataPoints are in sequence before passing it to chart options.

    If this doesn’t solve your issue can you kindly create a jsfiddle reproducing the same, with sample JSON data so that we can look into it and help you better.

    ___
    Suyash Singh
    Team CanvasJS

    #15018

    James
    Member

    Here is a pastebin of my code and the initial data we see upon loading the page.

    https://pastebin.com/Mae0xraa

    It doesn’t look like there is anything inconsistent, what appears to be happening is that when I add a new data point it renders from the very first point in the data set to the new one I pushed, which seems very odd.

    • This reply was modified 5 months, 3 weeks ago by  James.
    #15034

    Suyash Singh
    Moderator

    @jwuniseal,

    Sorry, we are unable to reproduce the issue. Kindly check this jsfiddle.
    It seems like the issue happens when you try to update the chart and the dataPoints are not sorted. Can you kindly update the jsfiddle, reproducing the issue, so that we can look into it and help you better?
    ___
    Suyash Singh
    Team CanvasJS

    #15052

    James
    Member

    It will try, however the link I used to our JSON API is not public, it is only available internally, so I’ll basically have to create a fake one. Will update when I can, though I can assure you the data is sorting 100% correctly after triple checking it, and the data appears correctly after it begins to update, in the correct place, etc. The issue is that the first time we add a new data point, instead of adding to end of the current line, it seems to only recognize the first point of the initial data points and draws directly from that starting point to the new data point.

    #15053

    James
    Member

    Update: Switching from using .push to .unshift in my update code seems to have solved the problem. Even though in the source, both .push and .unshift were adding the items in the proper order, it seems the display wasn’t able to understand that. :)

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

You must be logged in to reply to this topic.