dojox/gauges/GlossyCircularGauge v1.9.1
Example of a Dojo GlossyCircularGauge
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.
Print article | This entry was posted by elvis on 07/16/13 at 02:08:00 pm . Follow any responses to this post through RSS 2.0. |