The Gauge Widget Node provides a real-time, dial-style visualization of a single numeric value within a defined range. It is ideal for representing metrics like temperature, usage %, or system status using color-coded zones and a responsive needle.
What Is a Gauge?
A gauge is a circular or semi-circular meter that displays a numeric value relative to a defined minimum and maximum. The needle or arc moves in real time to reflect live data changes. Optional color-coded ranges can be used to indicate safe, warning, or danger zones.
Step-by-Step: How to Configure the Gauge Widget Node
-
Add the widget
-
Drag the Gauge Widget Node from the Visualizations panel to the canvas.
-
-
Connect the widget to the data source
-
Link the widget to the upstream workflow node that emits the numeric field you want to visualize.
-
This field must match the JSON key to display value exactly.
-
-
Open configuration
-
Double-click the widget to open the configuration window.
-
General Settings
| Field | Requirement | Description |
|---|---|---|
| Widget Name* | Required | Title of the widget (e.g., Temperature Monitor). |
| Widget Subtitle | Optional | Context or subtitle shown below the main title. |
| JSON Key to Display* | Required | Field in the payload containing the numeric value. |
| Show UID / Label Name | Optional | Toggle to display the associated device label or ID. |
Calculation & Display Settings
| Field | Requirement | Description |
|---|---|---|
| Calculation* | Required | Aggregation method: Last value received. |
| Minimum Value* | Required | Lowest value of the gauge (e.g., 0). |
| Maximum Value* | Required | Highest value of the gauge (e.g., 100). |
| Unit Symbol | Optional | Unit of measurement (e.g., %, °C, kWh). |
| Decimal Places | Optional | Number of decimal points to show (e.g., 1.2). |
| Thousands Comma Separator | Optional | Format large numbers with commas (e.g., 1,000). |
| Display Format | Optional | Visual style or presentation logic (if available). |
Color Ranges
Color-coded zones help highlight safe or dangerous operating ranges.
| Field | Requirement | Description |
|---|---|---|
| Range Min / Max* | Required | Define the lower and upper bounds of each color range. |
| Hex Color* | Required | Color displayed for the range (e.g., #2ecc71). |
Add multiple ranges to build colored bands (e.g., green = safe, yellow = warning, red = danger).
Tooltip & Interface Settings
| Field | Requirement | Description |
|---|---|---|
| Enable Tooltip | Optional | Display custom tooltip text on hover. |
| Tooltip Text | Optional | Text shown inside the tooltip popup. |
| Add to Interface* | Required | Assign the gauge to one or more interfaces. |
Grouping & Display
| Field | Requirement | Description |
|---|---|---|
| Select Label | Required (if grouped) | Choose label to group devices. |
| Grouped Display Mode* | Required | - No Grouping - Group by Label Value - Group by Label Name |
| Number of Widgets to Display | Optional | Limit how many widgets appear in grouped mode. |
Use Cases
-
Monitor CPU, temperature, or energy usage levels
-
Display live production or load capacity
-
Visualize KPI targets with thresholds
-
Show % completion or utilization metrics
Best Practices
-
Use color ranges to clearly indicate status zones
-
Set min/max values carefully for stable visuals
-
Group gauges by label for scalable fleet monitoring
-
Use unit symbols for clarity (
°C,%,kWh, etc.) -
Keep tooltips short but informative
Frequently Asked Questions (FAQ)
Q: Can I display multiple gauges at once?
A: Yes, use label grouping to show a separate gauge per device or category.
Q: How many color ranges can I configure?
A: As many as needed. Common practice is 3 (e.g., green/yellow/red).
Q: What happens if a value exceeds the maximum?
A: The needle typically caps at the max value visually, though the tooltip will still reflect the true value.
Q: Can I link a gauge to trigger something?
A: Not directly. Use downstream nodes to act on value thresholds from the same JSON key.