Demos
Gauge
Gauge Elements
Text Value

Text Values

The showText property is used to show the min/max/value properties as text on the gauge. Use the format property to apply numeric formatting, or use the getText callback function to completely customize the display values.

JavaScript
Angular
Vue
React
app.js
index.html
styles.css
Copy to CodeMine
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
import * as input from '@mescius/wijmo.input';
import * as gauge from '@mescius/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: 80,
        showRanges: false,
        ranges: [
            { min: 0, max: 25, color: 'red' },
            { min: 25, max: 50, color: 'orange' },
            { min: 50, max: 100, color: 'green' },
        ]
    });
    theGauge.pointer.thickness = .15;
    theGauge.thumbSize = 20;
    //
    // customize text properties
    let showText = new input.ComboBox('#showText', {
        textChanged: (s, e) => {
            theGauge.showText = s.text;
        },
        itemsSource: 'None,Value,MinMax,All'.split(','),
        text: 'All'
    });
    let format = new input.ComboBox('#format', {
        textChanged: (s, e) => {
            theGauge.format = s.text;
        },
        itemsSource: 'n0,n2,c0,c2'.split(','),
        text: 'n0'
    });
    document.getElementById('getText').addEventListener('click', (e) => {
        theGauge.getText = e.target.checked ? getTextCallback : null;
    });
    //
    // getText callback function
    function getTextCallback(gauge, part, value, text) {
        switch (part) {
            case 'value':
                if (value <= 10)
                    return 'Empty!';
                if (value <= 25)
                    return 'Low...';
                if (value <= 95)
                    return 'Good';
                return 'Full';
            case 'min':
                return 'empty';
            case 'max':
                return 'full';
        }
        return text;
    }
}
import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; import * as input from '@mescius/wijmo.input'; import * as gauge from '@mescius/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: 80, showRanges: false, ranges: [ { min: 0, max: 25, color: 'red' }, { min: 25, max: 50, color: 'orange' }, { min: 50, max: 100, color: 'green' }, ] }); theGauge.pointer.thickness = .15; theGauge.thumbSize = 20; // // customize text properties let showText = new input.ComboBox('#showText', { textChanged: (s, e) => { theGauge.showText = s.text; }, itemsSource: 'None,Value,MinMax,All'.split(','), text: 'All' }); let format = new input.ComboBox('#format', { textChanged: (s, e) => { theGauge.format = s.text; }, itemsSource: 'n0,n2,c0,c2'.split(','), text: 'n0' }); document.getElementById('getText').addEventListener('click', (e) => { theGauge.getText = e.target.checked ? getTextCallback : null; }); // // getText callback function function getTextCallback(gauge, part, value, text) { switch (part) { case 'value': if (value <= 10) return 'Empty!'; if (value <= 25) return 'Low...'; if (value <= 95) return 'Good'; return 'Full'; case 'min': return 'empty'; case 'max': return 'full'; } return text; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Text Values</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></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="showText">Show Text:</label> <div id="showText"></div> </div> <div class="form-group"> <label for="format">Format:</label> <div id="format"></div> </div> <div class="form-check"> <label for="getText" class="form-check-label">Custom Text:</label> <input id="getText" type="checkbox" class="form-check-input"> </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; }
(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', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/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);