How to Create Effective Heatmaps in Blazor

Heatmaps allow you to display information in three values rather than two. See how to add one to your Blazor app.

Have your users ever had trouble interpreting or discovering patterns in 2-dimensional data? For example, when are there more customers in a store? What is the best time to publish a video on YouTube? Which days show similar activity? A heatmap can help answer these questions.

In this article, we will see how the Progress Telerik UI for Blazor Heatmap component can help you integrate heatmaps quickly and easily into your Blazor applications. Let’s take a look!

Why Is a Heatmap So Effective?

A heatmap allows information to be displayed easily through three values. For example, if we wanted to know which days of the week have the most activity in the contribution history of a GitHub repository over the last 12 weeks, we would use the following data:

• A horizontal category, which would represent the weeks
• A vertical category, which would represent the day of the week
• A quantitative value, representing the number of commits, which determines the color intensity

You can notice that using this type of chart allows you to quickly show where the greatest activity over time is concentrated. In addition, visual elements like tooltips and colors help understand the values in detail, something the Heatmap control does very well.

Implementing the Blazor Heatmap Control

Let’s see how we can create effective heatmaps using Blazor. To do this, we will create a Blazor project that allows us to perform an analysis of store foot traffic.

Start by creating a Blazor project, either by selecting the Telerik prebuilt template, or by adding the component to an existing project, which you can achieve through the following installation guide.

Creating a Data Model for the Heatmap

The next thing we’ll do is create a data model that binds to the heatmap and represents each category and value in the component.

The idea is that the heatmap will draw the grid of cells where each intersection represents a day and a time slot, with a number of visitors shown according to the color intensity.

In our case, we will do this by creating a record in a new file named TrafficPoint.cs:

In the record, Day will be the vertical axis category, TimeSlot will be the horizontal axis category, and Visitors will represent the quantitative value used to determine the color intensity in each cell.

Similarly, we will create another record called WeekOption, which allows switching between data sets, simulating current week data, previous week data and a week with store promotions. We will do this through a Blazor DropDownList, bound to a collection of objects of type WeekOption, represented as follows:

In this case, Value identifies each data set, while Label is the text that users will see in the dropdown.

Adding the Data Service for the Heatmap

Once we have created the models, let’s create a service that allows us to consume the information from the page-type component, simulating that it comes from some source of information.

In this example, we will calculate the three fictitious weeks, as well as expose several methods to obtain the axis categories, the dropdown options and the list of points corresponding to each week.

To achieve this we create the class TrafficDataService:

Let’s review the most important points of the code above:

• We create a couple of collections, called Days and TimeSlots, which define the chronological order. In the real world, the data would come from a data source ordered by dates

We create a couple of collections, called Days and TimeSlots, which define the chronological order. In the real world, the data would come from a data source ordered by dates

• _trafficByWeek pre-calculates three lists with information for different weeks according to the option selected in the dropdown

_trafficByWeek pre-calculates three lists with information for different weeks according to the option selected in the dropdown

• GetTrafficData returns the list based on a provided key

GetTrafficData returns the list based on a provided key

• GetTrafficLevel is a static method that classifies a value into three ranges, and that we will use in the chart tooltip

GetTrafficLevel is a static method that classifies a value into three ranges, and that we will use in the chart tooltip

This service will serve as the basis for the application’s data.

Registering the Service

Once the service is created, we must register it in order to use it from any component. We will do this in Program.cs as follows:

Here we register a single instance of the service shared by all users. We do this because the generated data do not change per user or request.

Creating the Component to Host a Heatmap

With the service ready to be injected, let’s create the component page which we will call StoreHeatmap.razor. When initializing the page, besides importing some required namespaces, we will add properties to hold data such as the selected week, dropdown options, categories, etc.

We also set up the OnInitialized method to fetch information from the service:

In the code above, you can also notice some interesting things such as the declaration of the properties TotalVisitors, PeakPeriod and QuietestPeriod, which will feed the UI and are calculated automatically on each render.

Once this is done, we will create a section containing controls that allow us to control the information in the heatmap. Specifically, we will create a dropdown to switch between weeks, a checkbox to change the shape of the cells and another to show or hide numeric values:

In the code above we implemented a UI using the Telerik components TelerikDropDownList and TelerikCheckBox, which offer many customization options in addition to being very robust and easy-to-configure controls.

Below these components, we will add labels that inform the user about the total number of visitors in a week, as well as the points of highest and lowest attendance:

The result is the following:

Now that the app is taking shape, let’s move on to the next step, which is implementing the heatmap in the app.

Implementing a Heatmap in Blazor

You should know that a heatmap in Blazor is not implemented through a special tag for that purpose. What is done is to use a TelerikChart component with a series of type Heatmap:

In the code above, we specify the x-axis via XField, the y-axis via YField and the quantitative field using the Field parameter. The default rendering, with the minimal information, looks like this:

The design looks spectacular, however, you may need a bit more customization. For example, one of these customizations is being able to decide whether to show rounded corners or not, in addition to overlaying a numeric value. We do this thanks to the ChartSeriesMarkers and ChartSeriesLabels tags:

Since we already had properties bound to the graphical controls, we reused them to control the customization actions.

Another thing we can do is show a tooltip so the user knows the exact visitor count for a cell. We can achieve this thanks to ChartSeriesTooltip:

In the example above, we use the Template tag to define the visual layout, using context and DataItem which contain the instance of the model associated with the selected cell. The result is the following:

With these customization options, we provide more feedback to the user so they can perform a better analysis on the heatmap.

Conclusion

Throughout this article, we have explored how to implement a Heatmap chart. You have seen what data is necessary to create a heatmap, as well as some of the main properties you can modify to display effective heatmaps in your Blazor applications.

Without a doubt, these types of components make life easier for developers and users. I invite you to try the control and deliver a better user experience as part of your Blazor apps.

Telerik UI for Blazor comes with a free 30-day trial.

Try Now