The cylinder gauge is a real-time chart, which can update its data after specified intervals, without requiring any page refreshes. In this section, you will be shown how you can create a simple cylinder gauge.

## Creating a Simple Cylinder Gauge

We will create a cylinder gauge that monitors the diesel level in the generator. This gauge will have a maximum capacity of 110 liters and we will configure it show that 75 liters of diesel is left in the generator.

To create a cylinder gauge, you need to:

• Define the upper and lower limits for the gauge. The limits are displayed on the vertical scale to the left/right of the cylinder. For our example, the lower limit will be 0 and the upper limit will be 110 liters.

• Decide the visual properties of the gauge. This involves customizing the elements of the gauge.

• Decide the gauge value along with the fill color code. For our example, the gauge value is 75 liters.

The final gauge looks like this:

{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "0", "chartBottomMargin": "45" }, "value": "110", "annotations": { "origw": "400", "origh": "190", "autoscale": "1", "groups": [ { "id": "range", "items": [ { "id": "rangeBg", "type": "rectangle", "x": "\$canvasCenterX-45", "y": "\$chartEndY-30", "tox": "\$canvasCenterX +45", "toy": "\$chartEndY-75", "fillcolor": "#6caa03" }, { "id": "rangeText", "type": "Text", "fontSize": "11", "fillcolor": "#333333", "text": "80 ltrs", "x": "\$chartCenterX-45", "y": "\$chartEndY-50" } ] } ] } }
``````{
"chart": {
"theme": "fint",
"caption": "Diesel Level in Generator",
"subcaption": "Bakersfield Central",
"lowerLimit": "0",
"upperLimit": "120",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": " ltrs",
"showValue": "0",
"chartBottomMargin": "45"
},
"value": "110",
"annotations": {
"origw": "400",
"origh": "190",
"autoscale": "1",
"groups": [
{
"id": "range",
"items": [
{
"id": "rangeBg",
"type": "rectangle",
"x": "\$canvasCenterX-45",
"y": "\$chartEndY-30",
"tox": "\$canvasCenterX +45",
"toy": "\$chartEndY-75",
"fillcolor": "#6caa03"
},
{
"id": "rangeText",
"type": "Text",
"fontSize": "11",
"fillcolor": "#333333",
"text": "80 ltrs",
"x": "\$chartCenterX-45",
"y": "\$chartEndY-50"
}
]
}
]
}
}``````
``````<html>
<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">
var fusioncharts = new FusionCharts({
type: 'cylinder',
dataFormat: 'json',
id: 'fuelMeter-1',
renderAt: 'chart-container',
width: '250',
height: '350',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Diesel Level in Generator",
"subcaption": "Bakersfield Central",
"lowerLimit": "0",
"upperLimit": "120",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": " ltrs",
"showValue": "1",
"chartBottomMargin": "45",
"showValue": "0"
},
"value": "110",
"annotations": {
"origw": "400",
"origh": "190",
"autoscale": "1",
"groups": [{
"id": "range",
"items": [{
"id": "rangeBg",
"type": "rectangle",
"x": "\$canvasCenterX-45",
"y": "\$chartEndY-30",
"tox": "\$canvasCenterX +45",
"toy": "\$chartEndY-75",
"fillcolor": "#6caa03"
}, {
"id": "rangeText",
"type": "Text",
"fontSize": "11",
"fillcolor": "#333333",
"text": "80 ltrs",
"x": "\$chartCenterX-45",
"y": "\$chartEndY-50"
}]
}]
}

},
"events": {
"rendered": function(evtObj, argObj) {
var fuelVolume = 110;
evtObj.sender.chartInterval = setInterval(function() {
(fuelVolume < 10) ? (fuelVolume = 80) : "";
var consVolume = fuelVolume - (Math.floor(Math.random() * 3));
evtObj.sender.feedData("&value=" + consVolume);
fuelVolume = consVolume;
}, 1000);
},
//Using real time update event to update the annotation
//showing available volume of Diesel
"realTimeUpdateComplete": function(evt, arg) {
var annotations = evt.sender.annotations,
dataVal = evt.sender.getData(),
colorVal = (dataVal >= 70) ? "#6caa03" : ((dataVal <= 35) ? "#e44b02" : "#f8bd1b");
//Updating value
annotations && annotations.update('rangeText', {
"text": dataVal + " ltrs"
});
//Changing background color as per value
annotations && annotations.update('rangeBg', {
"fillcolor": colorVal
});

},
"disposed": function(evt, arg) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>``````

Given below is the list of attributes, belonging to the `chart` object, used to create a simple cylinder 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. Empty.

`upperLimitDisplay`

It is used to specify the label to be displayed with the upper limit value on the gauge scale, eg. Full.

`numberSuffix`

It is used to specify the character(s) that will be appended to the end of a number, eg. ltrs.

Top