Basic Properties

The key properties common to all Wijmo gauge classes are: min, max, and value.

The showText property is used to show the min/max/value properties as text on the gauge.

Wijmo gauges can also be used as input controls. If you set their isReadOnly property to false, users will be able to change the value using the mouse, keyboard, or touch.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as input from '@grapecity/wijmo.input'; import * as gauge from '@grapecity/wijmo.gauge'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create gauges let theRadialGauge = new gauge.RadialGauge('#theRadialGauge', { min: 0, max: 100, value: 75, showText: 'None', valueChanged: (s, e) => { valueCtl.value = s.value; } }); let theLinearGauge = new gauge.LinearGauge('#theLinearGauge', { min: 0, max: 100, value: 75, showText: 'None', valueChanged: (s, e) => { valueCtl.value = s.value; } }); let theBulletGraph = new gauge.BulletGraph('#theBulletGraph', { min: 0, max: 100, value: 75, target: 60, bad: 50, good: 70, showText: 'None', valueChanged: (s, e) => { valueCtl.value = s.value; } }); function getGaugeProp(prop) { return theRadialGauge[prop]; } function setGaugeProp(prop, value) { theRadialGauge[prop] = value; theLinearGauge[prop] = value; theBulletGraph[prop] = value; } // // create controls to change gauge properties let minCtl = new input.InputNumber('#min', { step: 10, value: getGaugeProp('min'), valueChanged: (s, e) => { setGaugeProp('min', s.value); } }); let maxCtl = new input.InputNumber('#max', { step: 10, value: getGaugeProp('max'), valueChanged: (s, e) => { setGaugeProp('max', s.value); } }); let valueCtl = new input.InputNumber('#value', { step: 10, value: getGaugeProp('value'), valueChanged: (s, e) => { setGaugeProp('value', s.value); } }); let showTextCtl = new input.ComboBox('#showText', { itemsSource: 'None,Value,MinMax,All'.split(','), text: getGaugeProp('showText'), textChanged: (s, e) => { setGaugeProp('showText', s.text); } }); document.getElementById('isReadOnly').addEventListener('click', (e) => { setGaugeProp('isReadOnly', e.target.checked); }); let stepCtl = new input.InputNumber('#step', { min: 1, step: 1, value: getGaugeProp('step'), valueChanged: (s, e) => { setGaugeProp('step', s.value); } }); document.getElementById('isAnimated').addEventListener('click', (e) => { setGaugeProp('isAnimated', e.target.checked); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Gauge Basics</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="min">min:</label> <div id="min"></div> </div> <div class="form-group"> <label for="max">max:</label> <div id="max"></div> </div> <div class="form-group"> <label for="value">value:</label> <div id="value"></div> </div> <div class="form-group"> <label for="showText">showText:</label> <div id="showText"></div> </div> <div class="form-check"> <label for="isReadOnly">isReadOnly:</label> <input id="isReadOnly" type="checkbox" checked="checked" class="form-check-input"> </div> <div class="form-group"> <label for="step">step:</label> <div id="step"></div> </div> <div class="form-check"> <label for="isAnimated">isAnimated:</label> <input id="isAnimated" type="checkbox" checked="checked" class="form-check-input"> </div> </div> <div class="col-xs-6"> <div id="theRadialGauge"></div> <div id="theLinearGauge"></div> <div id="theBulletGraph"></div> </div> </div> </div> </body> </html> label { width: 150px; text-align: right; margin-right: 3px; } .wj-inputnumber, .wj-combobox { width: 140px; } .wj-gauge { margin: 20px auto; } .wj-radialgauge { height: 100px; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjGaugeModule } from '@grapecity/wijmo.angular2.gauge'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { gauge = { min: 0, max: 100, value: 75, step: 1, showText: 'None', isReadOnly: true, isAnimated: true }; } // @NgModule({ imports: [FormsModule, WjGaugeModule, WjInputModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Gauge Basics</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="min">min:</label> <wj-input-number id="min" [step]="10" [(value)]="gauge.min"></wj-input-number> </div> <div class="form-group"> <label for="max">max:</label> <wj-input-number id="max" [step]="10" [(value)]="gauge.max"></wj-input-number> </div> <div class="form-group"> <label for="value">value:</label> <wj-input-number id="value" [step]="10" [(value)]="gauge.value"></wj-input-number> </div> <div class="form-group"> <label for="showText">showText:</label> <wj-combo-box id="showText" [(text)]="gauge.showText" [itemsSource]="['None','Value','MinMax','All']"> </wj-combo-box> </div> <div class="form-check"> <label for="isReadOnly">isReadOnly:</label> <input id="isReadOnly" type="checkbox" class="form-check-input" [(ngModel)]="gauge.isReadOnly"> </div> <div class="form-group"> <label for="step">step:</label> <wj-input-number id="step" [min]="1" [step]="1" [(value)]="gauge.step"></wj-input-number> </div> <div class="form-check"> <label for="isAnimated">isAnimated:</label> <input id="isAnimated" type="checkbox" class="form-check-input" [(ngModel)]="gauge.isAnimated"> </div> </div> <div class="col-xs-6"> <wj-radial-gauge [min]="gauge.min" [max]="gauge.max" [(value)]="gauge.value" [showText]="gauge.showText" [step]="gauge.step" [isReadOnly]="gauge.isReadOnly" [isAnimated]="gauge.isAnimated"></wj-radial-gauge> <wj-linear-gauge [min]="gauge.min" [max]="gauge.max" [(value)]="gauge.value" [showText]="gauge.showText" [step]="gauge.step" [isReadOnly]="gauge.isReadOnly" [isAnimated]="gauge.isAnimated"></wj-linear-gauge> <wj-bullet-graph [min]="gauge.min" [max]="gauge.max" [(value)]="gauge.value" [showText]="gauge.showText" [step]="gauge.step" [isReadOnly]="gauge.isReadOnly" [isAnimated]="gauge.isAnimated" [target]="60" [bad]="50" [good]="70"></wj-bullet-graph> </div> </div> </div> label { width: 150px; text-align: right; margin-right: 3px; } .wj-inputnumber, .wj-combobox { width: 140px; } .wj-gauge { margin: 20px auto; } .wj-radialgauge { height: 100px; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="min">min:</label> <wj-input-number id="min" :step=10 :value="gauge.min" :value-changed="onInputValueChanged"></wj-input-number> </div> <div class="form-group"> <label for="max">max:</label> <wj-input-number id="max" :step=10 :value="gauge.max" :value-changed="onInputValueChanged"></wj-input-number> </div> <div class="form-group"> <label for="value">value:</label> <wj-input-number id="value" :step=10 :value="gauge.value" :value-changed="onInputValueChanged"></wj-input-number> </div> <div class="form-group"> <label for="showText">showText:</label> <wj-combo-box id="showText" :text="gauge.showText" :items-source="gauge.comboSource" :selectedIndexChanged="onComboValueChanged"> </wj-combo-box> </div> <div class="form-check"> <label for="isReadOnly">isReadOnly:</label> <input id="isReadOnly" type="checkbox" class="form-check-input" v-model="gauge.isReadOnly"> </div> <div class="form-group"> <label for="step">step:</label> <wj-input-number id="step" :min=1 :step=1 :value="gauge.step" :value-changed="onInputValueChanged"></wj-input-number> </div> <div class="form-check"> <label for="isAnimated">isAnimated:</label> <input id="isAnimated" type="checkbox" class="form-check-input" v-model="gauge.isAnimated"> </div> </div> <div class="col-xs-6"> <wj-radial-gauge :min="gauge.min" :max="gauge.max" :value="gauge.value" :showText="gauge.showText" :step="gauge.step" :isReadOnly="gauge.isReadOnly" :isAnimated="gauge.isAnimated" :value-changed="onGaugeValueChanged"></wj-radial-gauge> <wj-linear-gauge :min="gauge.min" :max="gauge.max" :value="gauge.value" :showText="gauge.showText" :step="gauge.step" :isReadOnly="gauge.isReadOnly" :isAnimated="gauge.isAnimated" :value-changed="onGaugeValueChanged"></wj-linear-gauge> <wj-bullet-graph :min="gauge.min" :max="gauge.max" :value="gauge.value" :showText="gauge.showText" :step="gauge.step" :isReadOnly="gauge.isReadOnly" :isAnimated="gauge.isAnimated" :target=60 :bad=50 :good=70 :value-changed="onGaugeValueChanged"></wj-bullet-graph> </div> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.gauge'; import '@grapecity/wijmo.vue2.input'; let App = Vue.extend({ name: 'app', data: function(){ return { gauge: { min: 0, max: 100, value: 75, step: 1, showText: 'None', isReadOnly: true, isAnimated: true, comboSource: ['None','Value','MinMax','All'] } } }, methods: { onInputValueChanged: function(s, e){ this.gauge[s.hostElement.id] = s.value; }, onComboValueChanged: function(s,e){ this.gauge.showText = s.selectedValue; }, onGaugeValueChanged: function(s, e){ this.gauge.value = s.value; } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> label { width: 150px; text-align: right; } .container-fluid .wj-inputnumber, .container-fluid .wj-combobox { width: 140px; } .container-fluid .wj-gauge { margin: 20px auto; } .container-fluid .wj-radialgauge { height: 100px; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Gauge Basics</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> import './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjInput from '@grapecity/wijmo.react.input'; import * as wjGauge from '@grapecity/wijmo.react.gauge'; class App extends React.Component { constructor(props) { super(props); this._comboSource = ['None', 'Value', 'MinMax', 'All']; this.state = { min: 0, max: 100, value: 75, step: 1, showText: 'None', isReadOnly: true, isAnimated: true }; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <div className="form-group"> <label htmlFor="min">min:</label> <wjInput.InputNumber id="min" step={10} value={this.state.min} valueChanged={this.inputValueChanged.bind(this, 'min')}> </wjInput.InputNumber> </div> <div className="form-group"> <label htmlFor="max">max:</label> <wjInput.InputNumber id="max" step={10} value={this.state.max} valueChanged={this.inputValueChanged.bind(this, 'max')}> </wjInput.InputNumber> </div> <div className="form-group"> <label htmlFor="value">value:</label> <wjInput.InputNumber id="value" step={10} value={this.state.value} valueChanged={this.inputValueChanged.bind(this, 'value')}> </wjInput.InputNumber> </div> <div className="form-group"> <label htmlFor="showText">showText:</label> <wjInput.ComboBox id="showText" text={this.state.showText} itemsSource={this._comboSource} selectedIndexChanged={this._comboValueChanged.bind(this)}> </wjInput.ComboBox> </div> <div className="form-check"> <label htmlFor="isReadOnly">isReadOnly:</label> <input id="isReadOnly" type="checkbox" className="form-check-input" checked={this.state.isReadOnly} onChange={this._setReadOnly.bind(this)}/> </div> <div className="form-group"> <label htmlFor="step">step:</label> <wjInput.InputNumber id="step" min={1} step={1} value={this.state.step} valueChanged={this.inputValueChanged.bind(this, 'step')}> </wjInput.InputNumber> </div> <div className="form-check"> <label htmlFor="isAnimated">isAnimated:</label> <input id="isAnimated" type="checkbox" className="form-check-input" checked={this.state.isAnimated} onChange={this._setAnimated.bind(this)}/> </div> </div> <div className="col-xs-6"> <wjGauge.RadialGauge min={this.state.min} max={this.state.max} value={this.state.value} showText={this.state.showText} step={this.state.step} isReadOnly={this.state.isReadOnly} isAnimated={this.state.isAnimated} valueChanged={this._gaugeValueChanged.bind(this)}> </wjGauge.RadialGauge> <wjGauge.LinearGauge min={this.state.min} max={this.state.max} value={this.state.value} showText={this.state.showText} step={this.state.step} isReadOnly={this.state.isReadOnly} isAnimated={this.state.isAnimated} valueChanged={this._gaugeValueChanged.bind(this)}> </wjGauge.LinearGauge> <wjGauge.BulletGraph min={this.state.min} max={this.state.max} value={this.state.value} showText={this.state.showText} step={this.state.step} isReadOnly={this.state.isReadOnly} isAnimated={this.state.isAnimated} target={60} bad={50} good={70} valueChanged={this._gaugeValueChanged.bind(this)}> </wjGauge.BulletGraph> </div> </div> </div>); } _comboValueChanged(sender) { this.setState({ showText: sender.selectedValue }); } _gaugeValueChanged(sender) { this.setState({ value: sender.value }); } inputValueChanged(stateProp, sender) { this.setState({ [stateProp]: sender.value }); } _setReadOnly() { this.setState({ isReadOnly: !this.state.isReadOnly }); } _setAnimated() { this.setState({ isAnimated: !this.state.isAnimated }); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Gauge Basics</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> label { width: 150px; text-align: right; } .container-fluid .wj-inputnumber, .container-fluid .wj-combobox { width: 140px; } .container-fluid .wj-gauge { margin: 20px auto; } .container-fluid .wj-radialgauge { height: 100px; } body { margin-bottom: 24pt; }