Simple Linear Gauge Example

The linear gauge is used to display a specific data point over a horizontal scale using a slider component - also called as the pointer - to indicate the data value.

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

Creating a Simple Linear Gauge

For our example, we will create a linear gauge that will indicate the server utilization at food.hsm.com.

To create a simple linear 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, because we are plotting the server utilization in percentage, the lower limit will be 0 and the upper limit will be 100.

Divide the gauge scale into three regions that indicate the three utilization limits for the server - low, moderate, and high. This is shown in the table below:

Range

Server Utilization Level

Color for the Range

0-35%

Low

Green e.g. #8cba02

35-70%

Moderate

Yellow e.g. #f6bd11

70-100%

High

Red e.g. #ff6650

Decide a data value for the pointer to point to. For our example, we will set the data value to 75.

The linear gauge thus created to show the server utilization, in percentage, at food.hsm.com looks like this: