I have an observable collection that I am binding to a LineSeries. This collection contains a large amount of data 5000+ points.
When the graph loads the collection it freezes the UI, for a considerable amount of time, while it plots the points.
I am using the scroll view, so only 200 points are shown and you can scroll backwards to see the others. I would expect this to minimize the plotting time?
Is there some performance stuff I am missing or not doing properly?
Is there a better way I can load a large amount of data into the graph without blocking the UI completely for a long period of time?
Another issue, although I think related to the amount of data, is that the scroll view is very laggy and also the x axis legend labels disappear when scrolling backwards.
Below I have included some code snippets to help explain my problem.
Many thanks for your help.
CODE
this.InitializeComponent();
this.Points = new ObservableCollection<ChartPoint>();
XAxis.ActualRangeChanged += XAxis_ActualRangeChanged;
...
series1 = new LineSeries();
series1.XBindingPath = "Date";
series1.YBindingPath = "X";
series1.ItemsSource = this.Points;
series1.ShowTooltip = true;
series1.EnableAnimation = false;
series1.Label = "X Data";
chart.Series.Add(series1);
...
}
private void XAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e)
{
if (!e.IsScrolling && e.ActualMaximum != null)
{
e.VisibleMinimum = (double)e.ActualMaximum - 200d;
}
XAML
<chart:SfChart x:Name="chart" Grid.Row="1" Grid.ColumnSpan="3" Margin="0,0,15,0">
<chart:SfChart.Header>
<TextBlock x:Name="header" FontSize="20" FontFamily="Segoe UI" Margin="0,0,0,20">
Chart Header
</TextBlock>
</chart:SfChart.Header>
<chart:SfChart.Legend>
<chart:ChartLegend x:Name="legend"></chart:ChartLegend>
</chart:SfChart.Legend>
<chart:SfChart.PrimaryAxis>
<chart:CategoryAxis x:Name="XAxis"
EnableScrollBarResizing="False"
EnableTouchMode="True"
EnableScrollBar="True"
Header="Time"
LabelFormat="HH:mm:ss"
EdgeLabelsDrawingMode="Fit">
</chart:CategoryAxis>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis></chart:NumericalAxis>
</chart:SfChart.SecondaryAxis>
</chart:SfChart>