Gauges Architecture

Overview

In this short article we will show the parts of Gauges, so you can understand what you need to change or edit when creating your own gauges.

Although circular an linear gauges share almost the same terms - the have differences, so the description is split into two parts. Each description contain a scheme that demostrates each component of a gauge, live sampl and a list of configurable parts.

to top

Circular Gauge

Circular Gauge looks like gauges on a car dashboard. It consists of radial scale, holding your data range, pointer, and might support different color ranges for classifying your data. Gauges can be not only circular, but also semi-circular, actually - AnyChart supports any angle ranges.

Circular gauge can have several pointers of a different types, several color ranges, several axes with configurable scale, axis markers and so on. Please study an image below to see the basic parts of circular gauge.

to top

Circular Gauge Scheme

to top

Circular Gauge Sample

The sample below reproduces the gauge from the scheme above, all major nodes are included - you can launch the live sample and view its XML.

Live Sample:  Sample Parts Gauge 1

to top

Circular Gauge Configuration Waypoints

Now, when you know main parts you can learn about all options of all elements, please choose an element and study an appropriate tutorial:

to top

Linear Gauge

The Linear Gauge is a slider, or a wide line, that can hold much information and possess a variety features. It can be either vertical or horizontal, have any width of the line and use a single or multiple pointers to show your data value.

Linear gauge can have several pointers of a different types (although some of them are hardly compatible), several color ranges, several axes with configurable scale, axis markers and so on. Please study an image below to see the basic parts of linear gauge. The only difference between vertical and horizontal linear gauge is the orientation attribute, we will demostrate everything using horizontal one.

to top

Linear Gauge Scheme

to top

Linear Gauge Sample

The sample below reproduces the gauge from the scheme above, all major nodes are included - you can launch the live sample and view its XML.

Live Sample:  Sample Parts Gauge 2

to top

Linear Gauge Configuration Waypoints

Now, when you know main parts you can learn about all options of all elements, please choose an element and study an appropriate tutorial:

to top