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 should load here..

Given below is the list of attributes, belonging to the chart element, used to configure 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 configure this simple cylinder gauge is given below:

...

In the above data, we have first configured the upper and lower limit of the gauge scale using the chart element. Then we have used the value element to specify the value, in liters, to which the cylinder is filled.

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