RadRadialGauge as a half gauge by ignoring the space below

2 posts, 0 answers
  1. Sudha
    Sudha avatar
    3 posts
    Member since:
    Apr 2017

    Posted 11 Apr Link to this post

    Hi, 

    When tried creating a gauge, it takes half the space and rest of the space is empty since it starts from 180 and sweeps 180. I would like not to have the empty space. How can I achieve it?

    C# Code:-

    var circularGauge = new RadRadialGauge
                    {
                        
                        Indicators ={
                            new GaugeNeedleIndicator {
                                Value = selectedMyAnalyticsSummary.MDM,
                                Fill = Color.FromHex("#666"),
                                Position = GaugeElementPosition.Start
                            }
                        },
                        Axis = new GaugeLinearAxis
                        {
                            Minimum = 0,
                            Maximum = 100,
                            Step = 100,
                            StrokeThickness = 0,
                            TickThickness = 0,
                            TextColor = Color.Gray,
                            LabelPosition = GaugeElementPosition.Start,
                            TickPosition = GaugeElementPosition.Start,
                            LabelOffset = 25,
                            FontSize = Device.GetNamedSize(NamedSize.Small,typeof(Label))
                        },
                        AnimationSettings = {
                            Easing = Easing.CubicOut
                        },
                        StartAngle = 180,
                        SweepAngle = 180
                    };

                    circularGauge.Ranges.Ranges.Add(new GaugeRange { From = 0, To = 20, Color = CommonStrings.GetRatingColor("1") });
                    circularGauge.Ranges.Ranges.Add(new GaugeRange { From = 20, To = 40, Color = CommonStrings.GetRatingColor("2") });
                    circularGauge.Ranges.Ranges.Add(new GaugeRange { From = 40, To = 60, Color = CommonStrings.GetRatingColor("3") });
                    circularGauge.Ranges.Ranges.Add(new GaugeRange { From = 60, To = 80, Color = CommonStrings.GetRatingColor("4") });
                    circularGauge.Ranges.Ranges.Add(new GaugeRange { From = 80, To = 100, Color = CommonStrings.GetRatingColor("5") });

     

    Thanks

  2. Petar Marchev
    Admin
    Petar Marchev avatar
    995 posts

    Posted 13 Apr Link to this post

    Hi Sudha,

    You seem to need a control that we do not yet have - a semi-circle gauge. Currently our radial gauge is always measured and arranged as a full-circle gauge, and this is why the bottom part of it appears empty. Our radial gauge lacks functionality that will allow it to occupy the space as per your requirements. Perhaps you can try to create a custom control that contains a gauge in it and lays out the gauge with twice the height. Similar to this:

    public class UpperHalfControl : ContentView
    {
     protected override void LayoutChildren(double x, double y, double width, double height)
     {
      if (this.Content != null)
      {
       this.Content.Layout(new Rectangle(x, y, width, 2 * height));
      }
      else
      {
       base.LayoutChildren(x, y, width, height);
      }
     }
    }

    I tested this in a grid with 2 rows and 2 columns:

    <Grid>
     <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
     </Grid.ColumnDefinitions>
     <Grid Grid.Row="1" BackgroundColor="Green" />
     <Grid Grid.Column="1" BackgroundColor="Blue" />
     <Grid Grid.Row="1" Grid.Column="1" BackgroundColor="Yellow" />
     <local:UpperHalfControl>
      <telerikGauges:RadRadialGauge StartAngle="180" SweepAngle="180" />
     </local:UpperHalfControl>
    </Grid>

    I am attaching an image of the output I get. I hope this is helpful.

    I created a feedback item in our portal where you can vote and track its status. I also updated your Telerik points as a thank you for this suggestion.

    Regards,
    Petar Marchev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top