FusionCharts for Flex > Creating Widgets > Angular Gauge > Introduction

Angular gauges are essentially like the speedometer or fuel gauge of your car. They use a radial scale to display your data range and a dial is used to indicate the data value.

An angular/meter/dial gauge chart is used to display a specific data set utilizing an indicator that moves within a circular range to indicate whether the monitored data is within defined limits. Colors can be selected for the data range to suit the application such as green for satisfactory, yellow for caution, and red for alarm.

A few outputs of FusionWidgets Angular Gauge chart can be reproduced as under:

As you can see above that the charts are defined by minimum and maximum values (referred to as lower limit and upper limit). Within that scale, you can create various qualitative ranges (color range) to classify your data. The purpose is to classify that value as belonging to a predetermined range. For example, you might define a range called 'Best' that consists of values between 60 and 100. You might also create a range called 'Weak' that consists of values between 30 and 60. For each range, you can define a color. This will help visually distinguish the ranges from each other.

To create a FusionWidgets Angular Gauge chart, you need to:

  • Decide the lower and upper limit of chart
  • Decide the cosmetic and functional properties of the chart
  • Decide the color range for the chart. Suppose you are plotting a chart to show the production output of a factory, the color range could be:
    0-100 pieces/hr – Under Average – Red
    100-200 pieces/hr – Average Production - Yellow
    200-300 pieces/hr – Very good - Green
  • Decide trend points if any. For example, if you wish to mark an average at 175 - say for 'Last week’s average production', you can use trend points to do the same.
  • Decide the chart value(s). FusionWidgets allows to indicate multiple values on the angular gauge chart. All you need to do is decide the value for each spindle/dial that would indicate the width and the color of each one of them.

Let us learn the anatomy of an angular gauge chart before we move to the XML structure of the chart.