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%

Red

50-75%

Moderate customer satisfaction

Yellow

75-100%

Good customer satisfaction

Green

The angular gauge thus created looks like this:

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:

{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "lowerLimitDisplay": "Bad", "upperLimitDisplay": "Good", "showValue": "1", "valueBelowPivot": "1", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67" } ] } }
``````{
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Last week",
"lowerLimit": "0",
"upperLimit": "100",
"upperLimitDisplay": "Good",
"showValue": "1",
"valueBelowPivot": "1",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"dials": {
"dial": [
{
"value": "67"
}
]
}
}``````

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

Top