# wijmo.vue2.gauge Module ## Content

wijmo.vue2.gauge Module

Contains Vue 2 and 3 components for the wijmo.gauge module.

Variables

Variables

WjBulletGraph

WjBulletGraph: any

Vue component for the wijmo.gauge.BulletGraph control.

The wj-bullet-graph component may contain a wijmo.vue2.gauge.WjRange child component.

The component supports all properties and events of the pure JavaScript wijmo.gauge.BulletGraph control it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in markup. The signature of the handler function is the same as any other Wijmo event handlers.

WjLinearGauge

WjLinearGauge: any

Vue component for the wijmo.gauge.LinearGauge control.

The wj-linear-gauge component may contain a wijmo.vue2.gauge.WjRange child component.

The component supports all properties and events of the pure JavaScript wijmo.gauge.LinearGauge control it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in markup. The signature of the handler function is the same as any other Wijmo event handlers.

The example below shows how to instantiate and initialize a wijmo.gauge.LinearGauge control using Vue markup:

<wj-linear-gauge
    :min="0" :max="1000" :step="50" :is-read-only="false"
    format="c0" :thumb-size="20"
    :show-ranges="false"
    :value="sales"
    :value-changed="salesChanged">
    <wj-range wj-property="face" :thickness="0.5">
    </wj-range>
    <wj-range wj-property="pointer" :thickness="0.5">
    </wj-range>
    <wj-range :min="0" :max="333" color="red">
    </wj-range>
    <wj-range :min="333" :max="666" color="gold">
    </wj-range>
    <wj-range :min="666" :max="1000" color="green">
    </wj-range>
</wj-linear-gauge>

The code min, max, step, and isReadOnly properties to define the range of the gauge and to allow users to edit its value. Next, it binds the gauge's value property to a sales variable in the controller.

Then it sets the format, thumbSize, and showRanges properties to define the appearance of the gauge. Finally, the markup sets the thickness of the face and pointer ranges, and extra ranges that will control the color of the value range depending on the gauge's current value.

WjRadialGauge

WjRadialGauge: any

Vue component for the wijmo.gauge.RadialGauge control.

The wj-radial-gauge component may contain a wijmo.vue2.gauge.WjRange child component.

The component supports all properties and events of the pure JavaScript wijmo.gauge.RadialGauge control it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in markup. The signature of the handler function is the same as any other Wijmo event handlers.

The example below shows how to instantiate and initialize a wijmo.gauge.RadialGauge control using Vue markup:

<wj-radial-gauge
    :min="0" :max="1000" :step="50" :is-read-only="false"
    format="c0" :thumb-size="12" :show-text="Value"
    :show-ranges="false"
    :value="sales"
    :value-changed="salesChanged">
    <wj-range wj-property="face" :thickness="0.5">
    </wj-range>
    <wj-range wj-property="pointer" :thickness="0.5">
    </wj-range>
    <wj-range :min="0" :max="333" color="red">
    </wj-range>
    <wj-range :min="333" :max="666" color="gold">
    </wj-range>
    <wj-range :min="666" :max="1000" color="green">
    </wj-range>
</wj-radial-gauge>

The code min, max, step, and isReadOnly properties to define the range of the gauge and to allow users to edit its value. Next, it binds the gauge's value property to a sales variable in the controller.

Then it sets the format, thumbSize, and showRanges properties to define the appearance of the gauge. Finally, the markup sets the thickness of the face and pointer ranges, and extra ranges that will control the color of the value range depending on the gauge's current value.

WjRange

WjRange: any

Vue component for the wijmo.gauge.Range class.

The wj-range component should be contained in one of the following components: wijmo.vue2.gauge.WjLinearGauge , wijmo.vue2.gauge.WjBulletGraph or wijmo.vue2.gauge.WjRadialGauge.

The component supports all properties and events of the pure JavaScript wijmo.gauge.Range class it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in markup. The signature of the handler function is the same as any other Wijmo event handlers.