RadGauge Overview
RadGauge is a highly customizable component that allows you to show the current status of a value within a range of upper and lower bounds, illustrate progress towards a goal or a summary of a fluctuating metric.
Figure 1: Radial gauge with indicators
Scales
RadGauge supports multiple GaugeScale objects. The scale has range and a set of indicators that are rendered according to the scale's range.
Indicators
GaugeIndicator is a visual element that points to or visualizes a range of values on a scale. Multiple indicators can be added to a scale. Indicators can be animated when their value is changed.
Angular directives
When using the RadGauge with Angular you are going to work with multiple custom angular RadGauge specific directives. In short these directives are used by the angular framework to enable 'linking' between separate HTML tags into one 'complex' element.
Here is a full list of the available custom Angular RadGauge directives and components:
Components
Represent the major elements:
| Selector | Class (more details) |
|---|---|
| RadRadialGauge | RadRadialGaugeComponent |
Directives
Represent the smaller elements that are visualized in RadListView:
| Selector | Class (more details) |
|---|---|
| RadialScale | TKRadialScaleDirective |
| RadialBarIndicator | TKRadialBarIndicatorDirective |
| RadialNeedle | TKRadialNeedleDirective |
Inline Directives
Represent the 'link' mechanism of the smaller with the major elements
| Selector | Class (more details) |
|---|---|
| tkRadialGaugeScales | TKRadialGaugeScalesDirective |
| tkRadialScaleIndicators | TKRadialScaleIndicatorsDirective |
| tkRadialBarIndicatorStyle | TKRadialBarIndicatorStyleDirective |
| tkRadialGaugeTitleStyle | TKRadialGaugeTitleStyleDirective |
| tkRadialGaugeSubtitleStyle | TKRadialGaugeSubtitleStyleDirective |
| tkRadialNeedleStyle | TKRadialNeedleStyleDirective |