gauge.js.
100% native and cool looking animated javascript/CoffeeScript gauge.
Example.
Variant selection.
Features.
No images, no external CSS - pure canvas No dependencies (jQuery is supported, but not required) Highly configurable Resolution independent Animated guage value changes (!) Works in all major browsers MIT License.
Usage.
The Gauge class handles drawing on canvas and starts the animation.
Advanced options.
Percentage color.
If you want to control how Gauge behaves in relation to the displayed value you can use the Guage option called percentColors . To use it add following entry to the options: see working example at JSFiddle.
For displaying value labels, enable the staticLabels option. A label will be printed at the given value just outside the display arc.
When separating the background sectors or zones to have static colors, you must supply the staticZones property in the Gauge object's options.
staticZones, percentColors and gradient are mutually exclusive. If staticZones is defined, it will take precedence.
Note: Zones should always be defined within the gauge objects .minValue and .maxValue limits.
Additionally, a height parameter may be passed in to increase the size of the zone (see example 4 gauge above).
Note: You can use this as an additional indicator (like in example 4) by making its color stand out, having a tall height and narrow range.
Now you may also add Ticks on two levels, major and minor (or divisions and Https://po.cash/ sub divisions).
divisions This is the number of major divisions around your arc. divWidth This is to set the width of the indicator. divLength This is a fractional percentage of the height of your arc line (0.5 = 50%) divColor This sets the color of the division markers subDivisions This sets the minor tick marks count between major ticks. subLength This is a fractional percentage of the height of your arc line (0.5 = 50%) subWidth This is to set the width of the indicator. subColor Binary Options This sets the color of the subdivision markers.
From pull request 133: You can add an icon (image) to the tip of the gauge pointer with the iconPath and iconScale options. The icon also rotates with the angle of the pointer.
jQuery plugin.
Gauge.js does not require jQuery. Anyway, if you use jQuery you may use the following plugin:
Supported browsers.
Chrome Safari 3.2+ Firefox 3.5+ IE 9 Opera 10.6+ Mobile Safari (iOS 3.2+) Android 2.3+
Changes.
Version 1.3.7 (15.06.2019)
AnimationUpdater now removes references finished rendering to prevent memory leaks.
Version 1.3.6 (28.11.2017)
Added support for scalable staticzone sections Added optional Ticks(Major/Minor) Fixed issue #146: Prevent requestAnimationFrame() callbacks from piling up Fixed issue #147: Correct use of options.generateGradient for Donut.
Version 1.3.5 (08.07.2017)
Fixed issue #139: Donut support for limitMin and -Max.
Version 1.3.4 (13.05.2017)
New feature: Add icon to tip of gauge pointer PR #133 Fixed issue #17 for Donut.
Version 1.3.3 (09.04.2017)
Improved protection for non-numerical inputs to .set(), which could cause problems like #124.
Version 1.3.2 (11.02.2017)
Bug-fixes (#116 and #117), performance improvements.
Version 1.3.1 (05.02.2017)
Added option 'minLimit' and improved max/min-hit value a lot (issue #84). Fixed multiple pointers color problem, issue #26 and #72. Added ability to scale the gauge radius to deal with issue #112.
A couple of other bugs and issues sorted out as well.
Version 1.3 (07.01.2017)
This version is a mix of new functionality and various smaller fixes and binary options improvements. Some of the inner transformations and options definition have been slightly altered/improved and made more consistent.