Ngx-charts: Line chart doesn't support real time data.

Created on 6 Dec 2016 · 15Comments · Source: swimlane/ngx-charts

I'm submitting a ... (check one with "x")

[ x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
The line chart doesn't support the real-time feature.

Expected behavior
The line chart supports the real-time feature.

Please tell us about your environment:
OS X 10.12.1

ng2d3 version:
1.7.3
Angular version:
2.1.0
Browser:
chrome
Language:
Typescript 2.0.3

Bug Moderate Med

Source

rockers7414

Most helpful comment

As stated above, the data must be immutable.

Try this:
data = [...data]

to generate a new data array from the existing one. This will make the component register the change and trigger update.

marjan-georgiev on 13 Dec 2016

👍11 🎉8 ❤2

All 15 comments

I thought the problem is the update function doesn't update the series data and didn't trigger the ngOnChange?

rockers7414 on 6 Dec 2016

The data you pass to the chart needs to be immutable. Have you tried that?

marjan-georgiev on 6 Dec 2016

No, I didn't try it. I'll try it tomorrow. Thanks. :)

rockers7414 on 9 Dec 2016

Did you ever solve that? Is there an example?

frosenberg on 13 Dec 2016

This is not a bug. All charts support real time data. t is just not shown on the demo page for the line and area charts.

marjan-georgiev on 13 Dec 2016

Well, I cannot get it to work. I keep updating the array with data from a websocket but the charts does not draw it.

frosenberg on 13 Dec 2016

As stated above, the data must be immutable.

Try this:
data = [...data]

to generate a new data array from the existing one. This will make the component register the change and trigger update.

marjan-georgiev on 13 Dec 2016

👍11 🎉8 ❤2

That works. Does this have any performance implications? I'm expecting lots of data points.

I'll report back if I find any but maybe you have done some experiments already.

frosenberg on 13 Dec 2016

This was done specifically for performance. If we wanted to get change detection to work with mutable objects, we would have to compare the data on every cycle, which is super expensive. With immutable data, we need to only compare the reference.

marjan-georgiev on 13 Dec 2016

👍1

Great. Thanks for the links. I'm pretty new to Ng2

frosenberg on 13 Dec 2016

@marjan-georgiev - we should add a post in docs about this...

amcdnl on 13 Dec 2016

👍8

Related to real time data, I have created a plunkr:
https://plnkr.co/edit/Nij7gO4jgqdN2mNPIFJp

My problem is that the memory consumption of the browser grows with time. Even though I slice the results array.

Any suggestions pls? :)

ptrblgh on 19 May 2017

👍5

I have same problem with memory consumption and stack exhausing in version 7.3.0, I found that one of the reason was number-card, but there is problem also with other chars.

aleho70 on 17 Jun 2018

This link will help you:
https://stackoverflow.com/questions/46033540/ngx-charts-render-dynamic-data

virtuotechnologies on 1 Aug 2018

This was done specifically for performance. If we wanted to get change detection to work with mutable objects, we would have to compare the data on every cycle, which is super expensive. With immutable data, we need to only compare the reference.

Read more:
http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
http://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

I have made it to work on single array data. But unable to implement the same for series data - [{ name: .... , series : [{ name: ....., value: ....}, { name: ....., value: .....}]. I have tried to implement arr = [...arr] over series array, but it doesn't seem to work. Can you please help me out on this? Thanks.