Creating a Heatmap Chart

In this guide, we'll walk you through the process of creating a Heatmap Chart. This type of chart is best used to represent and compare categorical data across 2 categories .

Let's get started!

1. Access the Dashboard
2. Choose the Chart Type
3. Add a Chart Tag
4. Add a Chart Title
5. Add a Chart Description
6. Configure Chart Options
7. Heatmaps Colors
8. Choose Type of X Axis
9. Define the Row Query
10. Define the Main Query

1. Access the Dashboard

To start creating a heatmap chart, you'll first need to access your dashboard folder. Dashboard folders are located on the right green sidebar of the Web App.If you don't have a dashboard yet, you'll need to create one by clicking on the yellow icon** Create dashboard**. Once you're in your dashboard, click on the plus (+) button under the Add chart

2. Choose the Chart Type

A dialog box will appear for you to select the type of chart you want to create. From the dropdown menu, select "Heatmap chart"

3. Add a Chart Tag

Next, you'll need to add a chart tag. This tag should be unique and separated by underscores if it comprises of more that one word / letter e.g (s_p_d_p_a, Sales per agent per day)

4. Add a Chart Title

Now, add a title for your chart. This title should represent what the chart is about. For example, if your chart is about sales per channel, you might choose a title like "Sales per agent per day".

5. Add a Chart Description

Add a description for your chart. This helps other users understand what the chart is about and what the query does. For example, you might write "daily sales per agent"

6. Configure Chart Options

In this step, you'll configure various options for your chart:

- Force the Display of the Chart in Full Width: Toggle this on if you want the chart to extend to the full width of the chart.

7. Heatmaps Colors

Choose the range of colors that will determine the lowest and greatest value brackets in your chart. In a 3 gradient color, (RED-YELLOW-GREEN) The first color representing the low values, middle color for values within average and the last color showing the highest values.



-**Minimum gradient scale value**: - This value shows the range for the low values. Eg 20, this means that all values below 20 will be in the lowest color.
-**Maximum gradient scale value:** - This value shows the range for the highest values. Eg 100, this means that all values below 100 will be in the highest color.

8. Choose Type of X Axis

Select the type of X axis based on your dataset. If you're aiming to display category values like sales per user, then Text will be applicable since you are aggregating per user.
However, if you are aggregating over time i.e. Day or Hour then the X axis will me Time .

9. Define the Row Query

First you need to define what you want to see in the row axis. Please note that the field you define in the row query will be the same filed used in the main query to link the row query to the main query.Take note and use** Label** and value as your alias.

9. Define the Main Query

In the main query, this is where you define the X and Y axis.Remember to have the X axis defined depending on the type of axis you want either Time or Text.
In this cas where the KPI is sales per Agent per day, the X axis will be date (Time) and the Y axis will be sales value



Final chart



Point to note

In the main query, always add the condition that will connect the row query to the main query. In our case the condition is CONCAT(first_name, ' ', last_name) IN ($row_query_result$)

This statement is meant to link the label defined in the row query to the one in the main query.

Add filters accordingly to refine the data you want to display.

Updated on: 22/08/2023