Linear Gauges

Linear gauges display a metric as a percentage of the length of a linear scale. They can be horizontal or vertical, depending on the setting of the direction property.

Use the controls below to see the effect of the main LinearGauge properties:

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 the gauge let theGauge = new gauge.LinearGauge('#theGauge', { isReadOnly: false, min: 0, max: 100, step: 5, value: 75, valueChanged: (s, e) => value.value = s.value, showRanges: false, ranges: [ { min: 0, max: 33, color: 'red' }, { min: 33, max: 66, color: 'yellow' }, { min: 66, max: 100, color: 'green' }, ] }); setDirection('Right'); // // change properties let value = new input.InputNumber('#value', { min: theGauge.min, max: theGauge.max, step: theGauge.step, value: theGauge.value, valueChanged: (s, e) => theGauge.value = s.value }); let direction = new input.ComboBox('#direction', { itemsSource: 'Left,Right,Up,Down'.split(','), text: 'Right', textChanged: (s, e) => setDirection(s.text) }); // function setDirection(dir) { let g = theGauge.hostElement.style; // theGauge.direction = dir; // switch (dir) { case 'Left': case 'Right': g.height = '2em'; g.width = '100%'; break; case 'Up': case 'Down': g.height = '100%'; g.width = '2em'; break; } } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Linear Gauges</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="value">value:</label> <div id="value"></div><br> </div> <div class="form-group"> <label for="direction">direction:</label> <div id="direction"></div><br> </div> </div> <div class="col-xs-6"> <div class="gauge-holder"> <div id="theGauge"></div> </div> </div> </div> </div> </body> </html> .gauge-holder { width: 80%; height: 200px; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); padding: 12px; } .wj-gauge { width: 100%; height: 100%; margin: auto auto; } .wj-combobox, .wj-inputnumber { width: 120px; } label { width: 100px; text-align: right; margin-right: 3px; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as gauge from '@grapecity/wijmo.gauge'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; 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 { setDirection(g: gauge.LinearGauge, value: string) { let el = g.hostElement.style; // g.direction = <any>value; // switch (value) { case 'Left': case 'Right': el.height = '2em'; el.width = '100%'; break; case 'Up': case 'Down': el.height = '100%'; el.width = '2em'; break; } } } // @NgModule({ imports: [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>Linear Gauges</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="value">value:</label> <wj-input-number id="value" [(min)]="theGauge.min" [(max)]="theGauge.max" [(step)]="theGauge.step" [(value)]="theGauge.value"></wj-input-number> </div> <div class="form-group"> <label for="direction">direction:</label> <wj-combo-box #direction id="direction" [itemsSource]="['Left', 'Right', 'Up', 'Down']" [text]="'Right'" (textChanged)="setDirection(theGauge, direction.text)"> </wj-combo-box> </div> </div> <div class="col-xs-6"> <div class="gauge-holder"> <wj-linear-gauge #theGauge [isReadOnly]="false" [min]="0" [max]="100" [step]="5" [value]="75" [showRanges]="false"> <wj-range [min]="0" [max]="33" [color]="'red'"></wj-range> <wj-range [min]="33" [max]="66" [color]="'yellow'"></wj-range> <wj-range [min]="66" [max]="100" [color]="'green'"></wj-range> </wj-linear-gauge> </div> </div> </div> </div> .gauge-holder { width: 80%; height: 200px; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); padding: 12px; } .wj-gauge { width: 100%; height: 100%; margin: auto auto; } .wj-combobox, .wj-inputnumber { width: 120px; } label { width: 100px; text-align: right; margin-right: 3px; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="value">value:</label> <wj-input-number id="value" :min=0 :max=100 :step=5 :value="theGauge.value" :value-changed="onValueChanged"></wj-input-number> </div> <div class="form-group"> <label for="direction">direction:</label> <wj-combo-box id="direction" :itemsSource="theGauge.directionSource" text="Right" :selectedIndexChanged="setDirection"> </wj-combo-box> </div> </div> <div class="col-xs-6"> <div class="gauge-holder"> <wj-linear-gauge :isReadOnly=false :min=0 :max=100 :step=5 :value="theGauge.value" :showRanges=false :direction="theGauge.direction" :value-changed="onValueChanged" :initialized="initGauge"> <wj-range :min=0 :max=33 color="red"></wj-range> <wj-range :min=33 :max=66 color="yellow"></wj-range> <wj-range :min=66 :max=100 color="green"></wj-range> </wj-linear-gauge> </div> </div> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import 'src/app.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.gauge'; import '@grapecity/wijmo.vue2.input'; let App = Vue.extend({ name: 'app', data: function(){ return { theGauge: { value: 75, direction: 0, directionSource: ['Left', 'Right', 'Up', 'Down'], instance: null } } }, methods:{ initGauge: function(_gauge){ this.theGauge.instance = _gauge; }, onValueChanged: function(s,e){ this.theGauge.value = s.value; }, setDirection: function(s,e){ let g = this.theGauge.instance, el = g.hostElement.style; // g.direction = s.text; // switch (s.text) { case 'Left': case 'Right': el.height = '2em'; el.width = '100%'; break; case 'Up': case 'Down': el.height = '100%'; el.width = '2em'; break; } } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Linear Gauges</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 wjGauge from '@grapecity/wijmo.react.gauge'; import * as wjInput from '@grapecity/wijmo.react.input'; class App extends React.Component { constructor(props) { super(props); this.state = { value: 75, direction: 'Right', directionSource: ['Left', 'Right', 'Up', 'Down'], }; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <div className="form-group"> <label htmlFor="value">value:</label> <wjInput.InputNumber id="value" min={0} max={100} step={5} initialized={control => this._valueInputNumber = control} value={this.state.value} valueChanged={() => this.onValueChanged("valueInputNumber")}></wjInput.InputNumber> </div> <div className="form-group"> <label htmlFor="direction">direction:</label> <wjInput.ComboBox id="direction" itemsSource={this.state.directionSource} text={this.state.direction} initialized={control => this._comboBox = control} selectedIndexChanged={this.setDirection.bind(this)}> </wjInput.ComboBox> </div> </div> <div className="col-xs-6"> <div className="gauge-holder"> <wjGauge.LinearGauge isReadOnly={false} min={0} max={100} step={5} value={this.state.value} showRanges={false} direction={this.state.direction} valueChanged={() => this.onValueChanged("valueLinearGauge")} initialized={control => this._linearGauge = control}> <wjGauge.Range min={0} max={33} color="red"></wjGauge.Range> <wjGauge.Range min={33} max={66} color="yellow"></wjGauge.Range> <wjGauge.Range min={66} max={100} color="green"></wjGauge.Range> </wjGauge.LinearGauge> </div> </div> </div> </div>); } onValueChanged(type) { let s; if (type == "valueInputNumber") { s = this._valueInputNumber; } else if (type == "valueLinearGauge") { s = this._linearGauge; } this.setState({ value: s.value }); } setDirection() { let s = this._comboBox; let el = this._linearGauge.hostElement.style; this.setState({ direction: s.text }); switch (s.text) { case 'Left': case 'Right': el.height = '2em'; el.width = '100%'; break; case 'Up': case 'Down': el.height = '100%'; el.width = '2em'; break; } } } 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>Linear Gauges</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> .container-fluid .gauge-holder { width: 80%; height: 200px; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); padding: 12px; } .container-fluid .gauge-holder .wj-lineargauge{ height: 2em; width: 100%; } .container-fluid .wj-gauge { width: 100%; height: 100%; margin: auto auto; } .wj-combobox, .wj-inputnumber { width: 120px; } label { width: 100px; text-align: right; } body { margin-bottom: 24pt; }