Dojo’s Gauges module provides a framework of classes for creating gauges as well as predefined, ready to use gauge widgets.
Both circular and rectangular gauges (horizontal and vertical) are supported.

The main features for this framework are:

Rich set of new gauges, circular, semi circular, vertical and horizontal that can be used with markups,

Predefined gauges are available in the dojox.dgauges.components package. There are 5 sets of gauges; each set contains 4 gauges: a circular, a semi-circular, a horizontal and a vertical gauge. All these gauges contain one linear scale and one marker.

This example shows how to add a gauge to a Dojo application using markup:

These classes are Dijits responsible for holding the elements of the gauge. They provide a layout mechanism to control the size and position of elements.
A gauge is made of GFX decorations, text indicators and scales (subclasses of ScaleBase). Scales hold one or more indicators (value or range indicators). These elements are added to the scale using the addElement method.

There is a noticeable difference between circular and rectangular gauges about their drawing/layout mechanisms:

Circular gauges have a fixed aspect ratio; the gauge visual representation is scaled to use as much room as possible, and then translated to be centered.

Note: To create a circular gauge with no background, add a drawing function which return a “ghost” shape (no fill and no stroke) of the desired gauge size.

Rectangular gauges use a different approach; they are redrawn when the widget is resized. This allows having “elastic” components that can have any size. A rectangular gauge can be separated into 3 parts: “leading”, “middle” and “trailing”. The “leading” and “trailing” areas have fixed size; the “middle” area fills the remaining room. When adding an element to a rectangular gauge, set the third argument of addElement method to “leading”, “middle” or “trailing”. If the third argument is not specified, the element uses all the room. For an example of rectangular gauge layout, see gauge.components.default.LinearHorizontalGauge implementation.

Scalers are used by scales to generate logical ticks (ticks are drawn by scales) and data-transform operations. Logical ticks are rendered by scales; they are passed as argument to the tickShapeFunc of the scale which is called for each tick generated by the scaler.

The current version provides 3 types of scalers:

LinearScaler: The most common type of scaler, mainly characterized by “minimum”, “maximum”, “majorTickInterval” and “minorTickInterval”.

MultiLinearScaler: This type of scaler is useful to display very large value intervals that are difficult to render with a linear scale. This type of scaler is configured with an array of numbers representing the major tick values.

A scale handles a scaler (mandatory) and one or more value or range indicators.
A scale and its scaler collaborate to handle the ticks. The scale provides a tick drawing function which can be redefined by the user. This function takes a tick and a GFX Group as arguments; the following code snippet shows the default tick rendering function used in the library:

Indicators are responsible for displaying one or two values (range indicators) according to the scale properties. These indicators are always associated to a scale. A single value indicator is typically used for needles in circular gauge and thumbs in rectangular gauges.
Range indicators display a range of values defined by start and value properties. They can be used as decorations to give information on the range (i.e. Low/Normal/High) or as dynamic indicators by changing value programmatically or using interactions.

A value indicator is drawn by its indicatorShapeFunc. The following code show a needle drawn around its (0, 0) coordinates origin. The origin is used as center for rotation of needles in circular gauges. For rectangular gauges, the origin is aligned with the rendered value.

Text can be added to a gauge using addElement with a TextIndicator instance as argument.
A text indicator can be configured in two ways:

By setting the value property with an arbitrary text,

By setting the indicator property to a value or a range indicator. In this case, the text is automatically updated when the value of the indicator changes. The labelFunc can be used to customize the rendered text.

define(["dojo/_base/lang","dojo/_base/declare","dojox/dgauges/RectangularGauge","dojox/dgauges/LinearScaler","dojox/dgauges/RectangularScale","dojox/dgauges/RectangularValueIndicator","dojox/dgauges/RectangularRangeIndicator","dojox/dgauges/TextIndicator"],function(lang,declare,RectangularGauge,LinearScaler,RectangularScale,RectangularValueIndicator,RectangularRangeIndicator,TextIndicator){returndeclare("dojox.dgauges.tests.gauges.SimpleRectangularGauge",RectangularGauge,{constructor:function(){// Draw backgroundthis.addElement("background",function(g,w){returng.createRect({x:1,y:1,width:w-2,height:50,r:3}).setFill("#CBCBCB").setStroke({color:"black",width:2});});this.addElement("leadingArea",function(g,w){returng.createRect({x:1,y:1,width:60,height:50,r:3}).setFill("#ABABAB").setStroke({color:"black",width:2});},"leading");this.addElement("trailingArea",function(g,w){// A spacer to take into account the width of the stroke on the right;g.createLine({x2:62});returng.createRect({x:1,y:1,width:60,height:50,r:3}).setFill("#ABABAB").setStroke({color:"black",width:2});},"trailing");// Scalevarscale=newRectangularScale({scaler:newLinearScaler({minimum:-100}),labelPosition:"trailing",paddingTop:15});this.addElement("scale",scale);// Value indicatorvarindicator=newRectangularValueIndicator();indicator.indicatorShapeFunc=lang.hitch(this,function(group){group.createPolyline([-5,0,5,0,0,10,-5,0]).setFill("black");returngroup;});indicator.set("paddingTop",5);indicator.set("interactionArea","gauge");scale.addIndicator("indicator",indicator);// Indicator TextvartrailingText=newTextIndicator({x:30,y:30,indicator:indicator,labelFunc:function(v){returnv+" °C"}});this.addElement("trailingText",trailingText,"trailing");varleadingText=newTextIndicator({x:30,y:30,indicator:indicator,labelFunc:function(v){return((9/5)*v+32).toFixed()+" °F"}});this.addElement("leadingText",leadingText,"leading");scale.addIndicator("gradientIndicator",newRectangularRangeIndicator({start:-100,value:100,paddingTop:15,stroke:null,fill:{type:"linear",x1:0,y1:0,x2:1,y2:0,colors:[{color:"#7FB2F0",offset:0},{color:"#FFFFFF",offset:.5},{color:"#F03221",offset:1}]}}),true);}});});