gauge.js
100% native and cool looking animated JavaScript/CoffeScript gauge.
- No images, no external CSS - pure canvas
- No dependencies
- Highly configurable
- Resolution independent
- Animated gauge value changes
- Works in all major browsers
- MIT License
Usage
var opts = angle: 015 /// The span of the gauge arc lineWidth: 044 // The line thickness pointer: length: 09 // Relative to gauge radius strokeWidth: 0035 // The thickness colorStart: '#6FADCF' // Colors colorStop: '#8FC0DA' // just experiment with them strokeColor: '#E0E0E0' // to see which ones work best for you;var target = document; // your canvas elementvar gauge = target; // create sexy gauge!gaugemaxValue = 3000; // set max gauge valuegauge; // set min valuegauge; // set actual value
For an interactive demo and a list of all supported options please refer to the project's homepage.