This is a migrated thread and some comments may be shown as answers.

Real-time charts

5 Answers 873 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Blazorist
Top achievements
Rank 2
Bronze
Iron
Iron
Blazorist asked on 30 Mar 2021, 06:50 PM

Hi. 

I'm just wondering if there is a way to get a real-time chart like this. (or any other of the style)

I'm already made something "similar" with Telerik's charts. It is working but the component refresh does not look good. It redraws the series every time I add a new value. In my approach I tried using StateHasChanged () and Chart.Refresh () getting the same results.

Can you give me an idea of how to achieve that the series are not redrawn completely and only the last value is added in such a way we would obtain a smoother behavior?

Regards.
Ludwig.

5 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 30 Mar 2021, 06:51 PM

Hi Ludwig,

The link seems to be missing, yet I doubt there is a charting engine that does not need to redraw the entire chart, at least at one point.

What I can suggest is disabling the animations for the chart by setting its Transitions parameter to false, so that there is less visible change for the user.

 

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Blazorist
Top achievements
Rank 2
Bronze
Iron
Iron
answered on 30 Mar 2021, 08:09 PM
Hi Marin. Yes, you are right.

I had not seen your answer and coincidentally doing tests I found the property Transitions. All I need to do is set it to false and I get the behaviour that I need. Also change the rendering mode to canvas in order to consume less resources.  

<TelerikChart Height="100%" Width="100%" @ref="@CPUChart" RenderAs="RenderingMode.Canvas" Transitions="false">

By the way, I have a window of about 30 items that are the ones I show in the graph. I handle the list binded with the series as a FIFO queue. Adding and removing a value every x seconds. In your experience, do you think it is the correct way to operate on the list associated to the chart?

Thank you very much!
Ludwig.
0
Marin Bratanov
Telerik team
answered on 31 Mar 2021, 06:47 AM

Hi Ludwig,

What you are doing is the typical approach people take.

What I'd keep an eye out for is a couple things:

  • how often you do data updates - especially in a WASM scenario - re-rendering the chart far too often can consume resources and the app can become a little unresponsive for the user (say, if they want to do something else besides look at graphs that update all the time)
  • how much data you pass - especially in a WASM scenario - every new piece of data usually goes over the wire, so you should consider sending only what you need, as that is a relatively slow process
  • how much the chart re-renders - I would suggest building a new collection with the new data (e.g., remove one or more items if needed, add the new item or items coming from the server) and pass that to the chart once, so it re-renders only one
  • how many elements the chart renders- reducing them will improve its performance, you can read more here, here and here.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Blazorist
Top achievements
Rank 2
Bronze
Iron
Iron
answered on 31 Mar 2021, 04:59 PM
Thank you very much Marin. Very kind for the detailed answer you have given me.
Regards.

Ludwig.
0
Marin Bratanov
Telerik team
answered on 31 Mar 2021, 05:15 PM

Glad to help :)

--Marin

Tags
Charts
Asked by
Blazorist
Top achievements
Rank 2
Bronze
Iron
Iron
Answers by
Marin Bratanov
Telerik team
Blazorist
Top achievements
Rank 2
Bronze
Iron
Iron
Share this question
or