RadGauge Indicators

Indicators in RadGauge are visual elements that point to value or visualize a range of values on a GaugeScale. They should be added to a scale and their values are aligned to the scale the indicators belong to. Currently RadGauge supports bar and needle indicators.

Bar Indicators

Bar indicators are used to visualize a range of values on a scale. Customization of the bars is trivial. Changing their range, color, position and width is achieved by just setting a property. Bar indicators in RadGauge have a default animation that animates their maximum value. Below is an example how to create several RadialBarIndicator objects and add them to RadialScale. The example shows how to create and add the indicators in xml and then animate them when we navigate to the page. Note that the indicator's width and location are normalized values. They are calculated based on the size of the gauge.

Example 1. Add bar indicators to a scale in xml

<gauge:RadRadialGauge id="gaugeView" margin="10">
    <gauge:RadRadialGauge.scales>

        <gauge:RadialScale startAngle="0" sweepAngle="360" minimum="0" maximum="100" radius="0.9">
            <gauge:RadialScale.scaleStyle>
                <gauge:ScaleStyle ticksVisible="false" labelsVisible="false" lineThickness="0" />
            </gauge:RadialScale.scaleStyle>

            <gauge:RadialScale.indicators>
                <gauge:RadialBarIndicator minimum="0" maximum="100" location="0.5">
                    <gauge:RadialBarIndicator.indicatorStyle>
                        <gauge:BarIndicatorStyle fillColor="rgba(224,151,36,0.5)" barWidth="0.2"/>
                    </gauge:RadialBarIndicator.indicatorStyle>
                </gauge:RadialBarIndicator>

                <gauge:RadialBarIndicator minimum="0" maximum="0" location="0.5" isAnimated="true">
                    <gauge:RadialBarIndicator.indicatorStyle>
                        <gauge:BarIndicatorStyle cap="Round" fillColor="rgba(224,151,36,1)" barWidth="0.2"/>
                    </gauge:RadialBarIndicator.indicatorStyle>
                </gauge:RadialBarIndicator>

                <gauge:RadialBarIndicator minimum="0" maximum="100" location="0.75">
                    <gauge:RadialBarIndicator.indicatorStyle>
                        <gauge:BarIndicatorStyle fillColor="rgba(196,241,57,0.5)" barWidth="0.2"/>
                    </gauge:RadialBarIndicator.indicatorStyle>
                </gauge:RadialBarIndicator>

                <gauge:RadialBarIndicator minimum="0" maximum="0" location="0.75" isAnimated="true">
                    <gauge:RadialBarIndicator.indicatorStyle>
                        <gauge:BarIndicatorStyle cap="Round" fillColor="rgba(196,241,57,1)" barWidth="0.2"/>
                    </gauge:RadialBarIndicator.indicatorStyle>
                </gauge:RadialBarIndicator>

                <gauge:RadialBarIndicator minimum="0" maximum="100" location="1">
                    <gauge:RadialBarIndicator.indicatorStyle>
                        <gauge:BarIndicatorStyle fillColor="rgba(132,235,247,0.5)" barWidth="0.2"/>
                    </gauge:RadialBarIndicator.indicatorStyle>
                </gauge:RadialBarIndicator>

                <gauge:RadialBarIndicator minimum="0" maximum="0" location="1" isAnimated="true">
                    <gauge:RadialBarIndicator.indicatorStyle>
                        <gauge:BarIndicatorStyle cap="Round" fillColor="rgba(132,235,247,1)" barWidth="0.2"/>
                    </gauge:RadialBarIndicator.indicatorStyle>
                </gauge:RadialBarIndicator>
            </gauge:RadialScale.indicators>

        </gauge:RadialScale>
    </gauge:RadRadialGauge.scales>
</gauge:RadRadialGauge>

This is what you should see if you run the example now:

Figure 1. Radial gauge with bar indicators

We have set the isAnimated property to true to the opaque indicators. Next thing to do is to set their maximum value on the navigatedTo event handler and the indicators will animate to their new maximum value.

Example 2. Animating the bar indicators

export function onNavigatedTo(args) {
    let gaugeView: RadRadialGauge = <RadRadialGauge>Frame.topmost().getViewById("gaugeView");
    let scale: RadialScale = <RadialScale>gaugeView.scales.getItem(0);
    for (let i = 0; i < scale.indicators.length; i++) {
        let barIndicator: RadialBarIndicator = <RadialBarIndicator>scale.indicators.getItem(i);
        if (barIndicator.maximum === 0) {
            barIndicator.maximum = i * 15;
        }
    }
}

Figure 2. Bar indicators after animation

Needle Indicator

The needle indicator is used to point to a specific value. You can easily customize its length, top and bottom width. It is also possible to change the radius of the needle's circle or to offset the needle by just setting the corresponding properties. The length of the needle is again value between 0 and 1. The needle also supports animations when its value is changed. Adding a needle indicator to a scale is the same like adding a bar indicator.

Example 3. Add needle to a scale in xml

<gauge:RadialScale.indicators>
    <gauge:RadialNeedle isAnimated="true" animationDuration="500">
        <gauge:RadialNeedle.needleStyle>
            <gauge:NeedleStyle length="0.8" android:topWidth="8" android:bottomWidth="8" ios:topWidth="2" ios:bottomWidth="2" />    
        </gauge:RadialNeedle.needleStyle>
    </gauge:RadialNeedle>
</gauge:RadialScale.indicators>

After the needle is added to a scale and we have set its isAnimated property to true we can animate it changing its value when a button is tapped.

Example 4. Animated the needle on button tap

export function on60Tapped() {
    needle.value = 60;
}

export function on80Tapped() {
    needle.value = 80;
}

export function on120Tapped() {
    needle.value = 120;
}

export function on160Tapped() {
    needle.value = 160;
}

The example looks like this:

Figure 3. Needle indicator

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.

• Indicators Example

Related articles you might find useful:

• Scales