How to Use a Heat Map with Pivot Table

As we live in the era of data and analytics, the world becomes more and more competitive place; amounts of data are constantly increasing.

Now the data visualization exists in many forms. Usually, it helps you to identify the areas that need improvement.

And one of the greatest challenges is to decide which kind of data visualization should be used to make data presentation more effective.

So we advise you to keep your finger on the pulse when the newest trends of data visualization appear. This is your way to the successful making of insights in data and coming up with new ideas for business.

A bit of history on a Heat Map

Firstly, let’s get deeper into the concept of a Heat Map visualization.

Though the first Heat Map usage was first mentioned in the middle of the 19th century (quite a long time ago, isn’t it?), it is everywhere nowadays.

Moreover, it doesn’t have to be related to real maps and geospatial data only:

Remember the store where you buy your favorite food. Ever wondered why do some products lie exactly where they lie? This is a nice example of product placement in action using a Heat Map analysis. Not only it helps to increase sales by defining which place in the showcase draws more attention, but also helps to enhance a shopping experience.

But more interesting is that the Heat Map finds its application in a Web analytics.

Understanding from a visual perspective which parts of a web page receive the most attention from the visitors and what distracts them from the main content — this is where Heat Map analysis comes in handy. Therefore, it helps to decide where to place an important information or how to redesign the website.

Some another popular case studies:

• Content marketing: analogous scroll map helps to know whether readers reach the end of the post.
• Uber: Indication areas of the highest demand for rides.
• Geography: a reflection of a population density on the map.

And lots more.

Technical perspective

Whereas tables and charts have to be interpreted and understood, the Heat Map tends to be a self-explanatory kind of visual storytelling. It embodies a 2D visualization with color as a 3rd dimension. You can visualize your data through variations in coloring which correspond to variance across multiple variables.

Another type of data visualization we want to mention is a pivot table. This powerful tool for smart data analysis displays aggregated data and helps in getting the insights from the data. Thus, for this case, we will use Flexmonster Pivot Table which also has a Heat Map option. We want to show you how mighty your data visualization can be; what incredible results you can achieve using the pivot table as an engine for organizing your data and the Heat Map for highlighting the results.

How to start?

A little thought experiment: Imagine a situation when you need to build a Heat Map report based on the collected data and show the results to your colleagues.

We suppose you work with a complex data which is stored in JSON, CSV format or OLAP cube and has to be aggregated, filtered and, probably, sorted.

Flexmonster Pivot Table provides an excellent opportunity to try a new kind of real-time visualization. Move further to see how effective it can be in practice. This article will show how to apply this technique to your business reports and identify new patterns, trends, and correlations in data if they exist.

Let’s put our ideas into practice!

STEP 1: Embed a Pivot Table into your project

The first step you need to take if you want to make the Heat Map similar to our sample, you have to embed a component instance into your project using our detailed Quickstart. There you’ll also learn how to add your data to the table. It’s easy and effortless.

Here is an example of how your code should look like in the beginning before applying the customization.

STEP 2: Define your own color scheme

Before start building the Heat Map, you should consider your table with data as a matrix where each value is represented by a color from a color range.

Choose a set of colors which is arranged from cold to warm shades (the highest value is the hottest, that’s why it’s the heat map).

Supposing that you use the numerical data, choose a color from a color scale in order to represent the difference in high and low values. The best practice for the heat map is a scale from blue to red or a spectrum between two analogous colors to show an intensity.

STEP 3: Choose your own customization logic

Next, define the limits of values of your data and declare them in code as global variables. Assign them your values.

By default, all data cells in the pivot table have the same background color. To change it you can use a Flexmonster’s function customizeCell which is responsible for customizing the look and feel of your table. In our case, its functionality serves for the coloring of the cells from a given range of colors in the array.

Don’t forget to implement the function which embodies the logic of a color selection — getColorFromRange. It should be used inside of customizeCellFunction.

After all the statements are executed, the style of the cell data object is changed by choosing the color from the defined scheme.

In the current example, we don’t want to color cells from the Total Row and Grand Total Column as they display the total sum of the revenue.

If you want to color them according to the same logic as for other cells, remove the!data.isTotal condition from the code snippet mentioned above.

Final step: Apply a customization to your pivot table

You’ve already implemented your logic of coloring. Now, to make your pivot table look like the Heat Map, you have to apply the customizeCell function you’ve defined before. Just paste it in the configuration of the component in key-value format and save the result:

Update the page where the Pivot Table is embedded and enjoy the results!

Summary

Now you can truly enrich your data presentation with this easy-to-use visualization tool.

We do hope this approach convinced you how powerful for the web reporting a union of Flexmonster and Heat Map analysis can be and why you should use it. Undoubtedly it will convey the information to your audience in the best possible way.

You can play with our pivot table demo and see a more detailed code with the configuration of a slice, filters, measures, and formats.

Feel free to ask any questions if there was something unclear for you. We’ll be glad if you share some thoughts and ideas with us about the Heat Map visualization.

Stay tuned to our updates!