RadCartesianChart with ScatterPointSeries slow

[Alessandro]

I have a RadCartesianChart with one ScatterPointSeries when the number of points is 20000 the time to plot is 40 seconds.

The class where stored values:

public class ChartDataFlatness
{
    public double XValue { get; set; }
    public double YValue { get; set; }
    public Brush Brush { get; set; }
}

The class used to pass value to RadCartesianChart

class ViewModelFlatness : ViewModelBase
{
    private List<ChartDataFlatness> data;
    public ViewModelFlatness() { }
    public List<ChartDataFlatness> Data {
        get { return this.data; }
        set {
            if (this.data != value) {
                this.data = value;
                this.OnPropertyChanged("Data");
            }
        }
    }
}

The user control used for show the data:

<UserControl x:Class="TiQ.Qua.Tna.Quality.Station.UserControls.UserControlChartFlatnessQualityStation"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:classes="clr-namespace:TiQ.Qua.Tna.Quality.Station.Classes"
             mc:Ignorable="d" RenderTransformOrigin="0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Grid>
        <telerik:RadCartesianChart x:Name="RadChartFlatness" LayoutUpdated="RadChartFlatness_LayoutUpdated" >
            <telerik:ScatterPointSeries XValueBinding="XValue" YValueBinding="YValue"  >
                <telerik:ScatterPointSeries.PointTemplate>
                    <DataTemplate>
                        <Rectangle Width="10" Height="10" Fill="{Binding DataItem.Brush}"/>
                    </DataTemplate>
                </telerik:ScatterPointSeries.PointTemplate>
            </telerik:ScatterPointSeries>
            <telerik:RadCartesianChart.HorizontalAxis><telerik:LinearAxis VerticalLocation="Top" /></telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis><telerik:LinearAxis IsInverse="True" /></telerik:RadCartesianChart.VerticalAxis>
        </telerik:RadCartesianChart>
    </Grid>
</UserControl>

The code used to set data for RadGraph:

ViewModelFlatness _viewModel = new ViewModelFlatness { };
// Set Data of _viewModel
RadChartFlatness.Series[0].ItemsSource = _viewModel.Data;

It is possibile to reduce the time to plot data to 2/5 seconds.

Greetings,

Paolo​

[Petar Marchev]

Hello Paolo​,

Thank you for the attached code snippets. I was able to create a small project based on your code.

When I ran the project initially, it took about 5.6 seconds for the chart to display. There are several reasons why it took so much time.

The main reason is that when you have 20 thousand items in the source, the chart creates 20 thousand visuals to display these items. When you use a point template, the number is actually more - 40 thousand visuals, because there is a ContentPresenter for each point and in the template you have one more visual - the Rectangle. These 40 thousand visuals are pretty heavy for any wpf app, you can see this if you create a brand new project and put in 40 thousand Path elements.

The first step to making the chart faster is not to use a PointTemplate. The number of visuals is smaller now and on my machine it rendered for 4.3 seconds. Still not good.

By default the chart uses Path elements to plot its points in a point series, but you can switch to a lighter render mode, such as Bitmap or Direct2D. I did that and now the chart loads instantly. However, the points do not have the desired color and are not rects anymore, they are circles.

We can get the separate brushes of the items easily, by using a style selector - DefaultVisualStyleSelector property of the series.  I have demonstrated this in the project I am sending where you will see the CustomStyleSelector.

Unfortunately, presently there is no way to bring the rects back. The light rendering has some limitations, one of which is not being able to choose the shape, it is always the default round point.

I hope this was helpful.

Regards,
Petar Marchev
Telerik

[Alessandro]

Wow! Now take 40 milliseconds. Thank you for the solution.

Regards,

Paolo

[Sam]

Hey,

I apologise for resurrecting this thread, but i haven't be able to find the answer elsewhere.

After implementing the performance improvements suggested within this thread i'm now wondering how i'm able to individually style the shapes in the bitmap? I've tried using DefaultVisualStyle, but am unable to apply the current items color binding to the Fill Property.

 

<DataTemplate DataType="{x:Type models:ScatterSeriesModel}">
    <telerik:RadCartesianChart>
        <telerik:ScatterPointSeries ItemsSource="{Binding ChartData}"
                                    XValueBinding="XValue"
                                    YValueBinding="YValue">

            <telerik:ScatterPointSeries.DefaultVisualStyle>
                <Style>
                    <Setter Property="Stroke" Value="Black" />
                    <Setter Property="Fill" Value="{Binding DataItem.Color}" />
                    <Setter Property="StrokeThickness" Value="1" />
                </Style>
            </telerik:ScatterPointSeries.DefaultVisualStyle>

            <telerik:ScatterPointSeries.RenderOptions>
                <telerik:BitmapRenderOptions DefaultVisualsRenderMode="Separate" />
            </telerik:ScatterPointSeries.RenderOptions>

            <!--<telerik:ScatterPointSeries.PointTemplate>
                <DataTemplate>
                    <Ellipse Width="6"
                             Height="6"
                             Fill="{Binding DataItem.Color}" />
                </DataTemplate>
            </telerik:ScatterPointSeries.PointTemplate>-->

        </telerik:ScatterPointSeries>
    </telerik:RadCartesianChart>
</DataTemplate>

 

As you can see within a PointTemplate i was able to apply a specific color to each ellipse based on the current item. I seem to be unable to apply this with the default style, the styles DataContext i think being set to the ViewModel instead of the ItemsSource as far as i can tell.

[Sam]

[quote]Sam said:

<telerik:ScatterPointSeries.DefaultVisualStyle>
    <Style>
         <Setter Property="Stroke" Value="Black" />
         <Setter Property="Fill" Value="{Binding DataItem.Color}" />
         <Setter Property="StrokeThickness" Value="1" />
    </Style>
</telerik:ScatterPointSeries.DefaultVisualStyle>

[/quote]

An ammendment here - I do actually have TargetType="Path"

<Style TargetType="Path">

[Petar Marchev]

Hi Sam,

I the project that I attached in my previous response, it is demonstrated how to style the individual circles with colors from the data items. Please find the CustomStyleSelector class in the previously attached project.

Regards,
Petar Marchev
Telerik by Progress

[Sam]

Ah thanks Petar. For some reason i totally overlooked this when i first looked at that project. It's working though! Thanks