canvas-dial
A simple dial or gauge implemented in HTML5 Canvas and designed to be performant and flexible.
API
new Dial(element, options)
create a new dial, owning a single DOM element.
Options are listed below
dial.draw(value)
update the dial to show a new value.
Options
// the width & height of the gauge canvas element diameter: 20 // the width of the stroke indicating the gauge's background // and foreground values width: 8 // the outer width of the gauge outer: 15 // the gap at the bottom of the gauge, if any gap: 10 // the strokeStyle of the background that indicates // the total range of the gauge background: '#eee' // the strokeStyle of the dial - the part that shows data foreground: '#00f' // the minimum value in the scale. min: 0 // the value from which the gauge starts. 0 is common // for absolute values, 0.5 can be useful for things like // saturation/desaturation start: 05 // the maximum value represented by the gauge max: 1