dojox/gauges/GlossyCircularGauge v1.9.1

Example of a Dojo GlossyCircularGauge

Code

require(["dojox/gauges/GlossyCircularGauge", "dojo/query", "dojo/dom-attr", "dojo/NodeList-dom", "dojo/domReady!"],
function(Gauge, query, domAttr){
        var rateGauge = document.getElementById("rateGauge");
        var glossyCircular = new Gauge({
                background: [255, 255, 255, 0],
                title: 'Value',
                id: "rateGauge",
                width: 300,
                height: 300,
                min: 0,
                max: 100}, rateGauge);
        glossyCircular.startup();
        glossyCircular.addRanges(
                [{size: 65, low: 0, high: 25, hover: 'Worth doing just because it\'s fun', useTooltip: true,
                        color: { type: 'linear', colors:[{offset:0, color: '#030'}, {offset:1, color: '#090'}]}},
                        {size: 65, low: 25.1, high: 50, hover: 'Fun, but requires skill',
                        color: { type: 'linear', colors:[{offset:0, color: '#090'}, {offset:1, color: '#ff0'}]}},
                        {size: 65, low: 50.1, high: 75, hover: 'Challenging, requiring skill and research, but still fun',
                        color: { type: 'linear', colors:[{offset:0, color: '#ff0'}, {offset:1, color: '#f90'}]}},
                        {size: 65, low: 75.1, high: 100, hover: 'Work, not fun',
                        color: { type: 'linear', colors:[{offset:0, color: '#f90'}, {offset:1, color: '#f00'}]}}]);
});

Putting the ranges in the options when the gauge was created worked, but the hover tooltips didn't appear on hover. Adding the ranges with .addRanges, after .startup made it work.

The range borders are the first of the gradient colors. Looks cool.