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. The code snippets from this section are available as a standalone demo application.

Figure 1. Radial gauge with needle and bar indicators

NativeScriptUI-Getting-Started-iOS

Installation

Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-gauge

Adding a RadRadialGauge to Your Page

Then, in order to add a RadRadialGauge instance in a page of your application, you need to define the following XML namespace:

xmlns:gauge="nativescript-ui-gauge".

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 similar - 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.

Getting Started Example

NativeScript Core