Problem with gradient colors in SfCIrcularGauge

[Konstantinos Evangelidis]

Hello. In my app I have two Gauge graphs(I will put a third one asap). They are working great but sometimes there are problems with the colors. I am updating the graphs every one minute with new values but  sometimes(close to 40% of the times I am trying it) the colors are changing. 

I am calling the methods that I am setting the graphs like this:

     SetRealTimeErythemaGraphAsync(erythemaPerCent);
     SetRealTimeVitaminDGraph(vitamindPerCent);

This is the first method

     private void SetRealTimeErythemaGraphAsync(double status)
        {
            SfCircularGauge erythemaCircularGauge = new SfCircularGauge(Activity);
            erythemaCircularGauge.CircularScales.Clear();
            ObservableCollection<CircularScale> erythemaScales = new ObservableCollection<CircularScale>();
            CircularScale erythemaScale = new CircularScale();

            Console.WriteLine("Erythema status:  " + status);

            erythemaScale.StartValue = 0;
            erythemaScale.EndValue = 100;
            erythemaScale.ShowTicks = false;
            erythemaScale.StartAngle = 160;
            erythemaScale.SweepAngle = 220;
            erythemaScale.ShowLabels = false;
            erythemaScale.RimColor = Color.ParseColor("#1aea1c8b");
            erythemaScale.ScaleStartOffset = 1;
            erythemaScale.ScaleEndOffset = 0.6;

            

            CircularRange erythemaRange = new CircularRange();
            erythemaRange.StartValue = 0;
            erythemaRange.EndValue = status;
            erythemaRange.Width = 14;
            erythemaRange.Offset = 1;
            erythemaRange.OuterStartOffset = 1;
            erythemaRange.OuterEndOffset = 0.6;
            erythemaScale.CircularRanges.Add(erythemaRange);

            ObservableCollection<GaugeGradientStop> ergradientColor1 = new ObservableCollection<GaugeGradientStop>();

            GaugeGradientStop ergaugeGradientStop = new GaugeGradientStop();
            ergaugeGradientStop.Value = 0;
            ergaugeGradientStop.Color = Color.ParseColor("#fdc8e9");
            ergradientColor1.Add(ergaugeGradientStop);

            GaugeGradientStop ergaugeGradientStop1 = new GaugeGradientStop();
            ergaugeGradientStop1.Value = status;
            ergaugeGradientStop1.Color = Color.ParseColor("#9d1141");
            ergradientColor1.Add(ergaugeGradientStop1);

            erythemaRange.GradientStops = ergradientColor1;

            erythemaScales.Add(erythemaScale);

            erythemaCircularGauge.CircularScales = erythemaScales;

            real_erythema_grapg.RemoveAllViews();
            real_erythema_grapg.AddView(erythemaCircularGauge);

        }

This is the second method

     SfCircularGauge vitaminDCircularGauge = new SfCircularGauge(Activity);
            vitaminDCircularGauge.CircularScales.Clear();
            ObservableCollection<CircularScale> vitaminDScales = new ObservableCollection<CircularScale>();
            CircularScale vitaminDScale = new CircularScale();

            Console.WriteLine("VitaminD status:  " + status);

            vitaminDScale.StartValue = 0;
            vitaminDScale.EndValue = 100;
            vitaminDScale.ShowTicks = false;
            vitaminDScale.StartAngle = 160;
            vitaminDScale.SweepAngle = 220;
            vitaminDScale.ShowLabels = false;
            vitaminDScale.RimColor = Color.ParseColor("#1a0b9eef");
            vitaminDScale.ScaleStartOffset = 1;
            vitaminDScale.ScaleEndOffset = 0.6;

           

            CircularRange vitaminDRange = new CircularRange();
            vitaminDRange.StartValue = 0;
            vitaminDRange.EndValue = status;
            vitaminDRange.Width = 14;
            vitaminDRange.Offset = 1;
            vitaminDRange.OuterStartOffset = 1;
            vitaminDRange.OuterEndOffset = 0.6;
            vitaminDScale.CircularRanges.Add(vitaminDRange);

            ObservableCollection<GaugeGradientStop> vtgradientsColor1 = new ObservableCollection<GaugeGradientStop>();

            GaugeGradientStop vtgaugeGradientStop = new GaugeGradientStop();
            vtgaugeGradientStop.Value = 0;
            vtgaugeGradientStop.Color = Color.ParseColor("#c4ecff");
            vtgradientsColor1.Add(vtgaugeGradientStop);

            GaugeGradientStop vtgaugeGradientStop1 = new GaugeGradientStop();
            vtgaugeGradientStop1.Value = status;
            vtgaugeGradientStop1.Color = Color.ParseColor("#086eb6");
            vtgradientsColor1.Add(vtgaugeGradientStop1);

            vitaminDRange.GradientStops = vtgradientsColor1;

            vitaminDScales.Add(vitaminDScale);

            vitaminDCircularGauge.CircularScales = vitaminDScales;

            real_VitaminD_graph.RemoveAllViews();
            real_VitaminD_graph.AddView(vitaminDCircularGauge);

     }

I attached a rar file the four images. The images named correct is how I wanna my graphs looks like. The other three images is example of my problem. 

Thank you very much for your time.

Attachment: gaugeImages_239e2bf3.rar

[Sri Gayathri Gopalakrishnan]

Hi Konstantinos, 

 

Query: Problem with gradient colors in SfCIrcularGauge 

 

We have analyzed your code snippet and both Width and Offsets have been applied for range. Please use either Width, Offset property or StartOffset, EndOffset properties to adjust range width.  We have tested by modifying the code with gauges have been added in layouts and dynamically updated the range value for 1 minute. But ranges will update properly with gradient color. Please download our tested sample from the below link, 

 

http://www.syncfusion.com/downloads/support/forum/138198/ze/GaugeGraph665977610  

 

 

Code Snippet: 

            erythemaRange.Width = 14;
            erythemaRange.Offset = 1; 

 

Or  

            erythemaRange.OuterStartOffset = 1;
            erythemaRange.OuterEndOffset = 1; 

            erythemaRange.InnerStartOffset = 0.6;
            erythemaRange.InnerEndOffset = 0.6; 

 

Note: We have tested in Samsung S8 Device with 16.1.0.37 product version. 

 

Please get back to us with replication procedure or modify the sample, if the given sample doesn’t resolve your issue. 

 

Regards, 

Sri Gayathri. G 

[Konstantinos Evangelidis]

Hello. I follow your instructions but the problem with the color remains.  

[Sri Gayathri Gopalakrishnan]

Hi Konstantinos, 

 

Could you please confirm whether the issue reproduced in our last updated sample? Since, we are unable to reproduce the gradient range issue in our side by testing that sample based on your requirement. If possible, please modify the sample to reproduce the issue, it will be helpful in further analysis and provide you the solution sooner. 

   

Regards, 

Sri Gayathri. G