The following items area configurable
| Attribute | Usage | Effect | Notes |
|---|---|---|---|
| width | width="200" |
Sets the width of the gauge | The width should be at least twice the height |
| height | height="200 |
Sets the height of the gauge | The height should be at least half of the width |
| min-value | min-value="0" |
Sets the minimum value for the scale | |
| max-value | max-value="200" |
Sets the maximum value for the scale | |
| start-color | start-color="green" |
Sets the initial color for your gauge | You can keep the gauge one color by setting both the start and end to the same value |
| end-color | end-color=""red |
Sets the end color for your gauge | |
| sections | Optional sections="[[0,10],[10,15],[15,30]]" or
sections="angularProperty" |
Optionally sets the sections in your gauge | Use a javascript style array of start and end pairs or bind to an angular property that represents an array of start end pairs. If left blank, you will be given 10 evenly sized sections based on your min/max values |
| value | value="10" or value="angularProperty" |
Sets the value of your gauge | If you bind to an angular property the needle will update as the value changes |
It's very simple to create a static gauge, just don't bind any of the attributes to an angular model
<div class="gauge" d3-gauge id="static-gauge1" width="200" height="140" min-value="0" max-value="30" start-color="green" end-color="red" value="20" sections="[[0,10],[10,15],[15,30]]"></div>
Use the number selector to change the value of the gauge
<div class="gauge" d3-gauge id="test-div" width="200" height="140" min-value="0" max-value="200" start-color="green" end-color="purple" value="demoValue"></div>