1. Home
  2. Forum
  3. Xamarin.iOS
  4. Optimisations for RangeColumnSeries charts

Optimisations for RangeColumnSeries charts

Hi there,

I've a chart that uses a RangeColumnSeries. In fact, you can see a screenshot of it in action here:



Its for my app Appy Weather, that you may want to download to experience the issue being discussed: https://play.google.com/store/apps/details?id=appyweather.appyweather.

Basically, performance is severely impacted when on the above screen and is noticeable when scrolling up/down where it stutters.

I don't do anything unusual with it: each bar has 3 annotations applied, top, middle, bottom. A few things I've done to potentially help are:

1) series.DataPointSelectionEnabled = false;
2) series.SuspendNotification();
3) chart.SuspendSeriesNotification();

None of these however seem to make a difference. When I have the HWUI profiler on-screen, this is constantly the case:



Do you have any tips to help with optimisation? I've tried to apply what's recommended on the Performance page for SfChart (most of it seemed to apply specifically with line charts).

Any help or guidance will be greatly appreciated.

Thanks!

Bardi




29 Replies
SJ Suyamburaja Jayakumar Syncfusion Team May 28, 2020 10:02 AM UTC

Hi Bardi Golriz, 
 
Greetings from Syncfusion. 
 
We have checked your update information and we would like to let you know that performance will be improved while following the mentioned tips in below link  
 
  
We were unaware of exact use cases and used functionality of chart control. So, if you faced the same performance again even tried with the above tips, please share the mentioned information that will be more helpful to check the issue at our end and provide a possible solution at earlier  
·       Please provide the list of annotation is being used in your application.   
·       Provided image related on HWUI profiler on-screen is not viewable so please provided corresponding image through zip format 
 
Regards,  
Suyamburaja J. 
 


BG Bardi Golriz May 29, 2020 05:55 PM UTC

Sorry I don't know why the screenshot didn't embed last time. Here you go:



As for the article with tips you linked to, isn't that mostly specific, if not completely, to a LineSeries chart?

So #1, 3, 5 and 7 doesn't apply because of above. Neither does # 2 because I don't use any DataMarkers. #4 doesn't seem to make a difference. And I can't use #6 because I need a CategoryAxis.

Please see below for the annotations added per day:

                    // 1. temp high

                    ViewAnnotation annotation_top = new ViewAnnotation()

                    {

                        X1 = x,

                        Y1 = c.FValue_High + 0.25,

                        VerticalAlignment = ChartAnnotationAlignment.Start,

                    };


                    TextView textView_high = new TextView(_context);

                    textView_high.Text = c.Value + "°";

                    textView_high.SetTypeface(Helper_Text.GetFont_ChartMarker(), TypefaceStyle.Normal);

                    textView_high.TextSize = 12;

                    textView_high.SetTextColor(Convertor_Colour_Droid.convert(Helper_Colour_Droid.GetText()));


                    LinearLayout linearLayout = new LinearLayout(_context);

                    linearLayout.Orientation = Orientation.Vertical;

                    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent, LinearLayout.LayoutParams.MatchParent);

                    layoutParams.SetMargins(0, 0, 0, 0);

                    linearLayout.LayoutParameters = layoutParams;

                    linearLayout.AddView(textView_high);


                    annotation_top.View = linearLayout;

                    _chart.Annotations.Add(annotation_top);



                    // 2. icon

                    double y_pt = y_pt = c.Value + c.Value_Low;

                    double x_pt = x;

                    y_pt = (y_pt / 2);

                    x_pt = x;


                    ViewAnnotation annotation_ctr = new ViewAnnotation()

                    {

                        X1 = x_pt,

                        Y1 = y_pt,

                        VerticalAlignment = ChartAnnotationAlignment.Center,

                    };



                    LinearLayout linearLayout2 = new LinearLayout(_context);

                    linearLayout2.Id = x;


                    AppCompatImageView icon = new AppCompatImageView(_context);

                    icon.SetImageResource(Convertor_Icon_Droid.parseXS(c._data.IconDuo));


                    linearLayout2.Orientation = Orientation.Vertical;

                    linearLayout2.SetPadding(5, 5, 5, 5);

                    layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent, LinearLayout.LayoutParams.MatchParent);

                    layoutParams.SetMargins(0, 0, 0, 0);

                        

                    linearLayout2.LayoutParameters = layoutParams;

                    linearLayout2.AddView(icon);


                    linearLayout2.Click += CardView_Click;

                    //linearLayout2.LongClick += CardView_Hold;

                    annotation_ctr.View = linearLayout2;

                    _chart.Annotations.Add(annotation_ctr);



                    // 3. temp low

                    ViewAnnotation annotation_btm = new ViewAnnotation()

                    {

                        X1 = x,

                        Y1 = c.FValue_Low - 0.45,

                        VerticalAlignment = ChartAnnotationAlignment.End,

                    };


                    TextView textView_low = new TextView(_context);

                    textView_low.Text = c.Value_Low + "°";

                    textView_low.SetTypeface(Helper_Text.GetFont_ChartMarker(), TypefaceStyle.Normal);

                    textView_low.TextSize = 12;

                    textView_low.SetTextColor(Convertor_Colour_Droid.convert(Helper_Colour_Droid.GetText()));


                    LinearLayout linearLayout3 = new LinearLayout(_context);

                    linearLayout3.Orientation = Orientation.Vertical;

                    layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent, LinearLayout.LayoutParams.MatchParent);

                    layoutParams.SetMargins(0, 0, 0, 0);

                    linearLayout3.LayoutParameters = layoutParams;

                    linearLayout3.AddView(textView_low);


                    annotation_btm.View = linearLayout3;

                    _chart.Annotations.Add(annotation_btm);




