Heatmap Chart

lowcodera Heatmap component

Purpose

A heatmap contains values representing various shades of the same colour for each value to be plotted. Usually the darker shades of the chart represent higher values than the lighter shade.

Variations

There are several variations of Heatmap charts which are supported through the configuration of data and component properties.

• Basic Heatmap Chart

• Heatmap with multiple series

• Heatmap with Ranges

Working with Data

‌The data format for the Heatmap chart is the same as for other Lowcodera charts. You can bind your chart component's items property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint.

Static Collection example

In this example, a collection with static data called colheatmapsinglecoloris defined in the Power App. The items property of the heatmap chart component is then bound to this collection.

Table(
    {
        name: "Population",
        color: "#49b689",
        data: [
            {
                label: "Project Alpha",
                value: 115
            },
            {
                label: "Project Beta",
                value: 150
            },
            {
                label: "Project Gamma",
                value: 180
            },
            {
                label: "Project Delta",
                value: 30
            },
            {
                label: "Project Epsilon",
                value: 110
            },
            {
                label: "Project Zeta",
                value: 251
            },
            {
                label: "Project Eta",
                value: 90
            },
            {
                label: "Project Theta",
                value: 145
            },
            {
                label: "Project Iota",
                value: 120
            },
            {
                label: "Project Kappa",
                value: 80
            }
        ]
    },
    {
        name: "Education",
        data: [
            {
                label: "Project Alpha",
                value: 142
            },
            {
                label: "Project Beta",
                value: 100
            },
            {
                label: "Project Gamma",
                value: 85
            },
            {
                label: "Project Delta",
                value: 120
            },
            {
                label: "Project Epsilon",
                value: 170
            },
            {
                label: "Project Zeta",
                value: 75
            },
            {
                label: "Project Eta",
                value: 45
            },
            {
                label: "Project Theta",
                value: 117
            },
            {
                label: "Project Iota",
                value: 60
            },
            {
                label: "Project Kappa",
                value: 141
            }
        ]
    },
    {
        name: "Income",
        data: [
            {
                label: "Project Alpha",
                value: 15
            },
            {
                label: "Project Beta",
                value: 150
            },
            {
                label: "Project Gamma",
                value: 180
            },
            {
                label: "Project Delta",
                value: 25
            },
            {
                label: "Project Epsilon",
                value: 190
            },
            {
                label: "Project Zeta",
                value: 85
            },
            {
                label: "Project Eta",
                value: 47
            },
            {
                label: "Project Theta",
                value: 150
            },
            {
                label: "Project Iota",
                value: 152
            },
            {
                label: "Project Kappa",
                value: 41
            }
        ]
    }
)

The above code snippet will generate the following Heatmap chart.

Dynamic Collection Example

The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

The below code snippet will generate dynamic collection to be consumed by component.

ClearCollect(
    CategoryCol,
    Distinct(
        Budgets,
        Category
    )
);
Clear(ItemCategoryCol);
ForAll(
    CategoryCol,
    Collect(
        ItemCategoryCol,
        {
            ItemCategory: ThisRecord.Result,
            ItemColor:First(Filter(Budgets,Category=Result)).Color
        }
    )
);
Clear(colheatmapsinglecolor);
ForAll(
    ItemCategoryCol,
    Collect(
        colheatmapsinglecolor,
        {
            name: ThisRecord.ItemCategory,
            color:ItemColor,
            data: ForAll(
                Filter(
                    Budgets,
                    Category = ItemCategory
                ),
                {
                    Value: {
                        label: ThisRecord.Name,
                        value: ThisRecord.Value
                    }
                }
            )
        }
    )
);

Property Configuration

All control properties can be left as default

Chart Properties

For a full listing of all chart properties see the chart components property reference

The properties below are the main ones which change this components appearance and behaviours.

Property	Description	Required	Accepted Values
DataLabelSymbol	Property to add any symbol (eg. currency or any appened words) along with data labels	X	Text
Radius	Property to set the Radius for heat map	X	Numeric (ranges from 0 to 70)

Examples

Heatmap Chart with Multiple Series

Data Configuration

A single or multiple data series is defined in the collection.

