Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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 an 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 will load here..
{ "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",
        "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"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '250',
    dataFormat: 'json',
    dataSource: {
        "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"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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

Top