Panels > Heat Map
1. Getting Started with vuSmartMaps™
3. Console
5. Configuration
6. Data Management
9. Monitoring and Managing vuSmartMaps™
A heat map (or heatmap) is a data visualization technique that represents data using colors in two dimensions. It uses color variation to display the magnitude of a phenomenon, providing a clear visual representation of how the phenomenon is distributed or changes across an area.
Heatmaps are valuable because they transform complex data into easily comprehensible visuals. They intuitively convey information, with warmer colors indicating a higher concentration of interactions or data points.
To create the Heat Map
(Refer to Dashboard Creation > Query)
On the right side of the default screen, select Visualization as Heatmap to create a Heatmap panel.
There are multiple options to edit the properties of the panel. The first one is Panel Options. Enter a Name and Description for the Panel that you want to create. For instance, if you’re making a Heatmap to track CPU usage, name the panel “Heatmap” and describe it as “CPU Usage.”
The Description is available in the top left corner and can be viewed by hovering over the i button.
The next part of Panel Options is Panel Link where you can point a link to any other website or dashboard of your choice. Enter a title, and URL, and select the ‘Open in a new Tab’ option if you want to open the link in a new tab. Click Save.
The URL can be a link to another dashboard or for getting help or useful info. When you click on a panel, it opens the link either in the same tab or a new tab, depending on your choices. For example, if you want to compare a default dashboard, just click the link to open it.
Defines how the Y axis is displayed.
The Y-Axis options include:
Unit: Unit configuration.
Scale: linear or logarithmic.
Decimals: This setting determines decimal configuration.
Y- Min/Max value: This setting configures the axis range.
Width: The width of the axis.
This setting decides how the X-axis and Y-axis are divided. You can choose a time interval in the Size input. For instance, if you pick 1 hour, each cell on the X-axis will represent a one-hour time span.
Y-axis Bucket: Number of Buckets for Y-axis.
Size: Size of Bucket.
X-axis Bucket: Number of Buckets for Y-axis.
Size: Size of Bucket.
The format of data to be used:
The color spectrum decides how colors are assigned based on the number of values in each bucket. The color on the left side represents the lowest count, and the one on the right side represents the highest count. Note that some color schemes may automatically switch when you use the light theme.
You can also switch to Opacity mode, which keeps the color the same but changes the transparency based on the bucket count.
Mode: Choose between Opacity and Spectrum.
Color: This is the base color for the cells.
Scale: It determines how bucket values are mapped to opacity.
Exponent value: If it’s less than 1, you get a logarithmic scale; if greater than 1, it’s exponential. For 1, it’s a linear scale.
By default, cell colors are calculated using the minimum and maximum bucket values. But you can set your own values using Min and Max. Think of the bucket value like a Z-axis, and Min and Max as Z-Min and Z-Max, respectively.
Choose whether you want to display the heatmap legend on the panel.
You can set the Tooltip options as per your preference.
You have now learned how to configure the Heatmap, change the panel settings, and more. You can save and edit the panel later too.
A heat map is a data visualization technique that uses color variation to represent data magnitude in two dimensions. It transforms complex data into easily comprehensible visuals, making it easier to identify patterns and trends. For more details, refer to the Heat Map page.
To create a heat map, you need to create a new dashboard panel, configure the query with the appropriate data source, and select heatmap as the visualization type. Detailed steps can be found in the Creating a Heat Map section.
Create a new heat map panel, name it appropriately (e.g., “CPU Usage Heatmap”), and configure it to display CPU usage data over time. For detailed configuration, see the Panel Options section.
Ensure your query is correctly configured and the data source is appropriate. Also, check your visualization settings like axes, buckets, and data format. Troubleshoot using the Visualization Options.
You can adjust the color spectrum and opacity to represent the data values better. Refer to the Display and Color Scale section for detailed instructions.
Warmer colors typically indicate a higher concentration of data points or interactions. You can adjust the color scale settings to customize how these variations are displayed. More information is available in the Display Options.
Yes, you can add panel links to direct users to other dashboards or external websites for more information. Detailed instructions are available in the Panel Link section.
Go to the panel settings and enable the legend option to display it. For more information, refer to the Legend section.
You can manually set Min and Max values for the color scale to better control the representation of data values. See the Color Scale section for detailed steps.
You can adjust the transparency of heatmap cells using the Opacity mode in the Display settings. By choosing Opacity mode, the base color of the cells remains the same, but their transparency changes according to the data values in each bucket. This helps in differentiating areas of high and low data concentrations more effectively.
Browse through our resources to learn how you can accelerate digital transformation within your organisation.
VuNet’s Business-Centric Observability platform, vuSmartMaps™ seamlessly links IT performance to business metrics and business journey performance. It empowers SRE and IT Ops teams to improve service success rates and transaction response times, while simultaneously providing business teams with critical, real-time insights. This enables faster incident detection and response.