The Heat Map Chart Widget Node visually represents data density or intensity using a gradient of colors over a two-dimensional matrix or time series. It is ideal for spotting patterns, anomalies, and trends across multiple categories or time interval
What Is a Heat Map Chart?
A heat map uses color to indicate the magnitude of a value in a matrix layout. Darker or brighter colors represent higher or lower values, helping users quickly understand patterns across time, devices, or regions.
This widget supports both timestamp-based and category-based heatmap views.
Step-by-Step: How to Configure the Heat Map Chart Widget Node
-
Add the widget
-
Drag the Heat Map Chart 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 outputs the numeric value you want to visualize.
-
The field must match the JSON key to display.
-
-
Open configuration
-
Double-click the widget to open the settings window.
-
General Settings
| Field | Requirement | Description |
|---|---|---|
| Widget Name* | Required | Title displayed on the widget (e.g., Usage by Hour). |
| Widget Subtitle | Optional | Subheading beneath the main title. |
| Widget Header | Optional | Toggle to show or hide the header area. |
| Show UID / Label Name | Optional | Toggle to display the device UID or label name. |
Data Configuration
| Field | Requirement | Description |
|---|---|---|
| Heatmap Type* | Required | Select the heatmap style: Timestamp (time-based) or category-driven. |
| JSON Key to Display* | Required | Field in the incoming payload used to calculate intensity. |
| Calculation* | Required | Aggregation: Last value received (other methods may vary). |
| Decimal Places | Optional | Number of decimals shown per cell. |
| Refresh Interval (seconds) | Optional | Frequency of data refresh (e.g., 60 seconds). |
Color Range Settings
Define color intensity bands based on value thresholds.
| Range Level | Field | Requirement | Description |
|---|---|---|---|
| Minimum Value | Hex Color* | Required | Color for the lowest data values. |
| Mid Value | Hex Color* | Required | Color for medium values (e.g., averages). |
| Maximum Value | Hex Color* | Required | Color for the highest values. |
| Empty Cells | Hex Color* | Optional | Color used when no data is available. |
Adjust gradient tones using consistent color themes (e.g., blue to red).
Tooltip & Interface Settings
| Field | Requirement | Description |
|---|---|---|
| Enable Tooltip | Optional | Toggle to show a tooltip with value information. |
| Tooltip Text | Optional | Custom text to appear in the tooltip (if enabled). |
| Add to Interface* | Required | Assign this widget to one or more dashboard interfaces. |
Grouping & Display
| Field | Requirement | Description |
|---|---|---|
| Select Label | Required (if grouped) | Use a saved device label to group views. |
| Grouped Display Mode* | Required | Choose one: - No Grouping - Group by Label Value - Group by Label Name |
| Number of Widgets to Display | Optional | Cap how many grouped heat maps appear. |
Use Cases
-
Display machine usage by hour/day
-
Visualize temperature or sensor value heat over time
-
Monitor status patterns by shift or zone
-
Identify idle or peak periods across systems
Best Practices
-
Use intuitive color scales (e.g., green to red) for quick interpretation
-
Set empty cell color to neutral grey to distinguish missing data
-
Group by device label to scale the view across multiple assets
-
Keep refresh intervals in sync with your data frequency
-
Adjust decimal precision to match the granularity of the metric
Frequently Asked Questions (FAQ)
Q: What’s the difference between Timestamp and non-Timestamp heatmap types?
A: Timestamp-based heatmaps use time intervals (e.g., hours, days) while others may group by categories (e.g., zones, statuses).
Q: What happens when there's no data for a cell?
A: It is filled using the Empty Cells color.
Q: Can I overlay text or icons on the heat map?
A: Not currently — the heat map is strictly color-based.
Q: Can I compare heat maps across devices?
A: Yes, use label grouping to generate a heat map for each label value.