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 Component

Before proceeding make use all of the required imports from the nativescript-telerik-ui plugin have been added to your app's ngModule, more details can be found here.

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.

In order to setup an RadRadialGauge in your Component HTML you will need to follow this steps:

  • First start by declaring the <RadRadialGauge></RadRadialGauge> tags
  • The main elements that are visualized by the gauge are its scales, in order to declare multiple scales simply declare the <RadialScale tkRadialGaugeScales></RadialScale> and set the tkRadialGaugeScales inline directive to it. The tkRadialGaugeScales is an custom inline directive that 'links' the RadialScale to the RadRadialGauge.
<RadRadialGauge>
    <RadialScale tkRadialGaugeScales minimum="0" maximum="6" radius="0.90">
        <ScaleStyle tkRadialScaleStyle majorTicksCount="7" minorTicksCount="9" lineThickness="0" labelsCount="7" ticksOffset="0"></ScaleStyle>

        <RadialBarIndicator tkRadialScaleIndicators minimum="0" maximum="1.2" location="0.97">
            <BarIndicatorStyle tkRadialBarIndicatorStyle fillColor="#dddddd"></BarIndicatorStyle>
        </RadialBarIndicator>
        <RadialBarIndicator tkRadialScaleIndicators minimum="1.2" maximum="2.4" location="0.97">
            <BarIndicatorStyle tkRadialBarIndicatorStyle fillColor="#9DCA56"></BarIndicatorStyle>
        </RadialBarIndicator>
        <RadialBarIndicator tkRadialScaleIndicators minimum="2.4" maximum="3.6" location="0.97">
            <BarIndicatorStyle tkRadialBarIndicatorStyle fillColor="#F0C44D"></BarIndicatorStyle>
        </RadialBarIndicator>
        <RadialBarIndicator tkRadialScaleIndicators minimum="3.6" maximum="4.8" location="0.97">
            <BarIndicatorStyle tkRadialBarIndicatorStyle fillColor="#E27633"></BarIndicatorStyle>
        </RadialBarIndicator>
        <RadialBarIndicator tkRadialScaleIndicators minimum="4.8" maximum="6" location="0.97">
            <BarIndicatorStyle tkRadialBarIndicatorStyle fillColor="#A7010E"></BarIndicatorStyle>
        </RadialBarIndicator>

        <RadialNeedle tkRadialScaleIndicators value="2"></RadialNeedle>
    </RadialScale>
</RadRadialGauge>
import { Component } from "@angular/core";

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

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: