This directive has no dependencies other than Angular itself. Version 1.3.11 was used. It was designed to compose a lightweight dashboard and now can be freely downloaded and used in whatever purpose its MIT licence allows.
| World Demographics | |||
|---|---|---|---|
| Males | Urban | Seniors | Literacy |
|
|
|
|
|
| Source: Index Mundi | |||
The example above shows how easy it is to present nice looking statistical data in a static manner. Below is the code used to achieve this result:
<canvas-gauge width="160" under-color="#EFEFEF" over-color="#FFD700" value="males" mask="(@)%"
style="color: gray"></canvas-gauge>
<canvas-gauge width="160" under-color="#EFEFEF" over-color="#FF4500" value="urban" mask="(@)%"
style="color: gray"></canvas-gauge>
<canvas-gauge width="160" under-color="#EFEFEF" over-color="#663399" value="seniors" mask="(@)%"
style="color: gray"></canvas-gauge>
<canvas-gauge width="160" under-color="#EFEFEF" over-color="#2E8B57" value="literacy" mask="(@)%"
style="color: gray"></canvas-gauge>
| Population by Age Structure | |||
|---|---|---|---|
| Males | Females | ||
|
|
|
||
| Source: Wikipedia | |||
The example above shows the same kind of presentation but with dynamic data. Change the age structure dropdown and the gauges change accordingly
<canvas-gauge width="300" under-color="#EFEFEF" over-color="#6495ED" value="malestat" mask="(@)%"
style="color: gray"></canvas-gauge>
<canvas-gauge width="300" under-color="#EFEFEF" over-color="#E9967A" value="femalestat" mask="(@)%"
style="color: gray"></canvas-gauge>
Element <canvas-gauge>
Used to generate the gauge. Will calculate the necessary height based on the given width. The ratio is 55%.
Attribute width
Sets the gauge's width in pixels. It's height will be calculated and is always 55% of its width. Default is 100. Plain attribute.
Attribute over-color
Sets the gauge's value color. This color is used to paint over the base semi-circle, up to the point calculated by the value supplied. It is also the color used to paint the value in the middle of the gauge. The shadow color used is over-color 30% darkened. Plain attribute.
Attribute under-color
Sets the gauge's primer, or under, color. This color is used to paint the base semi-circle. Plain attribute.
Attribute value
Sets the gauge's value. This attribute works with min and max to calculate up to what point the gauge should be painted. It is a model attribute that updates the gauge when its value change.
Attribute min
Sets the gauge's minimum value used to calculate the gauge's painting. This value is shown below the left base of the gauge's semi-circle. Default is 0. Plain attribute.
Attribute max
Set the gauge's maximum value used to calculate the gauge's painting. This value is shown below the right base of the gauge's semi-circle. Default is 100. Plain attribute.
Attribute placeholder
It is used along with the mask attribute to set an expression to be shown in the bottom center of the gauge. The placeholder will be replaced with the value of the value attribute. Default is (@). Plain attribute.
Attribute mask
Is used to let other characters be composed with the value shown. To use it from your expression, make sure the placeholder value is somewhere in it. For instance, to show percentage use mask="(@)%". To show a dollar value use mask="$ (@)". Default is the value of placeholder attribute. Plain attribute.