Ranges

In addition to the face and pointer ranges, gauges may contain additional ranges that show zones within the gauge (like 'bad', 'average', and 'good').

Depending on the setting of the showRanges property, these additional ranges may be shown at all times or used to determine the color of the pointer range based on the current gauge value.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; 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.RadialGauge('#theGauge', { isReadOnly: false, hasShadow: false, showText: 'All', startAngle: -30, sweepAngle: 240, value: 50, showRanges: true, pointer: { thickness: 0.25 }, thumbSize: 20 }); // // customize document.getElementById('showRanges').addEventListener('click', (e) => { theGauge.showRanges = e.target.checked; }); // let cmbRanges = new input.ComboBox('#ranges', { itemsSource: [0, 3, 4, 20, 50], selectedIndexChanged: (s, e) => { createRanges(theGauge, s.selectedItem); } }); cmbRanges.selectedItem = 3; // // populate gauge with ranges function createRanges(g, cnt) { g.ranges.clear(); // if (cnt) { let colorMin = new wijmo.Color('red'), colorMax = new wijmo.Color('green'), span = (g.max - g.min) / cnt; // for (let i = 0; i < cnt; i++) { let rng = new gauge.Range(), color = wijmo.Color.interpolate(colorMin, colorMax, cnt > 1 ? i / (cnt - 1) : 0); // rng.min = g.min + i * span; rng.max = rng.min + span; rng.color = color.toString(); g.ranges.push(rng); } } } } <!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="row"> <div class="col-xs-6"> <div class="form-check"> <label for="showRanges" class="form-check-label">Show Ranges:</label> <input id="showRanges" type="checkbox" checked="checked" class="form-check-input"> </div> <div class="form-group"> <label for="ranges">Ranges:</label> <div id="ranges"></div> </div> </div> <div class="col-xs-6"> <div id="theGauge"></div> </div> </div> </div> </body> </html> .wj-gauge { height: 150px; margin: 20px auto; padding: 12px; background: rgba(0, 0, 0, .02); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .wj-gauge .wj-pointer { fill: black; } label { width: 120px; text-align: right; margin-right: 3px; } .wj-dropdown, .wj-inputnumber { width: 120px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; 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'; import { FormsModule } from '@angular/forms'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { // populate gauge with ranges createRanges(g: gauge.RadialGauge, cnt: number) { g.ranges.clear(); // if (cnt) { let colorMin = new wijmo.Color('red'), colorMax = new wijmo.Color('green'), span = (g.max - g.min) / cnt; // for (let i = 0; i < cnt; i++) { let rng = new gauge.Range(), color = wijmo.Color.interpolate(colorMin, colorMax, cnt > 1 ? i / (cnt - 1) : 0); // rng.min = g.min + i * span; rng.max = rng.min + span; rng.color = color.toString(); g.ranges.push(rng); } } } } // @NgModule({ imports: [WjGaugeModule, WjInputModule, 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="row"> <div class="col-xs-6"> <div class="form-check"> <label for="showRanges" class="form-check-label">Show Ranges:</label> <input id="showRanges" type="checkbox" class="form-check-input" [(ngModel)]="theGauge.showRanges"> </div> <div class="form-group"> <label for="ranges">Ranges:</label> <wj-combo-box #ranges id="ranges" [itemsSource]="[0, 3, 4, 20, 50]" [selectedItem]="3" (selectedIndexChanged)="createRanges(theGauge, ranges.selectedItem)"> </wj-combo-box> </div> </div> <div class="col-xs-6"> <wj-radial-gauge #theGauge [isReadOnly]="false" [hasShadow]="false" [showText]="'All'" [startAngle]="-30" [sweepAngle]="240" [value]="50" [showRanges]="true" [thumbSize]="20"> <wj-range [wjProperty]="'pointer'" [thickness]="0.25"> </wj-range> </wj-radial-gauge> </div> </div> </div> .wj-gauge { height: 150px; margin: 20px auto; padding: 12px; background: rgba(0, 0, 0, .02); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .wj-gauge .wj-pointer { fill: black; } label { width: 120px; text-align: right; margin-right: 3px; } .wj-dropdown, .wj-inputnumber { width: 120px; } <template> <div class="container-fluid"> <div class="row container"> <div class="col-xs-6"> <div class="form-check"> <label for="showRanges" class="form-check-label">Show Ranges:</label> <input id="showRanges" type="checkbox" class="form-check-input" v-model="theGauge.showRanges"> </div> <div class="form-group"> <label for="ranges">Ranges:</label> <wj-combo-box id="ranges" :items-source="theGauge.itemsSource" :selectedItem="theGauge.defaultSelectedItem" :selectedIndexChanged="createRanges"> </wj-combo-box> </div> </div> <div class="col-xs-6"> <wj-radial-gauge :isReadOnly=false :hasShadow=false showText="All" :startAngle=-30 :sweepAngle=240 :value=50 :showRanges="theGauge.showRanges" :thumbSize=20 :min=0 :max=100 :initialized="initGauge"> <wj-range wjProperty="pointer" :thickness=0.25> </wj-range> </wj-radial-gauge> </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'; import * as wijmo from '@grapecity/wijmo'; import * as gauge from '@grapecity/wijmo.gauge'; new Vue({ el: '#app', data: { theGauge: { showRanges: true, itemsSource: [0, 3, 4, 20, 50], defaultSelectedItem: 3, initialized: false } }, methods: { initGauge(g){ this.gauge = g; this.createRanges(); }, createRanges(s) { let g = this.gauge; let cnt = s ? s.selectedItem : this.theGauge.defaultSelectedItem; if (!isNaN(cnt)) { g && g.ranges.clear(); let colorMin = new wijmo.Color('red'), colorMax = new wijmo.Color('green'), span = (g.max - g.min) / cnt; for (let i = 0; i < cnt; i++) { let rng = new gauge.Range(), color = wijmo.Color.interpolate(colorMin, colorMax, cnt > 1 ? i / (cnt - 1) : 0); rng.min = g.min + i * span; rng.max = rng.min + span; rng.color = color.toString(); g && g.ranges.push(rng); } } } } }); </script> <style> .container-fluid .wj-gauge { height: 150px; margin: 20px auto; padding: 12px; background: rgba(0, 0, 0, .02); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .container-fluid .wj-gauge .wj-pointer { fill: black; } label { width: 120px; text-align: right; margin-right: 3px; } .wj-dropdown, .wj-inputnumber { width: 120px; } </style> <!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 wijmo from '@grapecity/wijmo'; import * as gauge from '@grapecity/wijmo.gauge'; 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._itemsSource = [0, 3, 4, 20, 50]; this.state = { showRanges: true, rangesCount: 3, value: 50 }; } render() { return (<div className="container-fluid"> <div className="row container"> <div className="col-xs-6"> <div className="form-check"> <label date-for="showRanges" className="form-check-label">Show Ranges:</label> <input id="showRanges" type="checkbox" className="form-check-input" checked={this.state.showRanges} onChange={this._showRangesChanged.bind(this)}/> </div> <div className="form-group"> <label date-for="ranges">Ranges:</label> <wjInput.ComboBox id="ranges" itemsSource={this._itemsSource} selectedItem={this.state.rangesCount} selectedIndexChanged={this._selectedIndexChanged.bind(this)}> </wjInput.ComboBox> </div> </div> <div className="col-xs-6"> <wjGauge.RadialGauge isReadOnly={false} hasShadow={false} showText="All" startAngle={-30} sweepAngle={240} value={this.state.value} showRanges={this.state.showRanges} thumbSize={20} min={0} max={100} initialized={this._initialized.bind(this)} valueChanged={this._valueChanged.bind(this)}> <wjGauge.Range wjProperty="pointer" thickness={0.25}> </wjGauge.Range> </wjGauge.RadialGauge> </div> </div> </div>); } _showRangesChanged() { this.setState({ showRanges: !this.state.showRanges }); } _selectedIndexChanged(sender) { this.setState({ rangesCount: sender.selectedItem }); this._createRanges(); } _initialized(sender) { this._gauge = sender; this._createRanges(); } _valueChanged(sender) { this.setState({ value: sender.value }); } _createRanges() { let g = this._gauge, count = this.state.rangesCount, colorMin = new wijmo.Color('red'), colorMax = new wijmo.Color('green'), span = (g.max - g.min) / count; g.ranges.clear(); for (let i = 0; i < count; i++) { let rng = new gauge.Range(), color = wijmo.Color.interpolate(colorMin, colorMax, count > 1 ? i / (count - 1) : 0); rng.min = g.min + i * span; rng.max = rng.min + span; rng.color = color.toString(); g.ranges.push(rng); } } } 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 { height: 150px; margin: 20px auto; padding: 12px; background: rgba(0, 0, 0, .02); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .container-fluid .wj-gauge .wj-pointer { fill: black; } label { width: 120px; text-align: right; margin-right: 3px; } .wj-dropdown, .wj-inputnumber { width: 120px; }