Radial Gauges

Radial gauges display a metric as a percentage of the length of a circular scale, like a pie or donut chart with a single slice.

By default, the radial scale displays a 180-degree arc. You can change that by adjusting its start and sweep angles. If the autoScale property is set to true, the control will automatically scale the gauge to fill the host element taking onto account the startAngle and sweepAngle properties.

Use the controls below to see the effect of the main RadialGauge 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.RadialGauge('#theGauge', { isReadOnly: false, min: 0, max: 100, step: 5, value: 75, valueChanged: (s) => { 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' }, ] }); // // change properties let value = new input.InputNumber('#value', { min: theGauge.min, max: theGauge.max, step: theGauge.step, value: theGauge.value, valueChanged: (s) => { theGauge.value = s.value; } }); let startAngle = new input.InputNumber('#startAngle', { step: 10, min: -360, max: 360, value: theGauge.startAngle, valueChanged: (s) => { theGauge.startAngle = s.value; } }); let sweepAngle = new input.InputNumber('#sweepAngle', { step: 10, min: -360, max: 360, value: theGauge.sweepAngle, valueChanged: (s) => { theGauge.sweepAngle = s.value; } }); document.getElementById('autoScale').addEventListener('click', (e) => { theGauge.autoScale = e.target.checked; }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Radial 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> </div> <div class="form-group"> <label for="startAngle">startAngle:</label> <div id="startAngle"></div> </div> <div class="form-group"> <label for="sweepAngle">sweepAngle:</label> <div id="sweepAngle"></div> </div> <div class="form-check"> <label for="autoScale" class="form-check-label">autoScale:</label> <input id="autoScale" type="checkbox" checked="checked" class="form-check-input"> </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%; 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 { width: 100%; height: 100%; } .wj-radialgauge { height: 200px; } .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 { 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 { } // @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>Radial 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="startAngle">startAngle:</label> <wj-input-number id="startAngle" [step]="10" [min]="-360" [max]="360" [(value)]="theGauge.startAngle"> </wj-input-number> </div> <div class="form-group"> <label for="sweepAngle">sweepAngle:</label> <wj-input-number id="sweepAngle" [step]="10" [min]="-360" [max]="360" [(value)]="theGauge.sweepAngle"> </wj-input-number> </div> <div class="form-check"> <label for="autoScale" class="form-check-label">autoScale:</label> <input id="autoScale" type="checkbox" class="form-check-input" [(ngModel)]="theGauge.autoScale"> </div> </div> <div class="col-xs-6"> <div class="gauge-holder"> <wj-radial-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-radial-gauge> </div> </div> </div> </div> .gauge-holder { width: 80%; 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 { width: 100%; height: 100%; } .wj-radialgauge { height: 200px; } .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="theGauge.min" :max="theGauge.max" :step="theGauge.step" :value="theGauge.value" :value-changed="onInputValueChanged"></wj-input-number> </div> <div class="form-group"> <label for="startAngle">startAngle:</label> <wj-input-number id="startAngle" :step=10 :min=-360 :max=360 :value="theGauge.startAngle" :value-changed="onInputValueChanged"> </wj-input-number> </div> <div class="form-group"> <label for="sweepAngle">sweepAngle:</label> <wj-input-number id="sweepAngle" :step=10 :min=-360 :max=360 :value="theGauge.sweepAngle" :value-changed="onInputValueChanged"> </wj-input-number> </div> <div class="form-check"> <label for="autoScale" class="form-check-label">autoScale:</label> <input id="autoScale" type="checkbox" class="form-check-input" v-model="theGauge.autoScale"> </div> </div> <div class="col-xs-6"> <div class="gauge-holder"> <wj-radial-gauge :isReadOnly=false :min=0 :max=100 :step=5 :value="theGauge.value" :showRanges=false :startAngle="theGauge.startAngle" :sweepAngle="theGauge.sweepAngle" :autoScale="theGauge.autoScale" :value-changed="onGaugeValueChanged"> <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-radial-gauge> </div> </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 { theGauge: { value: 75, startAngle: 0, sweepAngle: 180, autoScale: true } } }, methods: { onInputValueChanged: function(s, e){ this.theGauge[s.hostElement.id] = s.value; }, onGaugeValueChanged: function(s, e){ this.theGauge.value = s.value; } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .gauge-holder { width: 80%; 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 { width: 100%; height: 100%; } .container-fluid .wj-radialgauge { height: 200px; } .wj-inputnumber { width: 120px; } label { width: 100px; text-align: right; } 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>Radial 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, startAngle: 0, sweepAngle: 180, autoScale: true }; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <div className="form-group"> <label data-for="value">value:</label> <wjInput.InputNumber id="value" min={this.state.min} max={this.state.max} step={this.state.step} initialized={control => this._value = control} value={this.state.value} valueChanged={() => this.onInputValueChanged("value")}></wjInput.InputNumber> </div> <div className="form-group"> <label data-for="startAngle">startAngle:</label> <wjInput.InputNumber id="startAngle" initialized={control => this._startAngle = control} step={10} min={-360} max={360} value={this.state.startAngle} valueChanged={() => this.onInputValueChanged("startAngle")}> </wjInput.InputNumber> </div> <div className="form-group"> <label data-for="sweepAngle">sweepAngle:</label> <wjInput.InputNumber id="sweepAngle" initialized={control => this._sweepAngle = control} step={10} min={-360} max={360} value={this.state.sweepAngle} valueChanged={() => this.onInputValueChanged("sweepAngle")}> </wjInput.InputNumber> </div> <div className="form-check"> <label data-for="autoScale" className="form-check-label">autoScale:</label> <input id="autoScale" type="checkbox" className="form-check-input" checked={this.state.autoScale} onChange={this.setAutoScale.bind(this)}/> </div> </div> <div className="col-xs-6"> <div className="gauge-holder"> <wjGauge.RadialGauge isReadOnly={false} min={0} max={100} step={5} value={this.state.value} showRanges={false} startAngle={this.state.startAngle} sweepAngle={this.state.sweepAngle} initialized={control => this._gaugeValue = control} autoScale={this.state.autoScale} valueChanged={this.onGaugeValueChanged.bind(this)}> <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.RadialGauge> </div> </div> </div> </div>); } onInputValueChanged(type) { if (type == "value") { this.setState({ value: this._value.value }); } else if (type == "startAngle") { this.setState({ startAngle: this._startAngle.value }); } else if (type == "sweepAngle") { this.setState({ sweepAngle: this._sweepAngle.value }); } } onGaugeValueChanged() { this.setState({ value: this._gaugeValue.value, }); } setAutoScale() { this.setState({ autoScale: !this.state.autoScale }); } } 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>Radial 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> .gauge-holder { width: 80%; 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 { width: 100%; height: 100%; } .container-fluid .wj-radialgauge { height: 200px; } .wj-inputnumber { width: 120px; } label { width: 100px; text-align: right; } body { margin-bottom: 24pt; }