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:

The angular gauge thus created looks like this:

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

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

• JSON
• XML

{
    "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"
            }
        ]
    }
}

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