Loading
Simple Gauge Example
An LED gauge uses a horizontal/vertical scale to represent data values. It uses bars that change color, or marks out different regions in different colors to indicate whether data is within preset parameters. Colors to represent each region can be selected based on the application for which the gauge is being configured.
In this section, you will be shown how you can create a simple LED gauge.
Creating a Simple LED Gauge
For our example, we will create a horizontal LED gauge that will indicate the fuel level.
To create this LED gauge, we will:
-
Define the lower and upper limits (also known as the minimum and maximum values) for the gauge scale. For our example, we will set the lower limit to 0 and the upper limit to 100.
-
Divide the gauge scale into three differently colored regions to indicate the fuel level.
-
Set the data value to indicate the present level of fuel. For our example, we will set the fuel level to 92.
The horizontal LED gauge thus created looks like this
Given below is a brief description of the attributes used to create a simple LED gauge:
| Attribute Name | Description |
|---|---|
|
It is used to specify the lower limit, or the minimum value, of the gauge scale, e.g. 0. |
|
It is used to specify the upper limit, or the maximum value, of the gauge scale, e.g. 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 which will be appended at the end of a number, eg. %. |
The data structure needed to render a simple horizontal LED gauge is given below:
{
"chart": {
"caption": "Fuel Level Indicator",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"showhovereffect": "1",
"origW": "400",
"origH": "150",
"ledSize": "3",
"ledGap": "2",
"manageResize": "1",
"theme": "fint"
},
"annotations": {
"showbelow": "1",
"groups": [
{
"id": "indicator",
"items": [
{
"id": "bgRectAngle",
"type": "rectangle",
"alpha": "90",
"radius": "1",
"fillColor": "#6baa01",
"x": "$gaugeCenterX - 20",
"tox": "$gaugeCenterX + 20",
"y": "$gaugeEndY + 25",
"toy": "$gaugeEndY + 45"
}
]
}
]
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "92"
}There! You have now seen how you can create a simple horizontal LED gauge.