Simple Gauge Example

An angular gauge is used to display a specific data point using a dial over a radial scale with defined limits.

In this section, you will be shown how you can create a simple angular gauge.

Creating a Simple Angular Gauge

To create an angular gauge, you need to:

  • Define the lower and upper limit of the gauge scale

  • Define the cosmetic and functional properties of the gauge

  • Define the color range for the gauge scale e.g. as shown in the table above.

  • Define trend-points, if any.

  • Decide the chart value(s). FusionCharts Suite XT allows you to indicate multiple values on the angular gauge chart. All you have to do is decide the value each spindle/dial will indicate and the width and color of each one of them.

As an example, we will create n angular gauge that will indicate the customer satisfaction score for the last week at Harry’s SuperMart. To create the angular gauge to plot the customer satisfaction score, you need to:

  • Define the minimum value as 0 and the maximum value as 100. These limits are displayed at the starting and ending points of the circular scale.

  • Divide the gauge scale into three regions, indicating a bad, a satisfactory, and a good customer satisfaction index. We will color code the three regions in red, yellow, and green, respectively.

  • Point the dial of the angular gauge to a certain value, say 67, in the above image.

The scale, on which the score will be plotted, can be defined as shown in the table below:

Range What it means? Color to be represented in
0-50% Bad customer satisfaction Red
50-75% Moderate customer satisfaction Yellow
75-100% Good customer satisfaction Green

The angular gauge thus created looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to create a simple angular gauge:

Attribute Name Description
lowerLimit It is used to specify the lower limit, or the minimum value, of the gauge scale, eg. 0
upperLimit It is used to specify the upper limit, or the maximum value, of the gauge scale, eg. 100
lowerLimitDisplay It is used to specify the label to be displayed with the lower limit value on the gauge scale, eg. Bad
upperLimitDisplay It is used to specify the label to be displayed with the upper limit value on the gauge scale, eg. Good
showValue It is used to specify whether the data value will be rendered along with the gauge. Setting this attribute to 1 will show the data value with the gauge, setting it to 0 (default) will hide the value.
valueBelowPivot It is used to specify whether the data value, if being rendered, will be shown above the pivot or below it. Setting this attribute to 1 will show the value below the pivot, setting it to 0 (default) will show it above the pivot.
minValue It is used to specify the lower limit of a color range, for example, for a color range of 0-50, this value will be 0. This attribute belongs to the color object, which in turn belongs to the colorRange object.
maxValue It is used to specify the upper limit of a color range, for example, for a color range of 0-50, this value will be 50. This attribute belongs to the color object, which in turn belongs to the colorRange object.
value It is used to specify the value that should be plotted on the gauge scale, eg. 67. This attribute belongs to the dial object, which in turn

The data structure needed to render this angular gauge is given below:

...

There! You have now seen how you can create a simple angular gauge.