Gauges Use Examples
Examples
Canvas Gauges are highly configurable. So you may use your fantasy to draw variety of gauges of different look and feel, displaying different kind of information.
All gauges on this page are interactive. Click the gauge to get it’s code. Mouse over to animate (or touch and wait for animation on mobile devices).
Zero Configuration Gauges
Minimum declaration!
Radial Gauges as Compass
Compass wanted?
animated needle
animated plate
animated needle
animated plate
Other Custom Radial Gauges
A bit more custom views:
no-borders
half-gauge ticks horizontal
half-gauge ticks vertical (animated plate)
more custom coloring
Other Custom Linear Gauges
More Examples From Source Code
The examples below mainly used to test/observe some selected gauges features. Feel free to learn how to do different things using the examples and their source code.
- Radial gauges as HTML components [Source]
- Linear gauges as HTML components [Source]
- Async loading [Source]
- Using events [Source]
- Setting values [Source]
- Linear gauges with non-zero min value [Source]
- Deferred initialization of HTML components [Source]
- Outranged values [Source]
- Using min path of rotation at 360-degree radial gauges [Source]
- Scripted gauge initialization [Source]
- Radial gauges with progress bar [Source]
- Custom exact-value tick bars [Source]