Overview

The Gauge widget is designed to display a value within a gauge, providing visual indicators with colors to show the limits and the positioning of data relative to the gauge limits.

Personalize the Card

Title

Users can add a title to the Gauge widget.

Description

Users have the option to add a description to the Gauge widget.

Hyperlink

The "link on click" mode is a configuration that directs to a URL when clicking on an item in the dashboard. This will open it in a new tab or in the same tab, depending on the user's choice.

Configuring Custom Gauges

Gauges are a widget type in the Studio app.

They can either be configured manually through the GUI within the Studio dashboard or configured with the msg.parameters object within DFM. In order to switch between each mode, the user must toggle the button below.

The parameters object for the gauge widget has the format below:

msg.parameters.gauge.min and msg.parameters.gauge.max display the left and right hand values respectively.

Ex: msg.parameters.gauge.min = 4.5 and msg.parameters.gauge.max = 5 and If ONLY these parameters are specified the gauge will populate one color as seen below:

In order to display other sections, the “sections” array must be used.

Each entry in the array has four parameter objects called “color”, “start”, “end”, and “displayTheseLimits”

color
Color accepts hex code for the color of the section.
Ex: {color: "#FF0000"} would create a red section

start
Start accepts a numeric value that represents the start of the section
Ex: {start: 0}

end
End accepts a numeric value that represents the end of the section
Ex: {end: 200}

displayTheseLimits
DisplayTheseLimits is an object that accepts a boolean value.

Only ONE section can have a {displayTheseLimits: true} value and NONE of the limits need to have a {displayTheseLimits: true} for limits to be displayed.

In most cases {displayTheseLimits: false} will be specified for ALL sections because in this mode ALL limits will be displayed and the max and min values will be those specified in the msg.parameters.gauge.min and msg.parameters.gauge.max objects.

If {displayTheseLimits: true} is specified, the max and min for that section will be displayed for the entire gauge. This will override whatever is set for msg.parameters.gauge.min and msg.parameters.gauge.max

Example of a fully configured parameters object:

The resulting display in Studio:

Additionally, you can now change the size of your Gauges and how they appear in your Studio Dashboard. This allows greater customization in the look and feel of the Studio application.