Heat map is a chart that displays data values as colors inside a matrix. This is a two-dimensional grid chart, where each color represents the data.
You can also choose to derive the size and color intensity of each cell based on the data. This will be pretty useful for categorizing and visualizing data based on factors like volume of occurrence, intensity, performance scale (bad to good) etc.,
Add Heat map chart to the page
Firstly, find the Color Block Heat map control in the controls add panel,. Then, drag and drop it into a section or container on your page.
Select data source
Select the target data list as the source content to create Heat map Chart based on filters conditions.
Open the Content > Data Source block, and in the Application section, select the application which is the current application by default.
Afterward, move on to the List section. Select the data list under the selected application.
In the Data Filters section, click the condition button to filter the data from the selected data list.
Rows, Columns and Values
Open the Content > Chart block to select the fields as row, columns and value of this Heat map Chart.
Columns: Select one of the field included in the selected data list as the column of this Heat map Chart.
Rows: Select one of the field included in the selected data list as the Row of this Heat map Chart.
Value: Select the field to calculate value of this Heat map Chart, and the method about how to calculate the result. For numeric fields, the calculation type can be count (count the number of records) or sum (sum of the total value of records).
Settings of Heat map Chart
Chart Height: set the height of this Heat map Chart control.
Axis Line: Show/hide the line of Axis on the Heat map Chart.
Grid: Show/hide the grid line on the Heat map Chart.
Axis Labels: Show/hide the labels of X-axis and Y-axis.
Title of Heat map Chart
Display: turn on to show title of the Heat map Chart.
Chart Title: type the text of the title, or set dynamic content as the title text.
Title Position: set the display position of the title as Before Chart or After Chart.
Text Align: Set the alignment of the title as Left, Center, Right, or Justify.
Legend Heat map Chart
Display: turn on to show Legend of the Heat map Chart.
Position: set the display position of the legend around the Heat map Chart.
Tooltip of Heat map Chart
Enable: turn on to show Tooltip of the Heat map Chart.
Number Suffix: set the suffix of the number on the Tooltip.
Styling the Heat map Chart control
Title
Text Color: Set the color of the title.
Typography: Set the typography of the title.
Margin: Set the Margin of the title in PX or %.
Padding: Set the Padding of the title in PX or %.
Text Shadow: Adjust box shadow options.
Label
Font Family: Set font family of the label.
Size: Set font size of the label.
Weight: Set font weight of the label.
Style: Set font style of the label.
Text Color: Set the color of the label.
Legend
Font Family: Set font family of the legend.
Size: Set font size of the legend.
Weight: Set font weight of the legend.
Style: Set font style of the legend.
Line-Height: Set line-height of the legend.
Text Color: Set the color of the legend.
Tooltip
Background Color: Set the background color of the Tooltip container.
Padding: Set the Padding of the tooltip container in PX or %.
Text Shadow: Adjust box shadow options.
Title: Set the Title's style of the Tooltip.
Font Family: Set font family of the Tooltip's title.
Size: Set font size of the Tooltip's title.
Weight: Set font weight of the Tooltip's title.
Style: Set font style of the Tooltip's title.
Line-Height: Set line-height of the Tooltip's title.
Text Color: Set the color of the Tooltip's title.
Value: Set the Value's style of the Tooltip.
Font Family: Set font family of the Tooltip's value.
Size: Set font size of the Tooltip's value.
Weight: Set font weight of the Tooltip's value.
Style: Set font style of the Tooltip's value.
Line-Height: Set line-height of the Tooltip's value.
Text Color: Set the color of the Tooltip's value.