RadGauge Scales

GaugeScale is a base class for all scales in RadGauge. It has range and a set of indicators that are rendered according to the range of the scale they belong to. The scale manages the count and appearance of its ticks and labels. RadialScale instances also allow setting a start and sweep angle. It is possible to add more than one scale to a gauge as this example demonstrates.

Setup scales

In this example we are going to create a gauge that shows temperature in celsius and fahrenheit scale. To achieve this goal we will need 2 scales that show celsius and fahrenheit degrees and few indicators that display the current temperature and temperature ranges. The end result should look like this:

Figure 1. RadRadialGauge with multiple scales and indicators

The first thing to do is to add the 2 scales to the gauge. We should also customize their radius, start and sweep angle, ticks and labels count and offsets. Note that the radius should be in absolute value - values near to 1 will draw the scale near the edge of the gauge while values near to 0 will draw it near the center. As we can see from the screenshot the labels in the inner scale should be drawn inside the scale and the labels of the outer scale should be outside. This is easy to do in xml.

Example 1. Add scales to RadRadialGauge

<gauge:RadRadialGauge.scales>

    <gauge:RadialScale startAngle="135" sweepAngle="270" minimum="34" maximum="40" radius="0.6">
        <gauge:RadialScale.scaleStyle>
            <gauge:ScaleStyle majorTicksCount="7" minorTicksCount="9" lineThickness="2" labelsOffset="0.1" lineColor="gray" labelsCount="7" ticksOffset="0"/>
        </gauge:RadialScale.scaleStyle>
    </gauge:RadialScale>

    <gauge:RadialScale minimum="93.2" maximum="104" radius="0.7">
        <gauge:RadialScale.scaleStyle>
            <gauge:ScaleStyle majorTicksCount="7" minorTicksCount="20" lineThickness="2" labelsOffset="0.1" lineColor="gray" labelsCount="7" ticksOffset="0"
            labelsLayoutMode="Outer" ticksLayoutMode="Outer" />
        </gauge:RadialScale.scaleStyle>
    </gauge:RadialScale>

</gauge:RadRadialGauge.scales>

This is what you should see when you run the app:

Figure 2. RadRadialGauge with two scales

Add indicators

Now the scales are setup and we should add some indicators. We are going to add 2 radial bar indicators that show temperature ranges and a needle that points to a specific value. We will add the indicators to the inner scale. Add the following xml after the closing style tag of the first scale.

Example 2. Add indicators to RadialScale

<gauge:RadialScale.indicators>
    <gauge:RadialBarIndicator minimum="34" maximum="36" location="0.69">
        <gauge:RadialBarIndicator.indicatorStyle>
            <gauge:BarIndicatorStyle fillColor="blue" barWidth="0.08"/>
        </gauge:RadialBarIndicator.indicatorStyle>
    </gauge:RadialBarIndicator>

    <gauge:RadialBarIndicator minimum="36.05" maximum="40" location="0.69">
        <gauge:RadialBarIndicator.indicatorStyle>
            <gauge:BarIndicatorStyle fillColor="red" barWidth="0.08"/>
        </gauge:RadialBarIndicator.indicatorStyle>
    </gauge:RadialBarIndicator>

    <gauge:RadialNeedle value="36.5">
        <gauge:RadialNeedle.needleStyle>
            <gauge:NeedleStyle length="0.5" android:topWidth="8" ios:topWidth="3" android:bottomWidth="8" ios:bottomWidth="3"/>
        </gauge:RadialNeedle.needleStyle>
    </gauge:RadialNeedle>
</gauge:RadialScale.indicators>

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.

• Scales Example

Related articles you might find useful:

• Indicators