We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

6 Replies

NM Nijamudeen Mohamed Sulaiman Syncfusion Team January 20, 2016 09:58 AM UTC

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.



FS Femil Shajin January 21, 2016 07:26 AM UTC

Hi Nijamudeen,

Thanks Perfect, Exactly What I needed.

Thanks,
Femil Shajin C


FS Femil Shajin January 21, 2016 08:10 AM UTC

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


NM Nijamudeen Mohamed Sulaiman Syncfusion Team January 22, 2016 08:38 AM UTC

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.
  

 



FS Femil Shajin January 22, 2016 02:14 PM UTC

Hi Nijamudeen,

Thanks, setting LabelOffset works. 

Regards, Femil Shajin C


NM Nijamudeen Mohamed Sulaiman Syncfusion Team January 25, 2016 04:16 AM UTC

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.


Loader.
Up arrow icon