Last Updated: 13 Jul 2022 12:53 by ADMIN
Created on: 10 Aug 2021 18:05
Category: UI for .NET MAUI
Type: Feature Request
Chart: Improve performance when using thousands of data points

I just made a little test application using the .NET 6 Preview 6 and MAUI with chart control to see if we can use it for a future project. I was able to display just a basic chart with 1000 points in it, in ascending order on X axis. But the performance is really not there when running on my Android 10 device. I only made a Zoom at factor 2 and use panning right to left and it's not smooth at all. There is nothing in the chart (no grid, no annotations). Just a simple 2 axis chart. I can really not go with this because there will be many more data in our product at the chart need to be fast enough. Maybe it's a settings somewhere that need to be adjusted... Take a note that I was able to run the chart in WinUI project and the performance is correct, but I am on a very fast PC, it is just normal to be fast. Note: There is some kind of deceleration effect when panning, I want to disable it but not found how.

Anyway, it will be really cool if you can provide a very simple MAUI test application with the fastest full screen chart with Pan/Zoom with 1000 points (which for me is really not much data) and the corresponding code to me to validate if your library can do the job. I know that MAUI and .NET 6 is not released yet, but performance should be there now because it's really close to bug fixing only state now. Thanks.

1 comment
Posted on: 17 Aug 2021 10:57

Hi Nicolas,

Thank you for your interest in Telerik UI for Maui Chart control. 

I have reviewed the feedback and let me share more details on it:

When hundreds of data points are added and chart control has to generate runtime several elements for each one of those points, which amounts to thousands/millions of objects in the visual tree, then some delays are expected. Additionally, having so many items in an ObservableCollection at once on a mobile device is another problem.

Here are some approaches you can try to speed up the performance:

Approach 1) -> if you want to show thousands of points, I will suggest you implement sampling. This is when you aggregate lots of items (thousands) into less items (hundreds). I suggest this mainly because if you have more items horizontally than pixels, this means that a few items may be drawn in very close proximity (near the same pixel) which will lead to an unreadable visualization, and likely a slow initial load.

Sampling approach: 

private ObservableCollection<NumericalData> GetNumericData2()
            var originalData = this.Data;
            var chartData = new ObservableCollection<NumericalData>();

            for (int i = 0; i < originalData.Count; i++)
                if (i % 5 == 0)
            return chartData;

I have attached the xaml and code behind files of this approach.

You can tweak that number to suit your needs or you can research online if you want a more precise sampling formula if that one doesn't fit your needs.

Approach 2) -> Live update: You can add data points to the chart dynamically, so for example you can load the first 500 points then remove these points and add another 500 points. 

Of course, the Chart is still in a preview stage and we will have your feedback in mind. 

Let me know if I can assist with anything else.

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/.

Attached Files: