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

GaugeType set to GaugeType.North no free Space

This is my Class:

    public class CosPhiGauge : SfCircularGauge
    {
        public CosPhiGauge()
        {
            this.BackgroundColor = Color.White;
            HeightRequest = 300;
            this.GaugeType = Syncfusion.SfGauge.XForms.GaugeType.North;

            var scale = new Scale()
            {
                StartValue = 0.0,
                EndValue = 1.0,
                StartAngle = 0,
                SweepAngle = 0,
                RimThickness = 120,
                RimColor = Color.FromHex("#C5C5C5"),
                ShowTicks = false,
                ShowLabels = false,
            };

            var needle = new NeedlePointer()
            {
                Color = Color.White,
                Thickness = 5,
                KnobRadius = 0,
                Value = 0.95,
                LengthFactor = 1.1,
            };

            var pointer = new RangePointer()
            {
                Color = Color.Green,
                Thickness = 120,
                Value = 0.95,
            };

            Header header = new Header();
            header.Text = "Cos Phi";
            header.TextSize = 30;
            header.Position = Device.OnPlatform(iOS: new Point(.38, .7), Android: new Point(0.38, 0.7), WinPhone: new Point(0.38, 0.7));
            header.ForegroundColor = Color.Gray;
            this.Headers.Add(header);

            scale.Pointers.Add(pointer);
            scale.Pointers.Add(needle);
            this.Scales.Add(scale);
        }
    }

And this is my Layout:

            StackLayout stack = new StackLayout
            {
                Orientation = StackOrientation.Vertical,
                Children = {
                        new CosPhiGauge(),
                        new CosPhiGauge(),
                        new CosPhiGauge(),
                        new CosPhiGauge(),
                    }
            };
            var scrollview = new ScrollView { Orientation = ScrollOrientation.Vertical, Content = stack };
            Content = scrollview;

And this is the result


What I'm doing wrong ?

Helmut

10 Replies

HL Helmut Lubik April 16, 2015 04:11 PM UTC

Edit:
This is the screenshot from the Android Emulator. No semiGauge visible




KR Ken Ross April 16, 2015 07:23 PM UTC

Hi Helmut,

Try setting your VirticalOptions="FillAndExpand" for your containers.

Also, I find that GaugeType "North" doesn't always figure out the correct shape on it's own; try setting the StartAngle and SweepAngle to 180 and see what happens.

Ken



HL Helmut Lubik April 16, 2015 09:47 PM UTC

Hi Ken,
sorry, but your suggestion didn't solved that issue.
I tried VerticalOptions = FillAndExpand, setting the StartAngle and SweepAngle to 180.
It's the same to GaugeType = GaugeType.South.
Only West and East works correctly. That's bad :(

Any other suggestions ????

Helmut


KR Ken Ross April 17, 2015 12:59 AM UTC

Just to see what happens on Android, set the HeightRequest of the gauge to 200.  Seems odd but if Android is having trouble calculating the height then that might work around it.

As an aside, you should give the Xamarin Android Player a try for your Android test environment - it's WAY faster than the emulator you're currently using :)

Ken



NM Nijamudeen Mohamed Sulaiman Syncfusion Team April 17, 2015 10:16 AM UTC

Hi Helmut,

We have analysed your requirements from the provided information, please find the related details below,


SweepAngle property of the Scale is to specify the difference in angle from the StartAngle of the Scale, as you have specified 0 for SweepAngle in your sample, it is not rendered in the UI in other platforms. We have logged an issue in Xamarin (iOS) that, SweepAngle of the Scale can't be dynamically updated when change the GaugeType property of the SfCircularGauge. The fix for this issue will be available in our upcoming Xamarin SP release which is expected to be rolled out by the end of this month.


While use the GaugeType feature in gauge control, 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-iOS/circular-gauge/shapes


Please let us know if you have any queries.

Regards,
Nijamudeen M.



HL Helmut Lubik April 19, 2015 09:20 AM UTC

Sorry, but it doesn't work (see screenshot)
The same appears, without Headers.


This is my Gauge:
        public CosPhiGauge()
        {
            this.BackgroundColor = Color.White;
            this.GaugeType = Syncfusion.SfGauge.XForms.GaugeType.North;
            this.HeightRequest = 300;
            this.HorizontalOptions = LayoutOptions.CenterAndExpand;
            this.VerticalOptions = LayoutOptions.FillAndExpand;

            var scale = new Scale()
            {
                StartValue = 0.0,
                EndValue = 1.0,
                StartAngle = 180,
                SweepAngle = 180,
                RimThickness = 100,
                RimColor = Color.FromHex("#C5C5C5"),
                ShowTicks = false,
                ShowLabels = false,
            };

            var needle = new NeedlePointer()
            {
                Color = Color.White,
                Thickness = 5,
                KnobRadius = 0,
                Value = 0.95,
                LengthFactor = 1.1,
            };

            var pointer = new RangePointer()
            {
                Color = Color.Green,
                Thickness = 100,
                Value = 0.95,
            };

            Header header = new Header();
            header.Text = "Cos Phi Left bottom Corner Point(0.0,0.9)";
            //header.TextSize = 30;
            header.Position = new Point(0.0, 0.9);
            header.ForegroundColor = Color.Gray;
            this.Headers.Add(header);

            Header header1 = new Header();
            header1.Text = "Left upper Corner Point(0.0,0.0)";
            //header.TextSize = 30;
            header1.Position = new Point(0.0, 0.0);
            header1.ForegroundColor = Color.Black;
            this.Headers.Add(header1);

            scale.Pointers.Add(pointer);
            scale.Pointers.Add(needle);
            this.Scales.Add(scale);
        }
}


NM Nijamudeen Mohamed Sulaiman Syncfusion Team April 20, 2015 12:56 PM UTC

Hi Helmut,

We are unable to reproduce the mentioned issue with the information you provided.

Since the shared information was not sufficient to reproduce the reported issue, Could you please elaborate “it doesn't work (see screenshot) the same appears, without Headers” in your previous update and provide usa simple issue reproducing sample and its replication procedure along with screenshot? It will be very helpful for us to understand your requirement clearly and update the response.

Please let us know if you have any concerns.

Thanks,
Nijamudeen M.


HL Helmut Lubik April 20, 2015 01:32 PM UTC

Hi Nijamudeen,

as you can see on the screenshot, there is to much space between the 2 Gauges.
GaugeType = Syncfusion.SfGauge.XForms.GaugeType.North;
StartAngle = 180,
SweepAngle = 180



I hope, this is clarifying my problem.
Thanks
Helmut


NM Nijamudeen Mohamed Sulaiman Syncfusion Team April 21, 2015 12:36 PM UTC

Hi Helmut,


Thanks for the provided information.


Based on the implementation of CircularGauge in Xamarin, it renders in a squarified manner, so while set GaugeType as default, it will occupy the entire space. Therefore while set the StartAngle and SweepAngle of the Scale as 180 there will be an empty space at the bottom of the gauge, when set the GaugeType as "North" with the same StartAngle and SweepAngle the empty space will be shared in the top and bottom portion of the gauge. It’s an expected behavior of SfCircularGauge.


Even though we will consider this, and we have created an incident for this. Please have follow up with the incident.


Please let us know, if you have any queries.


Regards,

Nijamudeen M.



NM Nijamudeen Mohamed Sulaiman Syncfusion Team April 21, 2015 01:46 PM UTC

Hi Helmut,

Additional information related to the implementation of avoiding spacing in semi-circle gauges.


We will improve the implementation based on the Height/Width in respective type of semi-circle gauges. We will consider the radius of circular gauge as per the maximum Height/Width. So this implementation will avoid the maximum spacing of semi-circle gauges. Please refer the below table to avoid spacing in semi-circle gauges what we have planned.


Gauge Type

Conditions to avoid Spacing

Example

North

AvailableWidth > AvailableHeight

Width and height ratio must be 2:1

South

AvailableWidth > AvailableHeight

Width and height ratio must be 2:1

East

AvailableWidth < AvailableHeight

Width and height ratio must be 1:2

West

AvailableWidth < AvailableHeight

Width and height ratio must be 1:2


Please have the follow up with the incident, if any queries.

Regards,
Nijamudeen M.


Loader.
Live Chat Icon For mobile
Up arrow icon