Simple Angular 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 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:
{
"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 |
|---|---|
|
It is used to specify the lower limit, or the minimum value, of the gauge scale, eg. 0 |
|
It is used to specify the upper limit, or the maximum value, of the gauge scale, eg. 100 |
|
It is used to specify the label to be displayed with the lower limit value on the gauge scale, eg. Bad |
|
It is used to specify the label to be displayed with the upper limit value on the gauge scale, eg. Good |
|
It is used to specify whether the data value will be rendered along with the gauge. Setting this attribute to |
|
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 |
|
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 |
|
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 |
|
It is used to specify the value that should be plotted on the gauge scale, eg. 67. This attribute belongs to the |