Each icon is an Android xml vector.

Also, if it helps here is the range column series setup:

            _barSeries = new RangeColumnSeries();

            if( Settings_Droid.theme() == "dark" || Settings_Droid.theme() == "black" )

                _barSeries.Color = Convertor_Colour_Droid.convert(appyweather.Droid.Resource.Color.dchart_bar);

            else

                _barSeries.Color = Convertor_Colour_Droid.convert(appyweather.Droid.Resource.Color.lchart_bar);

            _barSeries.CornerRadius = new ChartCornerRadius(4.0f);

            _barSeries.DataPointSelectionEnabled = false;

            _barSeries.High = "FValue_High";

            _barSeries.ItemsSource = _card.Chart;

            _barSeries.Low = "FValue_Low";

            if (Settings_Droid.theme() == "dark" || Settings_Droid.theme() == "black")

                _barSeries.SelectedDataPointColor = Convertor_Colour_Droid.convert(appyweather.Droid.Resource.Color.dchart_bar);

            else

                _barSeries.SelectedDataPointColor = Convertor_Colour_Droid.convert(appyweather.Droid.Resource.Color.lchart_bar);

            _barSeries.Spacing = 0.15;

            _barSeries.StrokeWidth = 0;

            _barSeries.StrokeColor = Color.Red;

            _barSeries.Width = 0.85;

            _barSeries.XBindingPath = "Time";

And the category axis setup:

            _axis_primary = new CategoryAxis();

            _axis_primary.AxisLineOffset = 0;

            _axis_primary.LabelRotationAngle = -55;

            _axis_primary.LabelStyle.StrokeWidth = 0;

            _axis_primary.LineStyle.StrokeWidth = 0;

            _axis_primary.LabelStyle.TextColor = Convertor_Colour_Droid.convert(Helper_Colour_Droid.GetText("subtle"));

            _axis_primary.LabelStyle.TextSize = 12;

            _axis_primary.LabelStyle.Typeface = Helper_Text.GetFont_ChartMarker();

            _axis_primary.MajorGridLineStyle.StrokeWidth = 0;

            _axis_primary.MajorTickStyle.TickSize = 0;

            _axis_primary.ShowMajorGridLines = false;


Hope you are able to assist! Thanks for your continued support.


SJ Suyamburaja Jayakumar Syncfusion Team June 1, 2020 12:13 PM UTC

Hi Bardi Golriz, 
 
Thanks for the update.  
 
