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.
The final gauge looks like this:
Given below is the list of attributes, belonging to the
chart element, used to configure a simple cylinder gauge:
||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 label to be displayed with the lower limit value on the gauge scale, eg. Empty.|
||It is used to specify the label to be displayed with the upper limit value on the gauge scale, eg. Full.|
||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.