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 { InputNumber } from '@grapecity/wijmo.input'; import { RadialGauge } from '@grapecity/wijmo.gauge'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create the gauge let theGauge = new 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 InputNumber('#value', { min: theGauge.min, max: theGauge.max, step: theGauge.step, value: theGauge.value, valueChanged: (s) => { theGauge.value = s.value; } }); let startAngle = new InputNumber('#startAngle', { step: 10, min: -360, max: 360, value: theGauge.startAngle, valueChanged: (s) => { theGauge.startAngle = s.value; } }); let sweepAngle = new 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="state.min" :max="state.max" :step="state.step" :value="state.value" :value-changed="valueChanged"> </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="state.startAngle" :value-changed="startAngleChanged"> </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="state.sweepAngle" :value-changed="sweepAngleChanged"> </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="state.autoScale"> </div> </div> <div class="col-xs-6"> <div class="gauge-holder"> <wj-radial-gauge :isReadOnly=false :min=0 :max=100 :step=5 :value="state.value" :startAngle="state.startAngle" :sweepAngle="state.sweepAngle" :autoScale="state.autoScale" :value-changed="gaugeValueChanged" :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> </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 { state: { step: 5, value: 75, startAngle: 0, sweepAngle: 180, autoScale: true } } }, methods: { valueChanged: function(s) { this.state.value = s.value; }, startAngleChanged: function(s) { this.state.startAngle = s.value; }, sweepAngleChanged: function(s) { this.state.sweepAngle = s.value; }, gaugeValueChanged: function(s) { this.state.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>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 { RadialGauge, Range } from '@grapecity/wijmo.react.gauge'; import { InputNumber } from '@grapecity/wijmo.react.input'; class App extends React.Component { constructor(props) { super(props); this.state = { step: 5, 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> <InputNumber id="value" min={this.state.min} max={this.state.max} step={this.state.step} value={this.state.value} valueChanged={(s) => this.setState({ value: s.value })}/> </div> <div className="form-group"> <label data-for="startAngle">startAngle:</label> <InputNumber id="startAngle" step={10} min={-360} max={360} value={this.state.startAngle} valueChanged={(s) => this.setState({ startAngle: s.value })}/> </div> <div className="form-group"> <label data-for="sweepAngle">sweepAngle:</label> <InputNumber id="sweepAngle" step={10} min={-360} max={360} value={this.state.sweepAngle} valueChanged={(s) => this.setState({ sweepAngle: s.value })}/> </div> <div className="form-check"> <label htmlFor="autoScale" className="form-check-label">autoScale:</label> <input id="autoScale" type="checkbox" className="form-check-input" checked={this.state.autoScale} onChange={e => this.setState({ autoScale: e.target.checked })}/> </div> </div> <div className="col-xs-6"> <div className="gauge-holder"> <RadialGauge isReadOnly={false} min={0} max={100} step={this.state.step} value={this.state.value} showRanges={false} startAngle={this.state.startAngle} sweepAngle={this.state.sweepAngle} autoScale={this.state.autoScale} valueChanged={s => { this.setState({ value: s.value }); }}> <Range min={0} max={33} color="red"/> <Range min={33} max={66} color="yellow"/> <Range min={66} max={100} color="green"/> </RadialGauge> </div> </div> </div> </div>); } } 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; }