We have checked your provide code snippet and we suggest to use the TextAnnotation instead of the ViewAnnotation, and provided image related on HWUI profiler on-screen is not viewable so please provided corresponding image through zip format. We need some time to ensure that with view annotation and update the details on June 3,2020. Please check and update whether you can resolve it using TextAnnotation or not. 
 
Regards,  
Suyamburaja J. 


DD Devakumar Dhanapoosanam Syncfusion Team June 4, 2020 06:35 PM UTC

Hi Bardi Golriz, 
 
We have prepared a simple sample based on the provided details by using TextAnnotation instead of the ViewAnnotation for adding the text and the icon and the performance is better when compared adding the ViewAnnotation. 
                                
Can you please check the below sample whether if you facing any issue or not related to performance? 
 
 
 
Please check and let us know if the above solution works in your application or not. Based on that we can proceed further. 
 
Regards, 
Devakumar D 


BG Bardi Golriz June 5, 2020 12:32 PM UTC

Thanks so much for the continued assistance. I've not had a chance to look at this yet because I've been busy with a 100 other jobs, but I intend to within the next week, and will report back as soon as I do.

Have a great weekend.

HM Hemalatha Marikumar Syncfusion Team June 8, 2020 10:26 AM UTC

Hi Bardi Golriz,  
  
Thanks for your update. 
 
We will wait unit hear from you. 
 
Regards,
Hemalatha M. 


BG Bardi Golriz replied to Hemalatha Marikumar June 12, 2020 06:02 PM UTC

Hi Bardi Golriz,  
  
Thanks for your update. 
 
We will wait unit hear from you. 
 
Regards,
Hemalatha M. 


Okay, some positive developments to report.

I changed the top and bottom ViewAnnotation's to TextAnnotations, but can't change my middle annotation as it contains a xml drawable.

What I discovered is that it's the middle ViewAnnotation causing the jerky scroll. If I don't add it, then everything seems okay. So much so, there is actually no HWUI rendering happening at all in this situation i.e. their bars remain still.

This is the code for the middle annotation (I streamlined it compared to what I posted originally to no longer put an ImageView inside a LinearLayout but just be an ImageView but this made no difference):


ViewAnnotation annotation_ctr = new ViewAnnotation()

{

                        X1 = x_pt,

                        Y1 = y_pt,

                        VerticalAlignment = ChartAnnotationAlignment.Center,

};


ImageView icon = new ImageView(_context);

icon.SetImageResource(Resource.Drawable.clear);

icon.Click += CardView_Click;

icon.Id = x;

annotation_ctr.View = icon;

_chart.Annotations.Add(annotation_ctr);

Also here's the clear drawable example I'm using (keep in mind, each day can have a different drawable set based on the weather but they are all similar to below):

    android:viewportWidth="18"

    android:viewportHeight="18"

    android:width="18dp"

    android:height="18dp">

   

        android:pathData="M16.911 9A7.911 7.911 0 0 1 1.089 9A7.911 7.911 0 0 1 16.911 9Z"

        android:fillType="evenOdd"

        android:fillColor="#FFC107"

        android:strokeColor="#FFB300"

        android:strokeWidth="2.18"

        android:strokeLineJoin="round"

        android:strokeMiterLimit="1.41421" />

I've attached it too.

In your documentation for annotations, you do have an example with an ImageView added to a ViewAnnotation, so I'm assuming what I'm doing should work fine, especially considering there are not many icons and they're quite small in size too (being vector drawables).

Looking forward to your help. Thanks so much again for the support so far.






BG Bardi Golriz replied to Bardi Golriz June 12, 2020 06:04 PM UTC

Hi Bardi Golriz,  
  
Thanks for your update. 
 
We will wait unit hear from you. 
 
Regards,
Hemalatha M. 


Okay, some positive developments to report.

I changed the top and bottom ViewAnnotation's to TextAnnotations, but can't change my middle annotation as it contains a xml drawable.

What I discovered is that it's the middle ViewAnnotation causing the jerky scroll. If I don't add it, then everything seems okay. So much so, there is actually no HWUI rendering happening at all in this situation i.e. their bars remain still.

This is the code for the middle annotation (I streamlined it compared to what I posted originally to no longer put an ImageView inside a LinearLayout but just be an ImageView but this made no difference):


