Tickmarks

Tickmarks may be shown along the face to help users read the gauge. Their visibility and position are controlled by the showTicks, tickSpacing, and step properties.

The tickmark color and width can be defined in CSS or in code.

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, hasShadow: false, showText: 'All', showTicks: true, tickSpacing: 10, startAngle: -30, sweepAngle: 240, value: 50, pointer: { thickness: 0.5 } }); // // customize tickmarks document.getElementById('showTicks').addEventListener('click', (e) => { theGauge.showTicks = e.target.checked; }); let tickSpacing = new input.InputNumber('#tickSpacing', { min: 0, max: 100, step: 5, format: 'n0', value: theGauge.tickSpacing, valueChanged: (s, e) => { theGauge.tickSpacing = s.value; } }); let tickColor = new input.InputColor('#tickColor', { value: 'white', valueChanged: (s, e) => { let style = theGauge.hostElement.querySelector('.wj-ticks').style; style.stroke = s.value; } }); let tickWidth = new input.InputNumber('#tickWidth', { min: 0, max: 5, step: .25, format: 'n1', value: 2, valueChanged: (s, e) => { let style = theGauge.hostElement.querySelector('.wj-ticks').style; style.strokeWidth = s.value.toString(); } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Tickmarks</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-check"> <label for="showTicks" class="form-check-label">Tickmarks:</label> <input id="showTicks" type="checkbox" checked="checked" class="form-check-input"> </div> <div class="form-group"> <label for="tickSpacing">Spacing:</label> <div id="tickSpacing"></div> </div> <div class="form-group"> <label for="tickWidth">Width:</label> <div id="tickWidth"></div> </div> <div class="form-group"> <label for="tickColor">Color:</label> <div id="tickColor"></div> </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-ticks { stroke: white; stroke-width: 2px; } label { width: 120px; text-align: right; margin-right: 3px; } .wj-dropdown, .wj-inputnumber { width: 120px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as gauge from '@grapecity/wijmo.gauge'; // 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 { showTicks = true; tickSpacing = 10; // changeTickWidth(gauge: gauge.RadialGauge, value: number) { (gauge.hostElement.querySelector('.wj-ticks') as HTMLElement).style.strokeWidth = value.toString(); } // changeTickColor(gauge: gauge.RadialGauge, value: string) { (gauge.hostElement.querySelector('.wj-ticks') as HTMLElement).style.stroke = value; } } // @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>Tickmarks</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-check"> <label for="showTicks" class="form-check-label">Tickmarks:</label> <input id="showTicks" type="checkbox" [(ngModel)]="showTicks" class="form-check-input"> </div> <div class="form-group"> <label for="tickSpacing">Spacing</label> <wj-input-number id="tickSpacing" [min]="0" [max]="100" [step]="5" [format]="'n0'" [(value)]="tickSpacing"> </wj-input-number> </div> <div class="form-group"> <label for="tickWidth">Width:</label> <wj-input-number #tickWidth id="tickWidth" [min]="0" [max]="5" [step]="0.25" [format]="'n1'" [value]="2" (valueChanged)="changeTickWidth(theGauge, tickWidth.value)"></wj-input-number> </div> <div class="form-group"> <label for="tickColor">Color:</label> <wj-input-color #tickColor id="tickColor" [value]="'white'" (valueChanged)="changeTickColor(theGauge, tickColor.value)"></wj-input-color> </div> </div> <div class="col-xs-6"> <wj-radial-gauge #theGauge [isReadOnly]="false" [hasShadow]="false" [showText]="'All'" [showTicks]="showTicks" [tickSpacing]="tickSpacing" [startAngle]="-30" [sweepAngle]="240" [value]="50"> <wj-range [wjProperty]="'pointer'" [thickness]="0.5"></wj-range> </wj-radial-gauge> </div> </div> </div> .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-ticks { stroke: white; stroke-width: 2px; } label { width: 120px; text-align: right; margin-right: 3px; } .wj-dropdown, .wj-inputnumber { width: 120px; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-check"> <label for="showTicks" class="form-check-label">Tickmarks:</label> <input id="showTicks" type="checkbox" v-model="theGauge.showTicks" class="form-check-input"> </div> <div class="form-group"> <label for="tickSpacing">Spacing</label> <wj-input-number id="tickSpacing" :min=0 :max=100 :step=5 format="n0" :value="theGauge.tickSpacing" :valueChanged="changeTickSpacing"> </wj-input-number> </div> <div class="form-group"> <label for="tickWidth">Width:</label> <wj-input-number id="tickWidth" :min=0 :max=5 :step=0.25 format="n1" :value="theGauge.tickWidth" :valueChanged="changeTickWidth"></wj-input-number> </div> <div class="form-group"> <label for="tickColor">Color:</label> <wj-input-color id="tickColor" :value="theGauge.tickColor" :valueChanged="changeTickColor"></wj-input-color> </div> </div> <div class="col-xs-6"> <wj-radial-gauge :isReadOnly=false :hasShadow=false showText="All" :tickColor="theGauge.tickColor" :showTicks="theGauge.showTicks" :tickSpacing="theGauge.tickSpacing" :startAngle=-30 :sweepAngle=240 :value=50> <wj-range wjProperty="pointer" :thickness=0.5 ></wj-range> </wj-radial-gauge> </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 { theGauge: { tickWidth: 2, tickSpacing: 10, showTicks: true, tickColor: 'white' } } }, methods: { changeTickSpacing: function(s,e) { this.theGauge[s.hostElement.id] = s.value; }, changeTickWidth: function(s,e) { document.querySelector('.wj-ticks').style.strokeWidth = s.value.toString(); }, changeTickColor: function(s,e) { document.querySelector('.wj-ticks').style.stroke = 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>Tickmarks</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 = { tickWidth: 2, tickSpacing: 10, showTicks: true, tickColor: 'white', value: 50 }; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <div className="form-check"> <label data-for="showTicks" className="form-check-label">Tickmarks:</label> <input id="showTicks" type="checkbox" checked={this.state.showTicks} className="form-check-input" onChange={this._onShowTicksChanged.bind(this)}/> </div> <div className="form-group"> <label data-for="tickSpacing">Spacing:</label> <wjInput.InputNumber id="tickSpacing" min={0} max={100} step={5} format="n0" value={this.state.tickSpacing} valueChanged={this._onTickSpacingChanged.bind(this)}> </wjInput.InputNumber> </div> <div className="form-group"> <label data-for="tickWidth">Width:</label> <wjInput.InputNumber id="tickWidth" min={0} max={5} step={0.25} format="n1" value={this.state.tickWidth} valueChanged={this._onTickWidthChanged.bind(this)}> </wjInput.InputNumber> </div> <div className="form-group"> <label data-for="tickColor">Color:</label> <wjInput.InputColor id="tickColor" value={this.state.tickColor} valueChanged={this._onTickColorChanged.bind(this)}> </wjInput.InputColor> </div> </div> <div className="col-xs-6"> <wjGauge.RadialGauge isReadOnly={false} hasShadow={false} showText="All" tickColor={this.state.tickColor} showTicks={this.state.showTicks} tickSpacing={this.state.tickSpacing} startAngle={-30} sweepAngle={240} value={this.state.value} valueChanged={this._onValueChanged.bind(this)}> <wjGauge.Range wjProperty="pointer" thickness={0.5}></wjGauge.Range> </wjGauge.RadialGauge> </div> </div> </div>); } _onTickSpacingChanged(sender) { this.setState({ tickSpacing: sender.value }); } _onTickWidthChanged(sender) { this.setState({ tickWidth: sender.value }); document.querySelector('.wj-ticks').style.strokeWidth = sender.value.toString(); } _onTickColorChanged(sender) { this.setState({ tickColor: sender.value }); document.querySelector('.wj-ticks').style.stroke = sender.value; } _onShowTicksChanged() { this.setState({ showTicks: !this.state.showTicks }); } _onValueChanged(sender) { this.setState({ value: sender.value }); } } 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>Tickmarks</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> .container-fluid .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); } .container-fluid .wj-gauge .wj-ticks { stroke: white; stroke-width: 2px; } label { width: 120px; text-align: right; margin-right: 3px; } .wj-dropdown, .wj-inputnumber { width: 120px; }