Tickmarks with Text

Wijmo's gauges allow you to show tickmarks along their faces using the showTicks and tickSpacing properties.

To add text to each tickmark, set the showTickText property to true. You can style the text using CSS as usual.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { toggleClass } from '@grapecity/wijmo'; import { RadialGauge, LinearGauge } from '@grapecity/wijmo.gauge'; import { ComboBox } from '@grapecity/wijmo.input'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create gauges let theRadialGauge = new RadialGauge('#theRadialGauge', { min: 0, max: 500, value: 100, startAngle: -45, sweepAngle: 270, showTicks: true, showTickText: true, tickSpacing: 50, showText: 'Value', isReadOnly: false }); let theLinearGauge = new LinearGauge('#theLinearGauge', { min: 0, max: 500, value: 100, showTicks: true, showTickText: true, tickSpacing: 50, isReadOnly: false }); // configure gauges new ComboBox('#start', { itemsSource: [-90, -45, 0, 45, 90], selectedItem: -45, selectedIndexChanged: function (s, e) { theRadialGauge.startAngle = s.selectedItem; } }); new ComboBox('#sweep', { itemsSource: [-360, -270, -180, -90, 90, 180, 270, 360], selectedItem: -270, selectedIndexChanged: function (s, e) { theRadialGauge.sweepAngle = s.selectedItem; } }); new ComboBox('#spacing', { itemsSource: [25, 50, 100, 200, 250], selectedItem: 100, selectedIndexChanged: function (s, e) { theRadialGauge.tickSpacing = s.selectedItem; theLinearGauge.tickSpacing = s.selectedItem; } }); new ComboBox('#direction', { itemsSource: 'Left,Right,Up,Down'.split(','), selectedItem: 'Right', selectedIndexChanged: function (s, e) { theLinearGauge.direction = s.selectedItem; toggleClass(theLinearGauge.hostElement, 'vertical', s.text.match(/Up|Down/) != null); } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Tickmark Text</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 id="theRadialGauge"></div> </div> <div class="col-xs-6"> <label> startAngle <input id="start"> </label> <label> sweepAngle <input id="sweep"> </label> <label> tickSpacing <input id="spacing"> </label> </div> </div> <div class="row"> <div class="col-xs-6"> <div id="theLinearGauge"></div> </div> <div class="col-xs-6"> <label> direction <input id="direction"> </label> </div> </div> </div> </body> </html> label { display: block; text-align: right; width: 300px; } label .wj-combobox { width: 120px; } .wj-gauge { margin: 4em auto; } .wj-radialgauge { width: 200px; } .wj-lineargauge { width: 400px; } .wj-lineargauge.vertical { height: 300px; width: 2em; } body { font-size: 16px; margin-bottom: 48pt; } 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 { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjGaugeModule } from '@grapecity/wijmo.angular2.gauge'; import { LinearGauge, GaugeDirection } from '@grapecity/wijmo.gauge'; import { ComboBox } from '@grapecity/wijmo.input'; import { toggleClass } from '@grapecity/wijmo'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { // update linear gauge direction and style directionChanged(gauge: LinearGauge, cmbDirection: ComboBox) { gauge.direction = GaugeDirection[cmbDirection.text]; toggleClass(gauge.hostElement, 'vertical', cmbDirection.text.match(/Up|Down/) != null); } } @NgModule({ imports: [WjGaugeModule, WjInputModule, BrowserModule], 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>Tickmark Text</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"> <wj-radial-gauge #theRadialGauge [min]="0" [max]="500" [value]="100" [startAngle]="-45" [sweepAngle]="270" [showTicks]="true" [showTickText]="true" [tickSpacing]="50" [showText]="'Value'" [isReadOnly]="false"> </wj-radial-gauge> </div> <div class="col-xs-6"> <label> startAngle <wj-combo-box [itemsSource]="[-90, -45, 0, 45, 90]" [(selectedValue)]="theRadialGauge.startAngle"> </wj-combo-box> </label> <label> sweepAngle <wj-combo-box [itemsSource]="[-360, -270, -180, -90, 90, 180, 270, 360]" [(selectedValue)]="theRadialGauge.sweepAngle"> </wj-combo-box> </label> <label> tickSpacing <wj-combo-box [itemsSource]="[25, 50, 100, 200, 250]" [(selectedValue)]="theRadialGauge.tickSpacing"> </wj-combo-box> </label> </div> </div> <div class="row"> <div class="col-xs-6"> <wj-linear-gauge #theLinearGauge [min]="0" [max]="500" [value]="100" [showTicks]="true" [showTickText]="true" [tickSpacing]="theRadialGauge.tickSpacing" [isReadOnly]="false"> </wj-linear-gauge> </div> <div class="col-xs-6"> <label> direction <wj-combo-box #cmbDirection [itemsSource]="['Left', 'Right', 'Up', 'Down']" [selectedItem]="'Right'" (selectedIndexChanged)="directionChanged(theLinearGauge, cmbDirection)"> </wj-combo-box> </label> </div> </div> </div> label { display: block; text-align: right; width: 300px; } label .wj-combobox { width: 120px; } .wj-gauge { margin: 4em auto; } .wj-radialgauge { width: 200px; } .wj-lineargauge { width: 400px; } .wj-lineargauge.vertical { height: 300px; width: 2em; } body { font-size: 16px; margin-bottom: 48pt; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <wj-radial-gauge :min="0" :max="500" :value="100" :start-angle="startAngle" :sweep-angle="sweepAngle" :show-ticks="true" :show-tick-text="true" :tick-spacing="tickSpacing" :showText="'Value'" :isReadOnly="false"> </wj-radial-gauge> </div> <div class="col-xs-6"> <label> startAngle <wj-combo-box :itemsSource="startAngles" :selectedValue="startAngle" :selectedIndexChanged="startAngleChanged"> </wj-combo-box> </label> <label> sweepAngle <wj-combo-box :itemsSource="sweepAngles" :selectedValue="sweepAngle" :selectedIndexChanged="sweepAngleChanged"> </wj-combo-box> </label> <label> tickSpacing <wj-combo-box :itemsSource="tickSpacings" :selectedValue="tickSpacing" :selectedIndexChanged="tickSpacingChanged"> </wj-combo-box> </label> </div> </div> <div class="row"> <div class="col-xs-6" :class="{ vertical: isVertical }"> <wj-linear-gauge :min="0" :max="500" :value="100" :showTicks="true" :show-tick-text="true" :direction="direction" :tickSpacing="tickSpacing" :isReadOnly="false"> </wj-linear-gauge> </div> <div class="col-xs-6"> <label> direction <wj-combo-box :itemsSource="directions" :selectedItem="direction" :selectedIndexChanged="directionChanged"> </wj-combo-box> </label> </div> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import 'src/app.css'; import Vue from 'vue'; import { RadialGauge, LinearGauge } from '@grapecity/wijmo.vue2.gauge'; import { ComboBox } from '@grapecity/wijmo.vue2.input'; import { GaugeDirection } from '@grapecity/wijmo.gauge'; import { Globalize, Point, addClass, toggleClass, clamp } from '@grapecity/wijmo'; let App = Vue.extend({ name: 'app', data: function() { // arrays used to populate combo boxes let startAngles = [-90, -45, 0, 45, 90]; let sweepAngles = [-360, -270, -180, -90, 90, 180, 270, 360]; let tickSpacings = [25, 50, 100, 200, 250]; let directions = ['Left', 'Right', 'Up', 'Down']; return { startAngles: startAngles, sweepAngles: sweepAngles, tickSpacings: tickSpacings, directions: directions, // app state startAngle: startAngles[1], sweepAngle: sweepAngles[6], tickSpacing: tickSpacings[1], direction: GaugeDirection.Right, isVertical: false } }, methods: { startAngleChanged: function(s, e) { this.startAngle = s.selectedItem; }, sweepAngleChanged: function(s, e) { this.sweepAngle = s.selectedItem; }, tickSpacingChanged: function(s, e) { this.tickSpacing = s.selectedItem; }, directionChanged: function(s, e) { this.direction = GaugeDirection[s.selectedItem]; this.isVertical = GaugeDirection[this.direction].match(/Up|Down/) != null; } } }); 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>Tickmark Text</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 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { RadialGauge, LinearGauge } from '@grapecity/wijmo.react.gauge'; import { ComboBox } from '@grapecity/wijmo.react.input'; import { GaugeDirection } from '@grapecity/wijmo.gauge'; class App extends React.Component { // initialize state constructor(props) { super(props); // arrays used to populate combo boxes this.startAngles = [-90, -45, 0, 45, 90]; this.sweepAngles = [-360, -270, -180, -90, 90, 180, 270, 360]; this.tickSpacings = [25, 50, 100, 200, 250]; this.directions = ['Left', 'Right', 'Up', 'Down']; this.state = { startAngle: this.startAngles[1], sweepAngle: this.sweepAngles[6], tickSpacing: this.tickSpacings[1], direction: GaugeDirection.Right }; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <RadialGauge style={{ height: '200px' }} min={0} max={500} value={100} showTicks={true} showTickText={true} showText={'Value'} isReadOnly={false} startAngle={this.state.startAngle} sweepAngle={this.state.sweepAngle} tickSpacing={this.state.tickSpacing}> </RadialGauge> </div> <div className="col-xs-6"> <label> startAngle{' '} <ComboBox itemsSource={this.startAngles} selectedItem={this.state.startAngle} selectedIndexChanged={sender => { this.setState({ startAngle: sender.selectedItem }); }}> </ComboBox> </label> <label> sweepAngle{' '} <ComboBox itemsSource={this.sweepAngles} selectedItem={this.state.sweepAngle} selectedIndexChanged={sender => { this.setState({ sweepAngle: sender.selectedItem }); }}> </ComboBox> </label> <label> tickSpacing{' '} <ComboBox itemsSource={this.tickSpacings} selectedItem={this.state.tickSpacing} selectedIndexChanged={sender => { this.setState({ tickSpacing: sender.selectedItem }); }}> </ComboBox> </label> </div> </div> <div className="row"> <div className={'col-xs-6' + (this.isVertical() ? ' vertical' : '')}> <LinearGauge min={0} max={500} value={100} showTicks={true} showTickText={true} isReadOnly={false} direction={this.state.direction} tickSpacing={this.state.tickSpacing}> </LinearGauge> </div> <div className="col-xs-6"> <label> direction{' '} <ComboBox itemsSource={this.directions} selectedItem={GaugeDirection[this.state.direction]} selectedIndexChanged={sender => { this.setState({ direction: GaugeDirection[sender.selectedItem] }); }}> </ComboBox> </label> </div> </div> </div>); } // used to style the linear gauge isVertical() { return GaugeDirection[this.state.direction].match(/Up|Down/) != null; } } 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>Tickmark Text</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> label { display: block; text-align: right; width: 300px; } label .wj-combobox { width: 120px; } .wj-gauge { margin: 4em auto; } .wj-radialgauge { width: 200px; } .wj-lineargauge { width: 400px; } .vertical .wj-lineargauge { height: 300px; width: 2em; } body { font-size: 16px; margin-bottom: 48pt; }