Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

FusionCharts will load here..
{ "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>
<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: '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>
</head>
<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