CircularGauge Takes extra space When start angle is 180 and SweepAngle is 180

[Femil Shajin]

Hi,

Let's say when I set HeightRequest as 100 and start angle and sweep angle as 180, Circular Gauge takes only the half of the specified height and leaves the rest of the view's space empty. How can I get rid of the empty space? can I place any text in the empty space to cover up space?

Thanks,

Femil Shajin C

[Nijamudeen Mohamed Sulaiman]

Hi Femil,

Thanks for your interest in Syncfusion Products.

Based on the implementation of SfCircularGauge, it will render in squared layout from the available size for Default GaugeType in Xamarin (Android). Therefore while setting the StartAngle and SweepAngle of the Scale as 180 (Semicircular Gauge) there will be an empty space at the bottom of the gauge.

Your requirement of getting semicircular gauge can be achieved by setting the GaugeType as "North" with the same StartAngle and SweepAngle, hence the empty space will be shared in the top and bottom portion of the gauge.  Please refer the following the code example for this.

C#:
        circularGauge.HeightRequest = 100;

        circularGauge.GaugeType = GaugeType.North;

        //Scales

        scale = new Scale();

        scale.StartAngle = 180;

        scale.SweepAngle = 180;

Please refer the below tables for StartAngle and SweepAngle of the Scale, respective images are available in the below link.

Gauge Type	Start Angle	Sweep Angle (Difference of angle)
North	180	180
South	0	180
East	270	180
West	90	180
NorthEast	270	90
NorthWest	180	90
SouthEast	0	90
SouthWest	90	90

 

Gauge types Link: http://www.syncfusion.com/products/xamarin/circular-gauge/shapes.

Note: default value for GaugeType is “Default”.

If the provided solution does not meet your requirement, could you please provide us more information along with screenshots (if possible)? It will be very helpful for us to analyse on it and provide you the possible solution.

Please let us know, if you have any query.

Regards,
Nijamudeen M.

[Femil Shajin]

Hi Nijamudeen,

Thanks Perfect, Exactly What I needed.

Thanks,

Femil Shajin C

[Femil Shajin]

Hi Nijamudeen,

This is my code, and I have attached my screenshot as .rar file... You can see the EndValue 100 is cropped. What am I doing wrong?

Scale scale = new Scale();

scale.StartValue = 0;

scale.EndValue = 100;

scale.Interval = 100;

scale.StartAngle = 180;

scale.SweepAngle = 180;

scale.RimThickness = 30;

scale.RimColor = Color.Transparent;

scale.ShowTicks = false;

scale.ShowLabels = true;

scale.LabelColor = Color.Gray;

scale.LabelFontSize = Device.GetNamedSize(NamedSize.Small,typeof(Label));

circularGauge.Scales.Add(scale);

Thanks,

Femil Shajin C

Attachment: Screenshot_20160121132957_(2)_46417931.rar

[Nijamudeen Mohamed Sulaiman]

Hi Femil, 

Thanks for the update.

Based on the provided information, we have found that the label overlapping on rim occurs due to the size of the CircularGauge label and RimThickness. This can be resolved by setting the LabelOffset property of Scale in SfCircularGauge. Please refer the below code example for this.

 

C#:

            circularGauge = newSfCircularGauge();

            circularGauge.GaugeType = GaugeType.North;

            Scale scale = newScale();

            scale.StartValue = 0;

            scale.EndValue = 100;

            scale.Interval = 100;

            scale.StartAngle = 180;

            scale.SweepAngle = 180;

            scale.RimThickness = 40;

            scale.RimColor = Color.Aqua;

            scale.ShowTicks = false;

            scale.ShowLabels = true;

            scale.LabelOffset = 0.3;

            scale.LabelColor = Color.Gray;

            scale.LabelFontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label));

            circularGauge.Scales.Add(scale);

 

Note: Label overlapping on Rim can be adjusted by RimThickness, LabelFontSize and LabelOffset based on your Requirement.

If the provided information does not meet your requirement, could you please provide us more information about your requirement (if possible screenshots)? It will be helpful for us to analyze on your requirement and provide you a possible solution.

Please let us know, if you have any query.

Regards, 
Nijamudeen M.  

 

[Femil Shajin]

Hi Nijamudeen,

Thanks, setting LabelOffset works. 

Regards, Femil Shajin C

[Nijamudeen Mohamed Sulaiman]

Hi Femil,

We are glad to know that you have met your requirement. Please let us know, if you need further assistance.

Regards,

Nijamudeen M.