This is a migrated thread and some comments may be shown as answers.

RadCartesianChart with ScatterPointSeries slow

6 Answers 294 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Alessandro
Top achievements
Rank 1
Alessandro asked on 19 Oct 2015, 11:35 AM

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:x="http://schemas.microsoft.com/winfx/2006/xaml"
             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​

6 Answers, 1 is accepted

Sort by
0
Accepted
Petar Marchev
Telerik team
answered on 19 Oct 2015, 01:04 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Alessandro
Top achievements
Rank 1
answered on 19 Oct 2015, 08:48 PM

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

Regards,

Paolo

0
Sam
Top achievements
Rank 1
answered on 02 Sep 2016, 09:53 AM

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.

0
Sam
Top achievements
Rank 1
answered on 02 Sep 2016, 10:44 AM

[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">
0
Petar Marchev
Telerik team
answered on 02 Sep 2016, 10:58 AM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Sam
Top achievements
Rank 1
answered on 02 Sep 2016, 11:27 AM
Ah thanks Petar. For some reason i totally overlooked this when i first looked at that project. It's working though! Thanks
Tags
Chart
Asked by
Alessandro
Top achievements
Rank 1
Answers by
Petar Marchev
Telerik team
Alessandro
Top achievements
Rank 1
Sam
Top achievements
Rank 1
Share this question
or