ViewAnnotation annotation_ctr = new ViewAnnotation()

{

                        X1 = x_pt,

                        Y1 = y_pt,

                        VerticalAlignment = ChartAnnotationAlignment.Center,

};


ImageView icon = new ImageView(_context);

icon.SetImageResource(Resource.Drawable.clear);

icon.Click += CardView_Click;

icon.Id = x;

annotation_ctr.View = icon;

_chart.Annotations.Add(annotation_ctr);

Also here's the clear drawable example I'm using (keep in mind, each day can have a different drawable set based on the weather but they are all similar to below):

    android:viewportWidth="18"

    android:viewportHeight="18"

    android:width="18dp"

    android:height="18dp">

   

        android:pathData="M16.911 9A7.911 7.911 0 0 1 1.089 9A7.911 7.911 0 0 1 16.911 9Z"

        android:fillType="evenOdd"

        android:fillColor="#FFC107"

        android:strokeColor="#FFB300"

        android:strokeWidth="2.18"

        android:strokeLineJoin="round"

        android:strokeMiterLimit="1.41421" />

I've attached it too.

In your documentation for annotations, you do have an example with an ImageView added to a ViewAnnotation, so I'm assuming what I'm doing should work fine, especially considering there are not many icons and they're quite small in size too (being vector drawables).

Looking forward to your help. Thanks so much again for the support so far.






Attached is the xml drawable vector example I'm using in the chart's middle ViewAnnotation with an ImageView.

Attachment: dark_clear_day_xsmall.xml_723761cc.zip

DD Devakumar Dhanapoosanam Syncfusion Team June 15, 2020 12:39 PM UTC

Hi Bardi Golriz, 
 
Thanks for your update. 
 
We would like to let you know that we have already logged issue for the ViewAnnotation in android and the fix will be available in our next upcoming weekly NuGet release on June 23, 2020. 
 
We appreciate your patience until then. 
 
Regards, 
Devakumar D 


BG Bardi Golriz June 15, 2020 01:17 PM UTC

Excellent. So, to be clear, you identified the issue and have a fix ready to be released next week?

HM Hemalatha Marikumar Syncfusion Team June 16, 2020 11:04 AM UTC

Hi Bardi Golriz, 
 
Yes. We were able to reproduce the issue and we are working on fixing the issue. As updated earlier, this fix will be included in our June 23,2020 rolled out weekly NuGet release. 
 
Regards,
Hemalatha M. 


DD Devakumar Dhanapoosanam Syncfusion Team June 24, 2020 02:24 AM UTC

Hi Bardi Golriz, 
 
Due to some technical hurdles, we were unable to move fix into our today weekly NuGet. So, currently we are working on this with high priority and the fix for this issue will be included in our upcoming weekly NuGet release which is expected to be rolled out on second week of July 2020. Sorry for the delay. 
 
Regards, 
Devakumar D 


BG Bardi Golriz June 30, 2020 03:11 PM UTC

That's fine, thank you for the update. Hopefully there are no more delays :)

SJ Suyamburaja Jayakumar Syncfusion Team July 2, 2020 01:46 AM UTC

Hi Bardi Golriz,  
 
Thanks for your update. 
 
As promised earlier, the fix will be included in our upcoming weekly NuGet release. 
 
We appreciate your patience until then. 
 
Regards, 
Suyamburaja J. 


BG Bardi Golriz July 2, 2020 08:53 AM UTC

Thanks for confirming! Looking forward to it.

SS Sridevi Sivakumar Syncfusion Team July 3, 2020 12:50 PM UTC

Hi  Bardi Golriz,


Please be wait until our weekly Nuget release gets rolled out.

Regards,
Sridevi S. 


DD Devakumar Dhanapoosanam Syncfusion Team July 15, 2020 10:07 AM UTC

Hi Bardi Golriz, 
 
Sorry for the continuous delay.    
 
Since we have some pending test cases, we were unable to move this fix into the weekly nuget release on July 14, 2020. We are currently ensuring that and surely move this fix into our next weekly NuGet release which is expected to be rolled out on July 21, 2020. 
 
