RadCartesianChart with ScatterPointSeries slow

7 posts, 1 answers
  1. Alessandro
    Alessandro avatar
    4 posts
    Member since:
    Oct 2011

    Posted 19 Oct 2015 Link to this post

    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​

  2. Answer
    Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 19 Oct 2015 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Alessandro
    Alessandro avatar
    4 posts
    Member since:
    Oct 2011

    Posted 19 Oct 2015 in reply to Petar Marchev Link to this post

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

    Regards,

    Paolo

  5. Sam
    Sam avatar
    3 posts
    Member since:
    Sep 2016

    Posted 02 Sep Link to this post

    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.

  6. Sam
    Sam avatar
    3 posts
    Member since:
    Sep 2016

    Posted 02 Sep in reply to Sam Link to this post

    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>


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

    <Style TargetType="Path">
  7. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 02 Sep Link to this post

    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.
  8. Sam
    Sam avatar
    3 posts
    Member since:
    Sep 2016

    Posted 02 Sep in reply to Petar Marchev Link to this post

    Ah thanks Petar. For some reason i totally overlooked this when i first looked at that project. It's working though! Thanks
Back to Top
UI for WPF is Visual Studio 2017 Ready