Line chart optimizations

Do you have any plans to optimize the Radzen line chart component in order to better support real-time streaming of data in the time domain? Currently the component and related functions hog resources quite a lot. With three charts, two lines each, five minutes of data with 100ms accuracy, Chrome CPU usage is around 25% on my quite powerful mobile workstation and the memory usage is at 4GB (although I'm only refreshing the data once per second, for 10 new values each).

I would especially like a method (function) to force refresh the chart data so that the current auto-trigger of changing the reference of the data buffer would not be necessary, which requires re-initing the 3000 values in the buffer.

Also better supporting of data containers of type Queue or LinkedList might be useful since this is in practice about FIFO streaming; currently there's a runtime crash very soon after opening a page where the data container is of either type.

I was using ChartJs.Blazor streaming extension for this purpose earlier but the Radzen component allows for more customization and several graphs per chart which is useful for some situations. (Speaking of customization, would it also be possible to have the grid lines and axis texts in the same color as the axis tick marks and/or the axes themselves? I'd like to have a darker background for the charts but that currently renders the axis texts practically invisible.)

Hi @ipe,

We don't plan any streaming or real-time optimization features in the short time.

Hi @korchev,
Could you still consider adding a RefreshData() function to the chart component? That might not take much effort.

Also enabling having the grid lines and axis texts in the axis/tick mark color could be quite easy to implement.

Yes, we can make the Refresh internal method public.

This can be implemented today with CSS. Use your browser's developer tools to inspect the classes applied so you can override them in your application.

Great, thanks!

I must say the line chart component is very flexible already, I made a quite nice trend analyzing page with it last week, with SQL and local storage in the background. It's only that currently the real-time properties are limited, I hope that the refresh method will help. Thanks for the great work again!

Was this done yet? I see a method RadzenChart.Reload() but it doesn't appear to do anything. What is it supposed to do?

Yes, this has been done - the Reload method redraws the chart. Make sure you have updated the series configuration so it actually does anything.

Well I'm not sure what you mean but I uninstalled and reinstalled the Radzen.Blazor nuget package. Although we're in the Radzen IDE board, I'm using just the components library. I misplaced the original thread to this board.

Does the Reload() method refresh the data bindings (min time, max time, step time) or is it using cached values? The issue I'm currently facing is that when I change the trend group shown on the page, the begin and end time are often not refreshed correctly. I'm using the data bindings to tie a DateTime value to both begin and end time shown on the graph. The time step is updated like it should but the begin and end time are often incorrect. Chart.Reload() doesn't help with this issue.

Please see below for an example. Here, the actual begin time used by the graph is way off the value it should be. Due to the very long time span shown compared to what it should be, the actual graph values are located on a single vertical line to the right of the screen. The step is so small compared to the actual shown data that the whole screen appears white (alpha 80).

Clicking practically any button refreshes the chart to what it should be.

The Reload method renders the chart again.

I can't tell why this happens without some sort of a reproduction.

I spent a day trying to reproduce the issue with a lighter project but with no success. I also found out that calling the Reload() function early, after updating the begin and end time, but before updating the graphs, resolves the issue, as long as StateHasChanged() is also called after everything is done. This results in the graph being redrawn twice, but it's not a big issue since this only needs to be done each time after changing the group of graphs shown on the screen.

Should you wish to investigate this further, it appears that the issue is related to refreshing the shown time span: either Min or Max time is not refreshed properly from the bound variable in all circumstances. Specifically, it remains in the previous value during the first refresh of the chart. A code inspection might reveal something useful.