Live Data Adds Second Line

[Uniseal]

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.

[Suyash Singh]

@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

[Uniseal]

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 7 years, 7 months ago by Uniseal.

[Suyash Singh]

@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

[Uniseal]

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.

[Uniseal]

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. :)