Radial Gauge

Overview

The RadialGauge component is a circular slider with tick mark support. The arc length is customizable.

Creating the RadialGauge Component

The RadialGauge extends the Flex SliderBase class, which means that it can be added to any container that implements IVisualElementContainer.

Using the RadialGauge Component

The most relevant property is "value", which is the currently set, bindable, value. The "angleStart" and "angleEnd" properties are used to define the arc length that the slider will sweep out.

Like other SliderBase components, use minimum and maximum to set the bounds of acceptable values.

Tick Marks

If "showTicks" is true, then major and minor ticks will be displayed. Major ticks are ticks that can display a label next to them and minor ticks are ticks displayed between the major ticks.

If "showTicks" is true, there are a minimum of 2 major ticks.

Tick Labels

Tick labels will by default display the numerical value of the major ticks they are next to. The precision of the number displayed is set via the "labelDefaultPrecision" property.

Use the "labelsFormatFunction" to display custom labels.

Use the "showTickLabels" property to not display major tick labels.

Static Infometrics

Set the "editable" property to false to simply display data and not allow user interaction. See the 3rd example of the RadialGauge demo for an example.

Animations & Effects

If the track is directly clicked, the thumb will animate to the new value. The duration of this animation can be set via the inherited "slideDuration" style.

Accessibility

Field can be tabbed to and interacted with via the keyboard and mouse wheel like other SliderBase subclasses.

Selected Custom Styles

See ASDocs for GaugeBase. Numerous custom styles.

Themes & Skinning

A skin for the Spark themes is provided.

Example

See the RadialGauge demo application for example code.

Back To Top