Stacked Ranges

Stacking the ranges allows a single gauge to show multiple values. Set the stackRanges property to true to show all ranges in the gauge side-by-side.

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() { // show the effect of the stackRanges property document.getElementById('stackRanges').addEventListener('click', (e) => { theLinearGauge.stackRanges = theVerticalGauge.stackRanges = theRadialGauge.stackRanges = e.target.checked; }); // // define ranges used by all gauges let ranges = [ { max: 25, color: 'red' }, { max: 50, color: 'purple' }, { max: 75, color: 'orange' } ]; // // create the gauges let theRadialGauge = new gauge.RadialGauge('#theRadialGauge', { value: 0, stackRanges: true, ranges: ranges }); let theLinearGauge = new gauge.LinearGauge('#theLinearGauge', { value: 0, stackRanges: true, ranges: ranges }); let theVerticalGauge = new gauge.LinearGauge('#theVerticalGauge', { value: 0, direction: 'Up', stackRanges: true, ranges: ranges }); // // animate the ranges setInterval(() => { let i = Math.floor(Math.random() * theRadialGauge.ranges.length), value = theRadialGauge.ranges[i].max + (4 * Math.random() - 2); // value = Math.min(100, Math.max(0, value)); theRadialGauge.ranges[i].max = value; theLinearGauge.ranges[i].max = value; theVerticalGauge.ranges[i].max = value; // theRadialGauge.value = value; theLinearGauge.value = value; theVerticalGauge.value = value; }, 100); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Stacked 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="stackRanges" class="form-check-label">stackRanges:</label> <input id="stackRanges" type="checkbox" checked="checked" class="form-check-input"> </div> <div class="gauges"> <div id="theRadialGauge"></div> <div id="theLinearGauge"></div> <div id="theVerticalGauge" class="vertical"></div> </div> </div> </body> </html> .gauges { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; align-content: center; } .wj-gauge { width: 200px; height: 200px; } .wj-gauge .wj-pointer { display: none; } .wj-gauge .wj-ranges path { stroke: #f5f5f5; stroke-width: 2px; stroke-linecap: round; opacity: .75; } .wj-lineargauge { height: 60px; } .vertical { height: 120px; width: 60px; } body { margin-bottom: 24pt; } label { margin-right: 3px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as gauge from '@grapecity/wijmo.gauge'; // import { Component, enableProdMode, NgModule, ViewChild, AfterViewInit } 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 implements AfterViewInit { @ViewChild('theRadialGauge') theRadialGauge: gauge.RadialGauge; @ViewChild('theLinearGauge') theLinearGauge: gauge.LinearGauge; @ViewChild('theVerticalGauge') theVerticalGauge: gauge.LinearGauge; stackRanges = true; // ngAfterViewInit() { window.setInterval(() => { let i = Math.floor(Math.random() * this.theRadialGauge.ranges.length), value = this.theRadialGauge.ranges[i].max + (4 * Math.random() - 2); // value = Math.min(100, Math.max(0, value)); this.theRadialGauge.ranges[i].max = value; this.theLinearGauge.ranges[i].max = value; this.theVerticalGauge.ranges[i].max = value; // this.theRadialGauge.value = value; this.theLinearGauge.value = value; this.theVerticalGauge.value = value; }, 100); } } // @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>Stacked 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="stackRanges" class="form-check-label">stackRanges:</label> <input id="stackRanges" type="checkbox" class="form-check-input" [(ngModel)]="stackRanges"> </div> <div class="gauges"> <wj-radial-gauge #theRadialGauge [value]="0" [stackRanges]="stackRanges"> <wj-range [max]="25" [color]="'red'"></wj-range> <wj-range [max]="50" [color]="'purple'"></wj-range> <wj-range [max]="75" [color]="'orange'"></wj-range> </wj-radial-gauge> <wj-linear-gauge #theLinearGauge [value]="0" [stackRanges]="stackRanges"> <wj-range [max]="25" [color]="'red'"></wj-range> <wj-range [max]="50" [color]="'purple'"></wj-range> <wj-range [max]="75" [color]="'orange'"></wj-range> </wj-linear-gauge> <wj-linear-gauge #theVerticalGauge class="vertical" [value]="0" [stackRanges]="stackRanges" [direction]="'Up'"> <wj-range [max]="25" [color]="'red'"></wj-range> <wj-range [max]="50" [color]="'purple'"></wj-range> <wj-range [max]="75" [color]="'orange'"></wj-range> </wj-linear-gauge> </div> </div> .gauges { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; align-content: center; } .wj-gauge { width: 200px; height: 200px; } .wj-gauge .wj-pointer { display: none; } .wj-gauge .wj-ranges path { stroke: #f5f5f5; stroke-width: 2px; stroke-linecap: round; opacity: .75; } .wj-lineargauge { height: 60px; } .vertical { height: 120px; width: 60px; } body { margin-bottom: 24pt; } label { margin-right: 3px; } <template> <div class="container-fluid"> <div class="form-check"> <label for="stackRanges" class="form-check-label">stackRanges:</label> <input id="stackRanges" type="checkbox" class="form-check-input" v-model="stackRanges"> </div> <div class="gauges"> <wj-radial-gauge :value="theRadialGauge.value" :stackRanges="stackRanges"> <wj-range :max="radialRange.max" :color="radialRange.color" v-for="radialRange in theRadialGauge.ranges" :key="radialRange.max"></wj-range> </wj-radial-gauge> <wj-linear-gauge :value="theLinearGauge.value" :stackRanges="stackRanges"> <wj-range :max="linearRange.max" :color="linearRange.color" v-for="linearRange in theLinearGauge.ranges" :key="linearRange.max"></wj-range> </wj-linear-gauge> <wj-linear-gauge class="vertical" :value="theVerticalGauge.value" :stackRanges="stackRanges" direction="Up"> <wj-range :max="verticalRange.max" :color="verticalRange.color" v-for="verticalRange in theVerticalGauge.ranges" :key="verticalRange.max"></wj-range> </wj-linear-gauge> </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'; let App = Vue.extend({ name: 'app', data: function(){ let ranges = [ { max: 25, color: 'red' }, { max: 50, color: 'purple' }, { max: 75, color: 'orange' } ]; return { stackRanges: true, theRadialGauge: { value: 0, ranges: ranges }, theLinearGauge: { value: 0, ranges: ranges }, theVerticalGauge: { value: 0, ranges: ranges } } }, methods: { setDynamic: function(){ var _this = this; setInterval(function(){ let i = Math.floor(Math.random() * _this.theRadialGauge.ranges.length), value = _this.theRadialGauge.ranges[i].max + (4 * Math.random() - 2); // value = Math.min(100, Math.max(0, value)); _this.theRadialGauge.ranges[i].max = value; _this.theLinearGauge.ranges[i].max = value; _this.theVerticalGauge.ranges[i].max = value; // _this.theRadialGauge.value = value; _this.theLinearGauge.value = value; _this.theVerticalGauge.value = value; }, 100); } }, mounted: function(){ this.setDynamic(); } }) 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>Stacked 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.ranges = [ { max: 25, color: 'red' }, { max: 50, color: 'purple' }, { max: 75, color: 'orange' } ]; this.state = { stackRanges: true, value: 0, ranges: this.ranges }; } render() { return (<div className="container-fluid"> <div className="form-check"> <label date-for="stackRanges" className="form-check-label">stackRanges:</label> <input id="stackRanges" type="checkbox" className="form-check-input" checked={this.state.stackRanges} onChange={this.setStackRanges.bind(this)}/> </div> <div className="gauges"> <wjGauge.RadialGauge value={this.state.value} stackRanges={this.state.stackRanges}> {this.renderRanges()} </wjGauge.RadialGauge> <wjGauge.LinearGauge value={this.state.value} stackRanges={this.state.stackRanges}> {this.renderRanges()} </wjGauge.LinearGauge> <wjGauge.LinearGauge className="vertical" value={this.state.value} stackRanges={this.state.stackRanges} direction="Up"> {this.renderRanges()} </wjGauge.LinearGauge> </div> </div>); } renderRanges() { let wjGaugeRanges = []; this.state.ranges.forEach(r => { wjGaugeRanges.push(this.renderRange(r)); }); return wjGaugeRanges; } renderRange(r) { return <wjGauge.Range max={r.max} color={r.color} key={r.max}></wjGauge.Range>; } setStackRanges() { this.setState({ stackRanges: !this.state.stackRanges }); } setDynamic() { var _this = this; this.timer = setInterval(() => { let i = Math.floor(Math.random() * _this.state.ranges.length), value = _this.state.ranges[i].max + (4 * Math.random() - 2); // value = Math.min(100, Math.max(0, value)); this.ranges[i].max = value; _this.setState({ value: value, ranges: this.ranges }); }, 100); } componentDidMount() { this.setDynamic(); } componentWillUnmount() { clearInterval(this.timer); } } 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>Stacked 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 .gauges { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; align-content: center; } .container-fluid .wj-gauge { width: 200px; height: 200px; } .container-fluid .wj-gauge .wj-pointer { display: none; } .container-fluid .wj-gauge .wj-ranges path { stroke: #f5f5f5; stroke-width: 2px; stroke-linecap: round; opacity: .75; } .container-fluid .gauges .wj-lineargauge { height: 60px; } .container-fluid .gauges .vertical { height: 120px; width: 60px; } body { margin-bottom: 24pt; }