Simple Gauge Example

Bulb Gauges are used to indicate a specific dataset by utilizing a circle that changes color to indicate whether the monitored data is within the defined limits and if it is, then which limit does the data belong to. Colors can be selected to suit the application such as green for satisfactory, yellow for caution, and red for alarm.

In this section, you will be shown how you can create a simple bulb gauge.

Creating a Simple Bulb Gauge

For our example, we will create a bulb gauge that monitors the temperature status of deep freezers.

To create a bulb gauge, you need to:

• 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 -60 and the upper limit to -5.

• Divide the temperature values into pre-determined ranges, as shown below:

• Decide a data value to indicate the present temperature status. For our example, we will set the temperature to -5.

A bulb gauge created to monitor the temperature status of deep freezers looks like this:

Given below is a brief description of the attributes used to create a simple bulb gauge:

The data structure needed to create a bulb gauge to monitor the temperature level is given below:

• JSON
• XML

{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "useColorNameAsValue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "plottooltext": "Current Temperature:{br}$value°C",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}

There! You have now seen how you can create a simple bulb gauge.