Simple Linear Gauge Example
The linear gauge is used to display a specific data point over a horizontal scale using a slider component - also called as the pointer - to indicate the data value.
In this section you will be shown how you can create a simple linear gauge.
Creating a Simple Linear Gauge
For our example, we will create a linear gauge that will indicate the server utilization at food.hsm.com.
To create a simple linear gauge, you need to:
-
Define the lower and upper limits (also known as the minimum and maximum values) for the gauge scale. For our example, because we are plotting the server utilization in percentage, the lower limit will be 0 and the upper limit will be 100.
-
Divide the gauge scale into three regions that indicate the three utilization limits for the server - low, moderate, and high. This is shown in the table below:
| Range | Server Utilization Level | Color for the Range |
|---|---|---|
0-35% |
Low |
Green e.g. |
35-70% |
Moderate |
Yellow e.g. |
70-100% |
High |
Red e.g. |
- Decide a data value for the pointer to point to. For our example, we will set the data value to 75.
The linear gauge thus created to show the server utilization, in percentage, at food.hsm.com looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "food.hsm.com",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
},
"trendPoints": {
"point": [
{
"startValue": "70",
"displayValue": " ",
"dashed": "1",
"showValues": "0"
},
{
"startValue": "85",
"displayValue": " ",
"dashed": "1",
"showValues": "0"
},
{
"startValue": "70",
"endValue": "85",
"displayValue": " ",
"alpha": "40"
}
]
},
"annotations": {
"origw": "400",
"origh": "190",
"autoscale": "1",
"groups": [
{
"id": "range",
"items": [
{
"id": "rangeBg",
"type": "rectangle",
"x": "$chartCenterX-115",
"y": "$chartEndY-35",
"tox": "$chartCenterX +115",
"toy": "$chartEndY-15",
"fillcolor": "#0075c2"
},
{
"id": "rangeText",
"type": "Text",
"fontSize": "11",
"fillcolor": "#ffffff",
"text": "Recommended Utilization Range : 70% - 85%",
"x": "$chartCenterX",
"y": "$chartEndY-25"
}
]
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge',
width: '400',
height: '190',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "food.hsm.com",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
}]
},
"pointers": {
"pointer": [{
"value": "75"
}]
},
"trendPoints": {
"point": [
//Trendpoint
{
"startValue": "70",
"displayValue": " ",
"dashed": "1",
"showValues": "0"
}, {
"startValue": "85",
"displayValue": " ",
"dashed": "1",
"showValues": "0"
},
//Trendzone
{
"startValue": "70",
"endValue": "85",
"displayValue": " ",
"alpha": "40"
}
]
},
"annotations": {
"origw": "400",
"origh": "190",
"autoscale": "1",
"groups": [{
"id": "range",
"items": [{
"id": "rangeBg",
"type": "rectangle",
"x": "$chartCenterX-115",
"y": "$chartEndY-35",
"tox": "$chartCenterX +115",
"toy": "$chartEndY-15",
"fillcolor": "#0075c2"
}, {
"id": "rangeText",
"type": "Text",
"fontSize": "11",
"fillcolor": "#ffffff",
"text": "Recommended Utilization Range : 70% - 85%",
"x": "$chartCenterX",
"y": "$chartEndY-25"
}]
}]
}
}
}
);
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 linear 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 character which will be appended to the end of the number, eg. %. |
|
It is used to specify the minimum value for a color range, e.g. 35. This attribute belongs to the |
|
It is used to specify the maximum value for a color range, e.g. 70. This attribute belongs to the |
|
It is used to specify the label that will be rendered for a color range. This attribute belongs to the |
|
It is used to specify the current pointer value, e.g. 75. This attribute belongs to the |