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

Installation

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

tns plugin add nativescript-ui-gauge

Adding a RadRadialGauge to your Component

Before proceeding, make sure that the NativeScriptUIGaugeModule from the nativescript-ui-gauge plugin has been imported in an ngModule in your app. For example:

import { NativeScriptUIGaugeModule } from "nativescript-ui-gauge/angular";

@NgModule({
    schemas: [NO_ERRORS_SCHEMA],
    imports: [
        ....
        NativeScriptUIGaugeModule,
        ....
    ],
    declarations: [
        ....
    ]
})
export class GaugesExamplesModule { }

Demo.

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.

• Getting Started Example

Related articles you might find useful:

• Indicators
• Scales