Getting Started

This article will walk you through the setting up of a simple RadRadialGauge.

In order to set up the gauge you need to define the elements of the gauge you want to use. You need to set the axis minimum, maximum and step, so that the values of the indicators and the ranges are within the axis range and they can be positioned properly. Normally you will need at least one indicator, but you can add as many as needed. Adding gauge ranges is not necessary but is often valuable as they help give additional information about values within that range, for example too low, too high, or normal.

Before you proceed, please, take a look at these articles and follow the instructions to setup your app:

Setting up the gauge

Below you can see an example of a RadRadialGauge with a linear axis, two indicators and three gauge ranges.

Add the following namespaces:

xmlns:telerikCommon="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common"
xmlns:telerikGauges="clr-namespace:Telerik.XamarinForms.DataVisualization.Gauges;assembly=Telerik.XamarinForms.DataVisualization"
using Telerik.XamarinForms.Common;
using Telerik.XamarinForms.DataVisualization.Gauges;

Proceed with defining the component:

<telerikGauges:RadRadialGauge x:Name="gauge">
    <telerikGauges:RadRadialGauge.Axis>
        <telerikGauges:GaugeLinearAxis Maximum="200"
                                       Minimum="0"
                                       Step="25" />
    </telerikGauges:RadRadialGauge.Axis>
    <telerikGauges:RadRadialGauge.Indicators>
        <telerikGauges:GaugeNeedleIndicator Offset="30" Value="60" />
        <telerikGauges:GaugeShapeIndicator Value="80" />
    </telerikGauges:RadRadialGauge.Indicators>
    <telerikGauges:RadRadialGauge.Ranges>
        <telerikGauges:GaugeRangesDefinition>
            <telerikGauges:GaugeRange Color="Green"
                                      From="0"
                                      To="150" />
            <telerikGauges:GaugeGradientRange From="150" To="200">
                <telerikCommon:RadGradientStop Offset="150" Color="Yellow" />
                <telerikCommon:RadGradientStop Offset="200" Color="Red" />
            </telerikGauges:GaugeGradientRange>
        </telerikGauges:GaugeRangesDefinition>
    </telerikGauges:RadRadialGauge.Ranges>
</telerikGauges:RadRadialGauge>
RadRadialGauge gauge = new RadRadialGauge();
gauge.Axis = new GaugeLinearAxis { Minimum = 0, Maximum = 200, Step = 25 };
gauge.Indicators.Add(new GaugeNeedleIndicator { Value = 60, Offset = 30, });
gauge.Indicators.Add(new GaugeShapeIndicator { Value = 80 });
gauge.Ranges.Ranges.Add(new GaugeRange { From = 0, To = 150, Color = Color.Green });
GaugeGradientRange gradientRange = new GaugeGradientRange { From = 150, To = 200 };
gradientRange.GradientStops.Add(new RadGradientStop { Color = Color.Yellow, Offset = 150 });
gradientRange.GradientStops.Add(new RadGradientStop { Color = Color.Red, Offset = 200 });
gauge.Ranges.Ranges.Add(gradientRange);

Here is the result:

Gauge example

You can follow this tutorial to set up also the RadVerticalGauge and RadHorizontalGauge controls which expose the same API.

Gauge types

There are 3 gauge types that you can use to display different layout - radial and linear. You can read more about this in the Gauge Types section.

See Also