Basic Properties

The key properties common to all Wijmo gauge classes are: min, max, and value.

The showText property is used to show the min/max/value properties as text on the gauge.

Wijmo gauges can also be used as input controls. If you set their isReadOnly property to false, users will be able to change the value using the mouse, keyboard, or touch.

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 gauges let theRadialGauge = new gauge.RadialGauge('#theRadialGauge', { min: 0, max: 100, value: 75, showText: 'None', valueChanged: (s, e) => { valueCtl.value = s.value; } }); let theLinearGauge = new gauge.LinearGauge('#theLinearGauge', { min: 0, max: 100, value: 75, showText: 'None', valueChanged: (s, e) => { valueCtl.value = s.value; } }); let theBulletGraph = new gauge.BulletGraph('#theBulletGraph', { min: 0, max: 100, value: 75, target: 60, bad: 50, good: 70, showText: 'None', valueChanged: (s, e) => { valueCtl.value = s.value; } }); function getGaugeProp(prop) { return theRadialGauge[prop]; } function setGaugeProp(prop, value) { theRadialGauge[prop] = value; theLinearGauge[prop] = value; theBulletGraph[prop] = value; } // // create controls to change gauge properties let minCtl = new input.InputNumber('#min', { step: 10, value: getGaugeProp('min'), valueChanged: (s, e) => { setGaugeProp('min', s.value); } }); let maxCtl = new input.InputNumber('#max', { step: 10, value: getGaugeProp('max'), valueChanged: (s, e) => { setGaugeProp('max', s.value); } }); let valueCtl = new input.InputNumber('#value', { step: 10, value: getGaugeProp('value'), valueChanged: (s, e) => { setGaugeProp('value', s.value); } }); let showTextCtl = new input.ComboBox('#showText', { itemsSource: 'None,Value,MinMax,All'.split(','), text: getGaugeProp('showText'), textChanged: (s, e) => { setGaugeProp('showText', s.text); } }); document.getElementById('isReadOnly').addEventListener('click', (e) => { setGaugeProp('isReadOnly', e.target.checked); }); let stepCtl = new input.InputNumber('#step', { min: 1, step: 1, value: getGaugeProp('step'), valueChanged: (s, e) => { setGaugeProp('step', s.value); } }); document.getElementById('isAnimated').addEventListener('click', (e) => { setGaugeProp('isAnimated', e.target.checked); }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Gauge Basics</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="min">min:</label> <div id="min"></div> </div> <div class="form-group"> <label for="max">max:</label> <div id="max"></div> </div> <div class="form-group"> <label for="value">value:</label> <div id="value"></div> </div> <div class="form-group"> <label for="showText">showText:</label> <div id="showText"></div> </div> <div class="form-check"> <label for="isReadOnly">isReadOnly:</label> <input id="isReadOnly" type="checkbox" checked="checked" class="form-check-input"> </div> <div class="form-group"> <label for="step">step:</label> <div id="step"></div> </div> <div class="form-check"> <label for="isAnimated">isAnimated:</label> <input id="isAnimated" type="checkbox" checked="checked" class="form-check-input"> </div> </div> <div class="col-xs-6"> <div id="theRadialGauge"></div> <div id="theLinearGauge"></div> <div id="theBulletGraph"></div> </div> </div> </div> </body> </html>
label { width: 150px; text-align: right; margin-right: 3px; } .wj-inputnumber, .wj-combobox { width: 140px; } .wj-gauge { margin: 20px auto; } .wj-radialgauge { height: 100px; } body { margin-bottom: 24pt; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);