Heatmap

1. Overview

1.1 Application scenario

The heatmap shows the weight of each point within the coordinate range in a special highlighted way. As shown in the figure below, the thermal color shows the 24-hour temperature distribution in a region throughout the whole year.

1.2 Basic requirements

Basic requirements for heatmap:

1.3 Chart features

Advantages: clearly present the distribution, frequency or density of data between the two dimensions.

Disadvantages: the effect is too soft to be used as an accurate expression of data.

2. Example

2.1 Create component

2.1.1 Data preprocessing

1) Download the sample data:

215.Temperature for the whole year.xlsx

Click "Data Preparation" → "business package" → "Add Table" → "Excel Dataset", as shown in the figure below:

2) Upload the excel file, name the table as "Temperature for the whole year", and click "OK", as shown in the figure below:

2.1.2 Create dashboard

1) Click "Dashboard", select "New Dashboard", and click "OK", as shown in the following figure:

2) Click "Add component", select "Temperature for the whole year" in the business package, click "OK", as shown in the following figure:

3) Select "Time" in the indicator field, click "Convert to dimensions", as shown in the following figure:

4) Drag the "date" field in "Dimension" to the horizontal axis, "time" to the vertical axis.

5) Set the group of "Date" as "Year Month", and change the "time" field in the vertical axis as "Merge same items as a group", as shown in the following figure:

6) Select the "Heatmap" under "chart type". Drag "temperature" into the "Thermal Color" bar, click the bar, and select the "Gradient" as "Heat 2", as shown in the following figure:

Note: the thermal area map can be selected only if there are 2 dimensions and 0 or more index fields in the horizontal and vertical axis, otherwise the thermal area map under the chart type will be grayed and cannot be clicked.

2.2 Set component style

2.2.1 Remove the Legend

Select the component style and uncheck the legend, as shown in the following figure:

2.2.2 Adaptive display

Select "component style", click"adaptive display" → "Overall adaptation":

2.3 View the effect

2.3.1 PC terminal

Select the corresponding dashboard, click "Preview dashboard", the table is as shown in the following figure:

2.3.2 Mobile terminal