1. Home
  2. Forum
  3. WPF
  4. Bad performance of sfchart When I use a lot of Annotation.

Bad performance of sfchart When I use a lot of Annotation.

I am using the SfChart to display bottles by1200RectangleAnnotations. But the SfChartaccounts for 20% of the CPU andScaling is slow.

5 Replies
MK Muneesh Kumar G Syncfusion Team October 16, 2018 06:39 AM UTC

Hi Guize, 
 
Greetings from Syncfusion, we have analyzed your requirement. Since each rectangle annotation renders by using Rectangle and TextBlock, it takes time based on count. However, you can achieve the performance improvement by using FastColumnBitmapSeries as per the below code snippet.  
 
Code snippet [XAML]: 
           <chart:FastLineBitmapSeries XBindingPath="XValue" YBindingPath="YValue" 
                                        ItemsSource="{Binding Data1}"/> 
             
            <chart:FastColumnBitmapSeries XBindingPath="XValue" YBindingPath="YValue" x:Name="columnSeries" 
                                          ItemsSource="{Binding Data2}" Palette="Custom" Stroke="Black" 
                                          chart:ChartSeriesBase.Spacing="0"  /> 
 
Code snippet [C#]: 
public MainWindow() 
        { 
            InitializeComponent(); 
 
            columnSeries.ColorModel = new ChartColorModel() 
            { 
                CustomBrushes = viewModel.Brushes 
            }; 
        } 
 
 
We have used TextAnnotation for showing text in rectangles as per the below code snippet.  
 
Code snippet [XAML]: 
   <chart:SfChart  x:Name="chart" IsManipulationEnabled="True"  
                   Annotations="{Binding TextAnnotations}"> 
            
            <chart:SfChart.PrimaryAxis> 
                
 
 Code snippet [C#]: 
    public void GenerateData() 
        { 
            Random rd = new Random(); 
 
            Data1 = new ObservableCollection<Model>(); 
            for (int i = 0; i < 120; i++) 
            { 
                Data1.Add(new Model() 
                { 
                    XValue = i, 
                    YValue = rd.Next(0, 50) 
                }); 
            } 
 
            double j = 0; 
            Data2 = new ObservableCollection<Model>(); 
 
            TextAnnotations = new AnnotationCollection(); 
 
            for (int i = 0; i < 1200; i++) 
            { 
                Data2.Add(new Model() 
                { 
                    XValue = j, 
                    YValue = 5 
                }); 
 
                TextAnnotation textAnnotation = new TextAnnotation(); 
                textAnnotation.X1 = j; 
                textAnnotation.Text = i.ToString(); 
                textAnnotation.Y1 = 2.5; 
 
                TextAnnotations.Add(textAnnotation); 
 
                j = j + 0.1; 
            } 
 
            Brushes = new List<Brush>() 
            { 
                new SolidColorBrush(Colors.Red), 
                new SolidColorBrush(Colors.Green), 
                new SolidColorBrush(Colors.Blue), 
                new SolidColorBrush(Colors.Yellow), 
                new SolidColorBrush(Colors.Violet), 
                new SolidColorBrush(Colors.Orange), 
                new SolidColorBrush(Colors.Brown), 
                new SolidColorBrush(Colors.Gray), 
            }; 
 
        } 
 
We have prepared a sample based on this, please find the sample from the following location,  
 
 
Output: 
 
 
 
 
 
Hope it helps.  
 
Regards,  
Muneesh Kumar G.  
 


GU guize October 18, 2018 06:40 AM UTC

Thanks, it's very useful!

MK Muneesh Kumar G Syncfusion Team October 18, 2018 06:57 AM UTC

Hi Guize, 
 
Thanks for the update. Please let us know if you need any further assistance. 
 
Regards,   
Muneesh Kumar G.  
 


GU guize October 19, 2018 10:44 AM UTC

In my feature, the start and end of one rectangle area maybe diffrent.So how can i change the With of ColumnSegments?


MK Muneesh Kumar G Syncfusion Team October 19, 2018 11:30 AM UTC

Hi Guize,  
  
You can change the width of the segment by increasing spacing value in series as per the below code snippet. Spacing range is 0 to 1, so please set the value between this range.  
 
Code snippet [XAML]: 
   <chart:FastColumnBitmapSeries XBindingPath="XValue" YBindingPath="YValue" x:Name="columnSeries" 
                                          ItemsSource="{Binding Data2}" Palette="Custom" Stroke="Black" 
                                          chart:ChartSeriesBase.Spacing="0.5"  /> 
 
Please find the 0.5 spacing rectangles output below.  
 
 
 
 
Regards,    
Muneesh Kumar G.   
 


Loader.
Up arrow icon