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

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 nativescript-ui-gauge/vue module is required inside your application. This module handles the registration of the custom directives and elements required by nativescript-vue.

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 application 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 v-tkRadialGaugeScales></RadialScale> and set the v-tkRadialGaugeScales inline directive to it.

const description = 'Getting Started';

export default {
  name: 'GettingStarted',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <RadRadialGauge>
      <RadialScale v-tkRadialGaugeScales minimum="0" maximum="6" radius="0.90">
        <ScaleStyle v-tkRadialScaleStyle majorTicksCount="7" minorTicksCount="9" lineThickness="0" labelsCount="7" ticksOffset="0" />
        <RadialBarIndicator v-tkRadialScaleIndicators minimum="0" maximum="1.2" location="0.97">
          <BarIndicatorStyle v-tkRadialBarIndicatorStyle fillColor="#dddddd" />
        </RadialBarIndicator>
        <RadialBarIndicator v-tkRadialScaleIndicators minimum="1.2" maximum="2.4" location="0.97">
          <BarIndicatorStyle v-tkRadialBarIndicatorStyle fillColor="#9DCA56" />
        </RadialBarIndicator>
        <RadialBarIndicator v-tkRadialScaleIndicators minimum="2.4" maximum="3.6" location="0.97">
          <BarIndicatorStyle v-tkRadialBarIndicatorStyle fillColor="#F0C44D" />
        </RadialBarIndicator>
        <RadialBarIndicator v-tkRadialScaleIndicators minimum="3.6" maximum="4.8" location="0.97">
          <BarIndicatorStyle v-tkRadialBarIndicatorStyle fillColor="#E27633" />
        </RadialBarIndicator>
        <RadialBarIndicator v-tkRadialScaleIndicators minimum="4.8" maximum="6" location="0.97">
          <BarIndicatorStyle v-tkRadialBarIndicatorStyle fillColor="#A7010E" />
        </RadialBarIndicator>
        <RadialNeedle v-tkRadialScaleIndicators :value="gaugeValue" />
      </RadialScale>
    </RadRadialGauge>
  </Page>
  `,
  data () {
    return {
      title: description,
      gaugeValue: 2,
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
  },
};