Regards, 
Devakumar D 


BG Bardi Golriz July 15, 2020 10:16 AM UTC

Okay, thank you for the update. Fingers crossed 🤞

DD Devakumar Dhanapoosanam Syncfusion Team July 16, 2020 02:39 PM UTC

Hi Bardi Golriz, 
 
Please be wait until our weekly NuGet release gets rolled out. 
 
Thanks, 
Devakumar D 


BG Bardi Golriz July 22, 2020 07:33 PM UTC

It did but no sign of a fix? Unless I'm missing something.

To be honest, although I appreciate how quickly you started looking into this, I'm getting slightly frustrated by how it's being delayed on a week-by-week basis.

DD Devakumar Dhanapoosanam Syncfusion Team July 23, 2020 01:18 AM UTC

 
Sorry for the inconvenience caused. 
 
We have fixed the reported issue. Please find the patch from below link: 
 
Advanced approach – use only if you have specific needs and can directly replace existing assemblies for your build environment    
  
(OR)     
Please find the patch assemblies alone from below location:     
 
(OR)     
Please find the NuGet from below location:   
 
Assembly Version: 18.2.0.44 
    
Disclaimer:      
Please note that we have created this patch for version 18.2.0.44 specifically to resolve the following issue reported in this incident. If you have received other patches for the same version for other products, please apply all patches in the order received.    
    
Note: Currently we have patch support only to the main and service pack release version, not for weekly NuGet release. Since we have provided a patch with latest 18.2.0.44 version.    
    
Please clear the NuGet cache before using the patch NuGet.   
   
To Clear the cache:     
Windows:      
Follow the below link to clear cache,      
   
For Mac      
• ~/.local/share/NuGet/Cache      
• ~/.nuget/package   
 
Please check with the above fix and let us know if the issue is resolved at your end or not.   
 
Regards, 
Devakumar D 


BG Bardi Golriz July 23, 2020 09:11 AM UTC

Thank you for the quick turnaround on the back of my last post. I'm curious whether this fix will be in next week's NuGet update. If yes, I'm probably more comfortable waiting for it then.

RS Ramya Soundar Rajan Syncfusion Team July 24, 2020 06:52 AM UTC

Hi Bardi Golriz, 
 
As promised earlier, surely we will include this fix in our upcoming July 28,2020 rolled out weekly NuGet release  
 
Regards, 
Ramya S 


BG Bardi Golriz replied to Ramya Soundar Rajan August 2, 2020 11:04 PM UTC

Hi Bardi Golriz, 
 
As promised earlier, surely we will include this fix in our upcoming July 28,2020 rolled out weekly NuGet release  
 
Regards, 
Ramya S 


I don't see any mention of this in v18.2.0.47?

SJ Suyamburaja Jayakumar Syncfusion Team August 3, 2020 09:57 AM UTC

Hi Bardi Golriz, 
 
We have included the bug fix into our latest Weekly NuGet. Since we have considered this as internal bug, we have not included in our release notes.  
 
Regards, 
Suyamburaja J. 


BG Bardi Golriz August 3, 2020 10:27 AM UTC

Ah thanks! I'll try it out, and if there are any issues, will let you know. Hopefully you won't hear from me on this matter again 🤞

RS Ramya Soundar Rajan Syncfusion Team August 4, 2020 07:50 AM UTC

Hi Bardi Golriz, 
 
Thanks for your update. 
 
Please let us know if you would require any further assistance. 
 
Regards, 
Ramya S 


BG Bardi Golriz replied to Ramya Soundar Rajan August 5, 2020 08:33 AM UTC

Hi Bardi Golriz, 
 
Thanks for your update. 
 
Please let us know if you would require any further assistance. 
 
Regards, 
Ramya S 


It works beautifully! Such a noticeable improvement. Thanks so much for turning this around in a relatively short time.

HM Hemalatha Marikumar Syncfusion Team August 6, 2020 08:43 AM UTC

Hi Bardi Golriz,  
 
Thanks for your valuable feedback. 
 
Please feel free to contact us if you need any further assistance.  
 
Regards,
Hemalatha M. 
 


Loader.
Up arrow icon