Radial Gauges with Needle Pointers

By default, Wijmo's radial gauges use a colored sector and a text element to indicate the gauge's current value. This results in a clean and easy-to read look.

If you prefer a more traditional needle-style pointer, use the needleShape and needleLength properties to select a needle pointer which can be styled with CSS.

You can also use the needleElement property to use custom SVG elements as needles, and createNeedleElement method to create custom needle shapes.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { ComboBox } from '@grapecity/wijmo.input'; import { RadialGauge, ShowText, NeedleShape, NeedleLength } from '@grapecity/wijmo.gauge'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create the gauge let theRadialGauge = new RadialGauge('#theRadialGauge', { showText: ShowText.None, min: 0, max: 500, value: 100, startAngle: -45, sweepAngle: 270, showTicks: true, showTickText: true, tickSpacing: 50, thickness: 0.2, needleShape: NeedleShape.Pointer, isReadOnly: false }); // configure the gauge new ComboBox('#start', { itemsSource: [-90, -45, 0, 45, 90], selectedItem: theRadialGauge.startAngle, selectedIndexChanged: (s) => { theRadialGauge.startAngle = s.selectedItem; } }); new ComboBox('#sweep', { itemsSource: [-360, -270, -180, -90, 90, 180, 270, 360], selectedItem: theRadialGauge.sweepAngle, selectedIndexChanged: (s) => { theRadialGauge.sweepAngle = s.selectedItem; } }); new ComboBox('#spacing', { itemsSource: [20, 50, 100, 200, 250], selectedItem: 50, selectedIndexChanged: (s) => { theRadialGauge.tickSpacing = s.selectedItem; } }); new ComboBox('#needle-shape', { itemsSource: 'None,Triangle,Diamond,Hexagon,Rectangle,Arrow,WideArrow,Pointer,WidePointer,Outer'.split(','), text: NeedleShape[theRadialGauge.needleShape], textChanged: (s) => { theRadialGauge.needleShape = s.text; theRadialGauge.showText = s.text.match(/Outer|None/) ? ShowText.Value : ShowText.None; } }); new ComboBox('#needle-length', { itemsSource: 'Outer,Middle,Inner'.split(','), text: 'Middle', textChanged: (s) => { theRadialGauge.needleLength = s.text; } }); // gauges with custom needles new RadialGauge('#customGauge1', { thickness: .2, showText: ShowText.None, min: 0, max: 500, value: 100, startAngle: -45, sweepAngle: 270, showTicks: true, showTickText: true, tickSpacing: 50, isReadOnly: false, needleLength: NeedleLength.Inner, needleElement: RadialGauge.createNeedleElement([ { x: -35, y: 0 }, { x: -35, y: 35 }, { x: -30, y: 35 }, { x: -20, y: 5 }, { x: 60, y: 5 }, { x: 100, y: 0 } ], 15) }); new RadialGauge('#customGauge2', { thickness: .2, showText: ShowText.None, min: 0, max: 500, value: 100, startAngle: -45, sweepAngle: 270, showTicks: true, showTickText: true, tickSpacing: 50, isReadOnly: false, needleLength: NeedleLength.Inner, needleElement: RadialGauge.createNeedleElement([ { x: -10, y: 0 }, { x: -10, y: 12 }, { x: 0, y: 20 }, { x: 35, y: 20 }, { x: 50, y: 12 }, { x: 10, y: 12 }, { x: 10, y: 5 }, { x: 80, y: 5 }, { x: 100, y: 0 } ]) }); new RadialGauge('#customGauge3', { thickness: .2, showText: ShowText.Value, min: 0, max: 500, value: 100, startAngle: -45, sweepAngle: 270, showTicks: true, showTickText: true, tickSpacing: 50, isReadOnly: false, needleLength: NeedleLength.Inner, needleElement: RadialGauge.createNeedleElement([ { x: 40, y: 15 }, { x: 90, y: 0 } ]) }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Radial Gauges with Needle Pointers</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"> <p> Select one of the built-in needle shapes using the <b>needleShape</b> property: </p> <div class="row"> <div class="col-xs-4"> <label for="needle-shape"> needleShape </label> <input id="needle-shape" /><br /> <label for="needle-length"> needleLength </label> <input id="needle-length" /><br /> <br /> <label for="start"> startAngle </label> <input id="start" /><br /> <label for="sweep"> sweepAngle </label> <input id="sweep" /><br /> <label for="spacing"> tickSpacing </label> <input id="spacing" /><br /> </div> <div class="col-xs-4"> <div id="theRadialGauge"></div> </div> </div> <p> Or create custom needle shapes with the <b>createNeedleElement</b> method: </p> <div class="row"> <div class="col-xs-4"> <div id="customGauge1"></div> </div> <div class="col-xs-4"> <div id="customGauge2"></div> </div> <div class="col-xs-4"> <div id="customGauge3"></div> </div> </div> </div> </body> </html>
.wj-gauge { margin: 2em auto; width: 200px; height: 200px; } .wj-gauge .wj-needle { fill: orangered; stroke: orangered; } .wj-gauge .wj-needle .wj-inner-needle-cap { fill: white; } label { min-width: 100px; text-align: right; margin-right: 12px; } .wj-combobox { width: 150px; }
(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.chart.map': 'npm:@grapecity/wijmo.chart.map/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.rest': 'npm:@grapecity/wijmo.rest/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);