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

• First we need to declare the RadRadialGauge and its RadialScale as described in the Getting Started
• After that we should set the TitleStyle and SubtitleStyle of the RadRadialGauge. This is easily achieved by declaring the <TitleStyle tkRadialGaugeTitleStyle><\TitleStyle> and <SubtitleStyle tkRadialGaugeSubtitleStyle></SubtitleStyle>. Notice the tkRadialGaugeTitleStyle and tkRadialGaugeSubtitleStyle those are custom inline directives that 'link' those styles to the RadRadialGauge.
• Next we should customize the RadialScale bu declaring an <ScaleStyle tkRadialScaleStyle></ScaleStyle>, again notice the tkRadialScaleStyle inline directive.
• Finally we can also customize the way the indicators of the RadialScale by creating an BarIndicatorStyle instance by adding the following tag to the HTML <BarIndicatorStyle tkRadialBarIndicatorStyle></BarIndicatorStyle> and setting it properties.

The next code snippet shows the described approach:

<RadRadialGauge title="celsius" subtitle="fahrenheit">
    <TitleStyle tkRadialGaugeTitleStyle textColor="gray" ios:textSize="12" ios:verticalOffset="30" android:verticalOffset="90"></TitleStyle>
    <SubtitleStyle tkRadialGaugeSubtitleStyle textColor="gray"></SubtitleStyle>

    <RadialScale tkRadialGaugeScales startAngle="135" sweepAngle="270" minimum="34" maximum="40" radius="0.6">
        <ScaleStyle tkRadialScaleStyle majorTicksCount="7" minorTicksCount="9" lineThickness="2" labelsOffset="0.1" lineColor="gray"
            labelsCount="7" ticksOffset="0"></ScaleStyle>
        <RadialBarIndicator tkRadialScaleIndicators minimum="34" maximum="36" location="0.69">
            <BarIndicatorStyle tkRadialBarIndicatorStyle fillColor="blue" barWidth="0.08"></BarIndicatorStyle>
        </RadialBarIndicator>

        <RadialBarIndicator tkRadialScaleIndicators minimum="36.05" maximum="40" location="0.69">
            <BarIndicatorStyle tkRadialBarIndicatorStyle fillColor="red" barWidth="0.08"></BarIndicatorStyle>
        </RadialBarIndicator>

        <RadialNeedle tkRadialScaleIndicators value="36.5">
            <NeedleStyle tkRadialNeedleStyle length="0.5" android:topWidth="8" ios:topWidth="3" android:bottomWidth="8" ios:bottomWidth="3"></NeedleStyle>
        </RadialNeedle>
    </RadialScale>

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

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    selector: "tk-gauges-scales",
    templateUrl: "gauges-scales.component.html"
})
export class GaugesScalesComponent  {
    constructor() { }
}

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

Figure 2. RadRadialGauge with two 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.

• Scales Example

Related articles you might find useful:

• Indicators