swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.3k stars 1.15k forks source link

display live data in a line chart #411

Open oliverguhr opened 7 years ago

oliverguhr commented 7 years ago

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 If I insert a new data point to a line chart, all data points will be animated. This will lead to a messy data visualization.

At first I tryed to simply push new data points, but it looks like change detection does not recognize this. this.multi[0].series.push(data); Rewriting the whole array works but leads to the described behavior. this.multi[0].series.push(data); this.multi = [...this.multi];

Expected behavior Only the the line for the new data point should be animated. Otherwise it would be good to have a option flag, to turn off animations.

Reproduction of the problem I created a plunkr to show the current behavior:

https://plnkr.co/edit/FXA7r6ISQguTrqAF5YS5?p=preview

What is the motivation / use case for changing the behavior? I would like to create a chart that shows realtime data. Like flot chart does in this example: http://www.flotcharts.org/flot/examples/realtime/index.html

Environment:

Thank you for your feedback.

codegastudio commented 7 years ago

Same problem since up from 5.1.2 to 5.3.1

marjan-georgiev commented 7 years ago

This post explains the current behavior, and why it doesn't work like what you describe as the expected behavior: https://bost.ocks.org/mike/path/

We will need to add a special animation when the line chart is used for live data, as it's a pretty common use case.

zerodrift commented 7 years ago

Any updates on this?

philjones88 commented 7 years ago

Any updates? Considering using this in a commercial project so project sponsorship/donations to get blockers fixed is possible :)

uberman4740 commented 6 years ago

^ Any updates?

cole21771 commented 6 years ago

An alternative to the fancy horizontal animation (which would be nice), would be to just turn off animations. It isn't nearly as nice as with horizontal interpolation, but it works.

It looks like this (using a fork of the plunker found above): https://plnkr.co/edit/6GHWvXPZvanbB1FR8dum?p=preview

v1shva commented 6 years ago

Any updates on this?

naitik0212 commented 6 years ago

Any Updates?

gilmarsquinelato commented 6 years ago

I achieved a possible solution! The solution found is to keep a "local results" in the chart component, and the template consumes it instead of the given by @Input(), and each update adds the newly received data to the local one.

line-chart.component.ts

Note the lines 75, 236 and 282.

cole21771 commented 5 years ago

Good news ^! I created a PR for an Realtime option for the line chart. Imgur link to what it looks like here.

darkguy2008 commented 5 years ago

So, still no way to have realtime data? The documentation really fails to have good examples...

cole21771 commented 5 years ago

Unfortunately @darkguy2008, the best way is to still turn off animations like I suggested here. It doesn't do anybody any favors that they haven't even looked at my PR for adding the animations.