Simple Gauge Example

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..

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.

The data structure needed to create this simple cylinder gauge is given below:

JSON
XML

{ "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"
                    }
                ]
            }
        ]
    }
}

There! You have now seen how you can create a simple cylinder gauge to monitor the fuel levels.