GaugeBarIndictor does not honor origin of axis and fill starts at 0 instead of Axis.Minimum

1 Answer 58 Views
Gauge
Steve
Top achievements
Rank 1
Iron
Steve asked on 10 Jul 2023, 04:17 PM

As an example, if we define the Axis (GaugeLinearAxis) Min and Max from -20 to 100, and the GaugeBarIndictor value is set to 35, the Fill starts at 0 and ends at 35, rather than starting at -20 and ending at 35.

Similarly, if the GaugeBarIndictor value is set to -10, the fill starts at 0, and ends at -10, rather than -20 to -10.

This behavior occurs on both windows and android.

Xaml

 <telerik:RadRadialGauge x:Name="gauge"
                            AutomationId="gauge">
        <telerik:RadRadialGauge.Axis>
            <telerik:GaugeLinearAxis x:Name="axis" />
        </telerik:RadRadialGauge.Axis>
        <telerik:RadRadialGauge.Indicators>
            <telerik:GaugeBarIndicator x:Name="barIndicator" />
            <telerik:GaugeNeedleIndicator x:Name="needle" />            
        </telerik:RadRadialGauge.Indicators>
        <telerik:RadRadialGauge.Ranges>
            <telerik:GaugeRangesDefinition x:Name="rangeDefinition">
                <telerik:GaugeGradientRange x:Name="mainRange">
                    <telerik:RadGradientStop x:Name="mainRangeStart" />
                    <telerik:RadGradientStop x:Name="mainRangeEnd" />
                </telerik:GaugeGradientRange>
            </telerik:GaugeRangesDefinition>
        </telerik:RadRadialGauge.Ranges>
    </telerik:RadRadialGauge>

Code Behind:

axis.Minimum = MinValue;
axis.Maximum = MaxValue;

private void SetValue(float? value)
{
        if (value == null)
        {           
            barIndicator.Value = MinValue;
        }
        else
        {        
            barIndicator.Value = value.Value;
        }
}

 

1 Answer, 1 is accepted

Sort by
0
Maria
Telerik team
answered on 13 Jul 2023, 02:22 PM | edited on 22 Aug 2023, 02:06 PM

Hello Steve,

Thank you for the image and the code snippets.

The behavior is expected. It is by design and control's implementation. The bar indicator starts drawing from 0, if the value is -10, it will be drawn from 0 to -10. 

If you have min value -100 and max value 200 and value 30 and wants the bar to be drawn from -100 to 30 use RangeBarIndicator. For example: 

<telerik:RadRadialGauge x:Name="gauge">
    <telerik:RadRadialGauge.Axis>
        <telerik:GaugeLinearAxis Maximum="200"
                                                     Minimum="-100"
                                                     Step="25" />
    </telerik:RadRadialGauge.Axis>
    <telerik:RadRadialGauge.Indicators>
        <telerik:GaugeRangeBarIndicator From="-100" To="30"/>
        <telerik:GaugeNeedleIndicator Offset="30" Value="60" />
    </telerik:RadRadialGauge.Indicators>
    <telerik:RadRadialGauge.Ranges>
        <telerik:GaugeRangesDefinition>
            <telerik:GaugeRange Color="Green"
                                                        From="0"
                                                        To="150" />
            <telerik:GaugeGradientRange From="-20" To="200">
                <telerik:RadGradientStop Offset="150" Color="Yellow" />
                <telerik:RadGradientStop Offset="200" Color="Red" />
            </telerik:GaugeGradientRange>
        </telerik:GaugeRangesDefinition>
    </telerik:RadRadialGauge.Ranges>
</telerik:RadRadialGauge>

Regards,
Maria
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Gauge
Asked by
Steve
Top achievements
Rank 1
Iron
Answers by
Maria
Telerik team
Share this question
or