ClearCollect(
    heatmapbasicsseries,
    {
        name: "Population",
        data: [
            {
                label: "Project Alpha",
                value: 115
            },
            {
                label: "Project Beta",
                value: 50
            },
            {
                label: "Praject Gamma",
                value: 80
            },
            {
                label: "Praject Delta",
                value: 30
            },
            {
                label: "Praject Epsilon",
                value: 10
            },
            {
                label: "Praject Zeta",
                value: 25
            },
            {
                label: "Praject Eta",
                value: 90
            },
            {
                label: "Praject Theta",
                value: 145
            },
            {
                label: "Praject Iota",
                value: 120
            },
            {
                label: "Praject Kappa",
                value: 80
            }
        ]
    },
    {
        name: "Education",
        data: [
            {
                label: "Project Alpha",
                value: 42
            },
            {
                label: "Project Beta",
                value: 100
            },
            {
                label: "Praject Gamma",
                value: 85
            },
            {
                label: "Praject Delta",
                value: 120
            },
            {
                label: "Praject Epsilon",
                value: 70
            },
            {
                label: "Praject Zeta",
                value: 75
            },
            {
                label: "Praject Eta",
                value: 45
            },
            {
                label: "Praject Theta",
                value: 17
            },
            {
                label: "Praject Iota",
                value: 60
            },
            {
                label: "Praject Kappa",
                value: 41
            }
        ]
    },
    {
        name: "Income",
        data: [
            {
                label: "Project Alpha",
                value: 15
            },
            {
                label: "Project Beta",
                value: 150
            },
            {
                label: "Praject Gamma",
                value: 180
            },
            {
                label: "Praject Delta",
                value: 25
            },
            {
                label: "Praject Epsilon",
                value: 90
            },
            {
                label: "Praject Zeta",
                value: 85
            },
            {
                label: "Praject Eta",
                value: 47
            },
            {
                label: "Praject Theta",
                value: 50
            },
            {
                label: "Praject Iota",
                value: 52
            },
            {
                label: "Praject Kappa",
                value: 41
            }
        ]
    }
);

Property Configuration

• All other control properties can be left as default

Heatmap Chart with Range

Data Configuration

A single or multiple data series is defined in the collection.

ClearCollect(
    heatmapWithColorRange,
    {
        name: "Population",
        colorRange: [
            {
                from: 0,
                to: 50,
                color: "#8ef19a"
            },
            {
                from: 51,
                to: 100,
                color: "#a370f5"
            },
            {
                from: 101,
                to: 200,
                color: "#f6756f"
            }
        ],
        data: [
            {
                label: "Project Alpha",
                value: 115
            },
            {
                label: "Project Beta",
                value: 50
            },
            {
                label: "Praject Gamma",
                value: 80
            },
            {
                label: "Praject Delta",
                value: 30
            },
            {
                label: "Praject Epsilon",
                value: 10
            },
            {
                label: "Praject Zeta",
                value: 25
            },
            {
                label: "Praject Eta",
                value: 90
            },
            {
                label: "Praject Theta",
                value: 145
            },
            {
                label: "Praject Iota",
                value: 120
            },
            {
                label: "Praject Kappa",
                value: 80
            }
        ]
    },
    {
        name: "Education",
        data: [
            {
                label: "Project Alpha",
                value: 42
            },
            {
                label: "Project Beta",
                value: 100
            },
            {
                label: "Praject Gamma",
                value: 85
            },
            {
                label: "Praject Delta",
                value: 120
            },
            {
                label: "Praject Epsilon",
                value: 70
            },
            {
                label: "Praject Zeta",
                value: 75
            },
            {
                label: "Praject Eta",
                value: 45
            },
            {
                label: "Praject Theta",
                value: 17
            },
            {
                label: "Praject Iota",
                value: 60
            },
            {
                label: "Praject Kappa",
                value: 41
            }
        ]
    },
    {
        name: "Income",
        data: [
            {
                label: "Project Alpha",
                value: 15
            },
            {
                label: "Project Beta",
                value: 150
            },
            {
                label: "Praject Gamma",
                value: 180
            },
            {
                label: "Praject Delta",
                value: 25
            },
            {
                label: "Praject Epsilon",
                value: 90
            },
            {
                label: "Praject Zeta",
                value: 85
            },
            {
                label: "Praject Eta",
                value: 47
            },
            {
                label: "Praject Theta",
                value: 50
            },
            {
                label: "Praject Iota",
                value: 52
            },
            {
                label: "Praject Kappa",
                value: 41
            }
        ]
    }
);

Property Configuration

• radiusproperty is set to 50

• All other control properties can be left as default