Ranges

Wijmo gauges are composed of Range objects. By default, ranges appear as part of the gauge background. This way you can show 'zones' within the gauge, like 'good', 'average', and 'bad' for example.

If you set the gauge's showRanges property to false, the additional ranges are not shown. Instead, they are used to automatically set the color of the pointer based on the current gauge value.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as gauge from '@grapecity/wijmo.gauge'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let radThickness = 0.2; let linThickness = 0.4; // // create gauges let theRadialGauge = new gauge.RadialGauge('#theRadialGauge', { min: 0, max: 100, value: 75, isReadOnly: false, step: 10, pointer: { thickness: radThickness, color: 'black' }, ranges: [ { name: 'low', min: 0, max: 25, color: 'rgba(255,0,0,.4)' }, { name: 'med', min: 25, max: 50, color: 'rgba(255,255,0,.4)' }, { name: 'high', min: 50, max: 75, color: 'rgba(255,125,0,.4)' }, { name: 'top', min: 75, max: 100, color: 'rgba(0,255,0,.4)' }, ], valueChanged: (s) => { theLinearGauge.value = s.value; } }); // let theLinearGauge = new gauge.LinearGauge('#theLinearGauge', { min: 0, max: 100, value: 75, isReadOnly: false, step: 10, pointer: { thickness: linThickness, color: 'black' }, ranges: [ { name: 'low', min: 0, max: 25, color: 'rgba(255,0,0,.4)' }, { name: 'med', min: 25, max: 50, color: 'rgba(255,255,0,.4)' }, { name: 'high', min: 50, max: 75, color: 'rgba(255,125,0,.4)' }, { name: 'top', min: 75, max: 100, color: 'rgba(0,255,0,.4)' }, ], valueChanged: (s) => { theRadialGauge.value = s.value; } }); // document.getElementById('showRanges').addEventListener('click', (e) => { if (e.target.checked) { theRadialGauge.showRanges = theLinearGauge.showRanges = true; theRadialGauge.pointer.thickness = radThickness; theLinearGauge.pointer.thickness = linThickness; } else { theRadialGauge.showRanges = theLinearGauge.showRanges = false; theRadialGauge.pointer.thickness = 1; theLinearGauge.pointer.thickness = 1; } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Ranges</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="form-check"> <label for="showRanges" class="form-check-label">showRanges:</label> <input id="showRanges" type="checkbox" checked="checked" class="form-check-input"> </div> <div id="theRadialGauge"></div> <div id="theLinearGauge"></div> </div> </body> </html> .wj-gauge { margin: 20px auto; width: 50%; max-width: 250px; } body { margin-bottom: 24pt; } label { margin-right: 3px; } 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 { WjGaugeModule } from '@grapecity/wijmo.angular2.gauge'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { private _showRanges = true; // gaugeValue = 75; radThickness = 0.2; linThickness = 0.4; // get showRanges() { return this._showRanges; } set showRanges(value: boolean) { if (this._showRanges !== value) { this.radThickness = value ? 0.2 : 1; this.linThickness = value ? 0.4 : 1; this._showRanges = value; } } } // @NgModule({ imports: [WjGaugeModule, BrowserModule, FormsModule], 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>Ranges</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="form-check"> <label for="showRanges" class="form-check-label">showRanges:</label> <input id="showRanges" type="checkbox" class="form-check-input" [(ngModel)]="showRanges"> </div> <wj-radial-gauge #theRadialGauge [min]="0" [max]="100" [(value)]="gaugeValue" [isReadOnly]="false" [step]="10" [showRanges]="showRanges"> <wj-range [wjProperty]="'pointer'" [thickness]="radThickness" [color]="'black'"></wj-range> <wj-range [name]="'low'" [min]="0" [max]="25" [color]="'rgba(255,0,0,0.4)'"></wj-range> <wj-range [name]="'med'" [min]="25" [max]="50" [color]="'rgba(255,255,0,0.4)'"></wj-range> <wj-range [name]="'high'" [min]="50" [max]="75" [color]="'rgba(255,125,0,0.4)'"></wj-range> <wj-range [name]="'top'" [min]="75" [max]="100" [color]="'rgba(0,255,0,0.4)'"></wj-range> </wj-radial-gauge> <wj-linear-gauge #theLinearGauge [min]="0" [max]="100" [(value)]="gaugeValue" [isReadOnly]="false" [step]="10" [showRanges]="showRanges"> <wj-range [wjProperty]="'pointer'" [thickness]="linThickness" [color]="'black'"></wj-range> <wj-range [name]="'low'" [min]="0" [max]="25" [color]="'rgba(255,0,0,0.4)'"></wj-range> <wj-range [name]="'med'" [min]="25" [max]="50" [color]="'rgba(255,255,0,0.4)'"></wj-range> <wj-range [name]="'high'" [min]="50" [max]="75" [color]="'rgba(255,125,0,0.4)'"></wj-range> <wj-range [name]="'top'" [min]="75" [max]="100" [color]="'rgba(0,255,0,0.4)'"></wj-range> </wj-linear-gauge> </div> .wj-gauge { margin: 20px auto; width: 50%; max-width: 250px; } body { margin-bottom: 24pt; } label { margin-right: 3px; } <template> <div class="container-fluid"> <div class="form-check"> <label for="showRanges" class="form-check-label">showRanges:</label> <input id="showRanges" type="checkbox" class="form-check-input" v-model="theGauge.showRanges" v-on:change="setThickness"> </div> <wj-radial-gauge :min=0 :max=100 :value="theGauge.value" :isReadOnly=false :step=10 :showRanges="theGauge.showRanges" :value-changed="onValueChanged"> <wj-range wjProperty="pointer" :thickness="theGauge.radThickness" color="black"></wj-range> <wj-range name="low" :min=0 :max=25 color="rgba(255,0,0,0.4)"></wj-range> <wj-range name="med" :min=25 :max=50 color="rgba(255,255,0,0.4)"></wj-range> <wj-range name="high" :min=50 :max=75 color="rgba(255,125,0,0.4)"></wj-range> <wj-range name="top" :min=75 :max=100 color="rgba(0,255,0,0.4)"></wj-range> </wj-radial-gauge> <wj-linear-gauge :min=0 :max=100 :value="theGauge.value" :isReadOnly=false :step=10 :showRanges="theGauge.showRanges" :value-changed="onValueChanged"> <wj-range wjProperty="pointer" :thickness="theGauge.linThickness" color="black"></wj-range> <wj-range name="low" :min=0 :max=25 color="rgba(255,0,0,0.4)"></wj-range> <wj-range name="med" :min=25 :max=50 color="rgba(255,255,0,0.4)"></wj-range> <wj-range name="high" :min=50 :max=75 color="rgba(255,125,0,0.4)"></wj-range> <wj-range name="top" :min=75 :max=100 color="rgba(0,255,0,0.4)"></wj-range> </wj-linear-gauge> </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'; let App = Vue.extend({ name: 'app', data: function(){ return { theGauge: { value: 75, showRanges: true, radThickness: 0.2, linThickness: 0.4 } } }, methods: { setThickness: function(s,e){ this.theGauge.radThickness = s.target.checked ? 0.2 : 1; this.theGauge.linThickness = s.target.checked ? 0.4 : 1; }, onValueChanged: function(s,e){ this.theGauge.value = s.value; } } }) 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>Ranges</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'; class App extends React.Component { constructor(props) { super(props); this.state = { value: 75, showRanges: true, radThickness: 0.2, linThickness: 0.4 }; } render() { return (<div className="container-fluid"> <div className="form-check"> <label date-for="showRanges" className="form-check-label">showRanges:</label> <input id="showRanges" type="checkbox" className="form-check-input" checked={this.state.showRanges} onChange={this.setThickness.bind(this)}/> </div> <wjGauge.RadialGauge min={0} max={100} value={this.state.value} isReadOnly={false} step={10} initialized={control => this._radialGaugeValue = control} showRanges={this.state.showRanges} valueChanged={() => this.onValueChanged("RadialGauge")}> <wjGauge.Range wjProperty="pointer" thickness={this.state.radThickness} color="black"></wjGauge.Range> <wjGauge.Range name="low" min={0} max={25} color="rgba(255,0,0,0.4)"></wjGauge.Range> <wjGauge.Range name="med" min={25} max={50} color="rgba(255,255,0,0.4)"></wjGauge.Range> <wjGauge.Range name="high" min={50} max={75} color="rgba(255,125,0,0.4)"></wjGauge.Range> <wjGauge.Range name="top" min={75} max={100} color="rgba(0,255,0,0.4)"></wjGauge.Range> </wjGauge.RadialGauge> <wjGauge.LinearGauge min={0} max={100} value={this.state.value} isReadOnly={false} step={10} initialized={control => this._linearGaugeValue = control} showRanges={this.state.showRanges} valueChanged={() => this.onValueChanged("LinearGauge")}> <wjGauge.Range wjProperty="pointer" thickness={this.state.linThickness} color="black"></wjGauge.Range> <wjGauge.Range name="low" min={0} max={25} color="rgba(255,0,0,0.4)"></wjGauge.Range> <wjGauge.Range name="med" min={25} max={50} color="rgba(255,255,0,0.4)"></wjGauge.Range> <wjGauge.Range name="high" min={50} max={75} color="rgba(255,125,0,0.4)"></wjGauge.Range> <wjGauge.Range name="top" min={75} max={100} color="rgba(0,255,0,0.4)"></wjGauge.Range> </wjGauge.LinearGauge> </div>); } setThickness() { this.setState({ showRanges: !this.state.showRanges, radThickness: !this.state.showRanges ? 0.2 : 1, linThickness: !this.state.showRanges ? 0.4 : 1 }); } onValueChanged(type) { this.setState({ value: (type == 'RadialGauge') ? this._radialGaugeValue.value : this._linearGaugeValue.value }); } } 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>Ranges</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 .wj-gauge { margin: 20px auto; width: 50%; max-width: 250px; } body { margin-bottom: 24pt; }