FusionCharts for Flex > Creating Widgets > Linear Gauge > Elements of the Gauge

A linear gauge chart consists of the following elements:

  • Horizontal scale (Color Range)
  • Pointers (Data Value Indicator)
  • Tick Marks & Values
  • Trend points & Trend zones
  • Annotations

Here, we'll explain each of them in detail. Let's first have a look at a standard linear gauge chart enlisting the various basic components:

Horizontal Scale
The linear gauge chart is defined by minimum and maximum values. Within that scale you can create various ranges to classify your data. There can be any number of ranges as you wish to. For each range, you need to specify the minimum and maximum limits, a name for the range and the hex color for the range. Like in the above chart, we have the chart with upper limit as 9 and lower limit as 0. And the color ranges are 0-2, 2-6 and 6-9 and the range names are Micro, Moderate, and Strong respectively.

Note: Each color range should have its own unique range value. That is say, if a range is defined as 0-2, the next range should have the minimum value as 2 necessarily. It cannot have anything other than this. Similarly, if the upper limit of the chart is 9, the last range should have maximum value as 9.

Data Pointer
Data pointer is the data indicator on the chart on the linear gauge charts. You can define the number of sides (polygonal shape) of the pointer, its border and background color, and its radius. You can also define multiple pointers with different values and cosmetics for each one of them.

Tick Marks
Tick marks are the calibration marks on the horizontal scale to help interpret the reading. There are two types of tick marks, which can be drawn on the chart:

  • Major Tick Marks – These are the bigger lines below the scale
  • Minor Tick Marks – These are the smaller lines enclosed within the bigger lines

For all the tick marks, you can specify the color and the height. You can also opt to show/hide the tick mark values.

Trend Points / Trend zones
The linear gauge chart allows to define trend points on the chart. For example, if you wish to highlight a certain value (say like last year’s average), you could use the trend point feature to do so.

Annotations
Annotations allow to draw your own custom shapes, text, or load images on the chart.

Now that we are aware of the basic components that make up a linear gauge, lets go ahead to build a simple linear gauge.