RadGauge: Getting Started

This article will guide you through the process of adding a RadRadialGauge instance to a page in a {N} application and adding scales and indicators to it.

Figure 1. Radial gauge with needle and bar indicators

NativeScriptUI-Getting-Started-iOS NativeScriptUI-Getting-Started-Android

Adding a RadRadialGauge to your page

First thing you need to do before adding the RadRadialGauge to the page is to define its namespace:

xmlns:gauge="nativescript-telerik-ui-pro/gauges"

Before adding RadGauge for NativeScript, make sure you have installed Progress NativeScript UI Pro.

Here's how to add a RadGauge instance to your page:

Example 1: Add a RadRadialGauge to your page.

<gauge:RadRadialGauge> 
</gauge:RadRadialGauge>

Adding scale with indicators

To display data the RadRadialGauge instance is not enough. We should add also add a scale with at least on indicator. In this example we are going to add a RadialScale with several RadialBarIndicator instances and one RadialNeedle. To add a scale to the RadRadialGauge we should use its scales property. Adding indicators to the scale is similara - we are using RadialScale's indicators property.

Example 2: Add a scale with indicators to the gauge.

<gauge:RadRadialGauge.scales>

    <gauge:RadialScale minimum="0" maximum="6" radius="0.90">
        <gauge:RadialScale.scaleStyle>
            <gauge:ScaleStyle majorTicksCount="7" minorTicksCount="9" lineThickness="0" labelsCount="7" ticksOffset="0"/>
        </gauge:RadialScale.scaleStyle>

        <gauge:RadialScale.indicators>
            <gauge:RadialBarIndicator minimum="0" maximum="1.2" location="0.97">
                <gauge:RadialBarIndicator.indicatorStyle>
                    <gauge:BarIndicatorStyle fillColor="#dddddd" />
                </gauge:RadialBarIndicator.indicatorStyle> 
            </gauge:RadialBarIndicator>

            <gauge:RadialBarIndicator minimum="1.2" maximum="2.4" location="0.97">
                <gauge:RadialBarIndicator.indicatorStyle>
                    <gauge:BarIndicatorStyle fillColor="#9DCA56" />
                </gauge:RadialBarIndicator.indicatorStyle> 
            </gauge:RadialBarIndicator>

            <gauge:RadialBarIndicator minimum="2.4" maximum="3.6" location="0.97">
                <gauge:RadialBarIndicator.indicatorStyle>
                    <gauge:BarIndicatorStyle fillColor="#F0C44D" />
                </gauge:RadialBarIndicator.indicatorStyle> 
            </gauge:RadialBarIndicator>

            <gauge:RadialBarIndicator minimum="3.6" maximum="4.8" location="0.97">
                <gauge:RadialBarIndicator.indicatorStyle>
                    <gauge:BarIndicatorStyle fillColor="#E27633" />
                </gauge:RadialBarIndicator.indicatorStyle> 
            </gauge:RadialBarIndicator>

            <gauge:RadialBarIndicator minimum="4.8" maximum="6" location="0.97">
                <gauge:RadialBarIndicator.indicatorStyle>
                    <gauge:BarIndicatorStyle fillColor="#A7010E" />
                </gauge:RadialBarIndicator.indicatorStyle>
            </gauge:RadialBarIndicator>

            <gauge:RadialNeedle value="2" />
        </gauge:RadialScale.indicators>
    </gauge:RadialScale>

</gauge:RadRadialGauge.scales>

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful: