loading or plotting huge data from collection to ChartView will hang the UI

[deepak]

Hi 

I am plotting 10,000 data points on RadChartView. The UI gets freezed\hanged till all 10,000 data points are plotted on RadChartView. It took around 20 seconds to load all the data points 

Instead of plotting all the 10,000 data points in one shot, I tried plotting data points at the interval of 100
i,e add 100 data points to collection via thread and update UI via Dispatcher object, again add 100 data points to collection and update UI (even this will hang UI) and so on...

Can we show only few data points on Chartview which user can view or see and remaining points are shown only when user do zooming or scrolling ?
If so how can it be done ?

Thanks

Deepak Deshmukh

[deepak]

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
        xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:WpfApplication2"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="800">
    <Border BorderBrush="DarkGray" Background="#2C2C2C" BorderThickness="2">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <telerik:ChartDataSource x:Name="ChartDataSource1" ItemsSource="{Binding ChartDataCollection}" SamplingUnitInterval="100">
            </telerik:ChartDataSource>
            <telerik:RadCartesianChart Grid.Row="0" x:Name="chart" Width="800" Height="300" >
                <chart:RadCartesianChart.Behaviors>
                    <chartView:ChartTrackBallBehavior SnapMode="ClosestPoint" />
                    <chartView:ChartPanAndZoomBehavior/>
                </chart:RadCartesianChart.Behaviors>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis/>
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:CategoricalAxis />
                </telerik:RadCartesianChart.HorizontalAxis>
                <chart:RadCartesianChart.Grid>
                    <chartView:CartesianChartGrid MajorLinesVisibility="Y" MajorXLineDashArray="5,5" MajorYLineDashArray="5,5" />
                </chart:RadCartesianChart.Grid>
                <telerik:RadCartesianChart.Series>
                    <telerik:BarSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding ElementName=ChartDataSource1}" >
                    </telerik:BarSeries>
                </telerik:RadCartesianChart.Series>
            </telerik:RadCartesianChart>
            <StackPanel Grid.Row="1" Orientation="Horizontal">
                <telerik:RadButton Margin="10" Width="100" Height="22" x:Name="btnFilter" Content="GetQuery" Click="btnFilter_Click"/>
                <TextBlock x:Name="txtDatetime" VerticalAlignment="Center" Margin="2.5,13,2.5,10" Foreground="Red" Width="146" Height="19"  />
                <TextBlock x:Name="txtElapsedTime" VerticalAlignment="Center" Margin="2.5,13,2.5,10" Foreground="Red" Width="146" Height="19"  />
            </StackPanel>
        </Grid>
    </Border>
</Window>

[deepak]

using System;
using System.Diagnostics;
using System.Threading;
using System.Windows;
using System.Windows.Media;
using System.Windows.Threading;

namespace WpfApplication2
{   
    public partial class MainWindow : Window
    {
        private DispatcherTimer _timer;
        ViewModel ds = new ViewModel();
        Stopwatch stopwatch = new Stopwatch();
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = ds;
            UpdateTimer(1000);
        }
       
        private void btnFilter_Click(object sender, RoutedEventArgs e)
        {
            Thread ts = new Thread(() => { GetData(10000); }); //Ten Thousand Data Points are added to ChartDataCollection(RadObservableCollection) via Thread and Updated to UI via Dispatcher object 
            ts.Start();
        }

        public void GetData(int dataSize)
        {
            Random rnd = new Random();
            stopwatch.Start();
            // ds.ChartDataCollection.SuspendNotifications();
            for (int i = 1; i <= dataSize; i++)
            {
                Application.Current.Dispatcher.Invoke(() =>
                {
                    ds.ChartDataCollection.Add(new ChartData()
                    {
                        Category = i,
                        Value = rnd.Next(1, 100),
                        Color = new SolidColorBrush(
                        Color.FromArgb(255, (byte)rnd.Next(0, 256), (byte)rnd.Next(0, 256), (byte)rnd.Next(0, 256)))
                    });
                });
                //Thread.Sleep(500);
            }
            stopwatch.Stop();

            this.Dispatcher.Invoke(() =>
            {
                double dseconds = stopwatch.Elapsed.Seconds;
                txtElapsedTime.Text = dseconds.ToString();
            });
            //  ds.ChartDataCollection.ResumeNotifications();
        }

        private void UpdateTimer(int milliseconds)
        {
            this._timer = null;
            this._timer = new DispatcherTimer();
            this._timer.Interval = TimeSpan.FromMilliseconds(milliseconds);
            this._timer.Tick -= this.OnTimer;
            this._timer.Tick += this.OnTimer;
            this._timer.Start();
        }

        private void OnTimer(object sender, EventArgs e)
        {
            txtDatetime.Text = DateTime.Now.ToString();
        }

    }

    public class ChartData
    {
        private int _category;
        public int Category
        {
            get { return this._category; }
            set { this._category = value; }
        }

        private double _value;
        public double Value
        {
            get { return this._value; }
            set { this._value = value; }
        }

        private Brush _color;
        public Brush Color
        {
            get { return this._color; }
            set { this._color = value; }
        }
    }
}

[Martin Ivanov]

Hello Deepak,

I would recommend you to check the 5 Easy Steps Towards a Fast Chart blog post which shows how to improve the chart's performance with big amount of data points. I hope this helps.

Regards,
Martin Ivanov
Progress Telerik

[deepak]

Hi Martin

Thanks for your performance 

I tried above steps mentioned by you , but still UI gets hanged 

Basically i have 8,00,000 lakhs data points in XML,

I have WCF Service which loads each 1000 data points from XML to array of object via thread.

Then finally i am adding to Observable collection(binded to chartdatasource of RadCartesianchart) using addrange method via Dispacther object(Bring back to UI thread and update UI to avoid Invalid operation exception)

It takes almost 10 minutes to load all 8 lakhs data points.

Thanks

Deepak Deshmukh

[deepak]

Sorry thanks for your Response

[Dinko | Tech Support Engineer]

Hello ,

We understand that you need to implement specific requirements. However, keep in mind that the chart control and the WPF framework have their limitations. The chart will make its calculations for the thousands of data point models even if they are not displayed in the viewport. And this operation takes some time. Even that this time is very small the constant updates make the application hangs. You can take a look at the AsyncData SDK example in our GitHub repository which demonstrates one approach  handling async data. 

Regards,
Dinko
Progress Telerik