Server-side Programming Overview
The RadLinearGauge and RadRadialGauge share a lot of properties and are configured in much the same way. The elements are structured in inner tags that correspond to the visual structure of the control, so configuring a certain element is easiest done through its own tag that filters the available properties. To get a better understanding of the elements that create the gauge examine the RadGauge Structure article.
Configuring the global properties of the gauges
Table 1: Attribute properties of the main tag
| Name | Description |
|---|---|
| Height | Gets/sets the Height of the control in pixels |
| RenderAs | A property indicating whether the gauge will be rendered as Canvas , SVG or VML . Setting the property to Auto will instruct the chart to automatically decide how to be rendered, based on the browser. This property is available since Q1 2015 . |
| Transitions | Gets/sets whether an animation should be played when the control is rendered in order to show the value. |
| Width | Gets/sets the Width of the control in pixels |
Main appearance configuration
Table 2: Attribute properties in main tag > Appearance
| Name | Description |
|---|---|
| BackgroundColor | The background color of the main gauge area. Can take a common color name or a hex value |
Configuring the pointer for a Linear Gauge
Table 3: Attribute properties in main tag > Pointer
| Name | Description |
|---|---|
| Shape | The shape of the pointer - either a triangular mark pointing to the value (Arrow), or an entire bar that fills up to the chosen value (BarIndicator). |
| Color | The color of the pointer |
| Value | The value which the pointer shows |
Table 4: Attribute properties in main tag > Pointer > Track (applicable only when the pointer is BarIndicator)
| Name | Description |
|---|---|
| Color | The color of the background that the track represents |
| Opacity | The transparency of the track. The value must be between [0,1] where 0 is transparent and 1 is opaque. |
Configuring the pointer for a Radial Gauge
Table 5: Attribute properties in main tag > Pointer
| Name | Description |
|---|---|
| Color | The color of the arrow that points to the value |
| Value | The value which the pointer shows |
Table 6: Attribute properties in main tag > Pointer > Cap
| Name | Description |
|---|---|
| Color | The color of the cap (the axis around which the arrow rotates) |
| Size | The size of the arrow axis. The value must be between [0,1] where 0 means no pointer and 1 makes the cap fill the entire gauge |
Configuring the main Scale options
Table 7: Attribute properties in main tag > Scale
| Name | Description |
|---|---|
| EndAngle | The angle at which the Radial gauge ends. Zero is horizontal to the left. The difference between the StartAngle and the EndAngle must be less than 360 degrees. |
| MajorUnit | The distance between the major ticks and thus between the labels |
| Max | The value at which the gauge ends |
| Min | The value at which the gauge begins |
| MinorUnit | The distance between the minor ticks on the scale |
| Mirror | Whether the labels of the Linear gauge will be on the opposite side |
| Reverse | Whether the large values will be shown first. False by default |
| StartAngle | The angle at which the Radial gauge starts. Zero is horizontal to the left. The difference between the StartAngle and the EndAngle must be less than 360 degrees. |
| Vertical | Whether the Linear gauge will be vertical. True by default |
Configuring the Labels
Table 8: Attribute properties in main tag > Scale > Labels
| Name | Description |
|---|---|
| BackgroundColor | The background color of the labels. Can take a common color name or a hex value |
| Color | The font color of the labels. Can take a common color name or a hex value |
| Font | The font of the labels |
| Format | The format string for the labels. The {0} placeholder indicates the value of the pointer. The Template property has higher priority. |
| Position | The position of the Radial gauge labels - inside or outside of the dial |
| Template | The client template for the labels. The #=value# placeholder indicates the value of the pointer. Takes precedence over the Format property. |
| Visible | Whether the labels will be rendered |
Configuring the Major and Minor Ticks
Table 9: Attribute properties in main tag > Scale > [MajorTicks | MinorTicks]
| Name | Description |
|---|---|
| Color | The color of the ticks. Can take a common color name or a hex value |
| Size | The length of the ticks in pixels |
| Visible | Whether the ticks are shown |
| Width | The length of the ticks in pixels |
Configuring the Ranges
Table 10: Attribute properties in main tag > Scale > Ranges > GaugeRange
| Name | Description |
|---|---|
| Color | The color of the range. Can take a common color name or a hex value |
| From | The lower value of the range. Must fit within the Min/Max values ofthe Scale |
| To | The upper value of the range. Must fit within the Min/Max values ofthe Scale |