How to Create a Heatmap in Pivot Grids

The ways and levels of perception have always differed from person to person. Although, in our time, most of the information is absorbed visually. This is the main reason why, for a better understanding of the user's content, you need to choose the right type of data visualization. Here, I want to talk about one of the ways of displaying information in tables; heatmaps. 

What is a heatmap?

A heatmap is a graphical representation of data where values of quantitative variables are expressed as colors, mainly by hue or intensity, giving obvious visual cues about how the phenomenon is clustered or varies over space. 

People use it in many spheres. As we can tell by the name, mainly in geography, but also in web analytics, for example, when identifying design problems on a page. In grids, the larger the cell value, the brighter or warmer is the color. When creating a heatmap, we can use different color schemes and different transition borders between colors depending on the desired result and given data set.

Why use heatmap?

Such visualization allows you to quickly and effortlessly compose an ordered selection of data and draw the necessary conclusions. So, heatmap is a perfect solution when you need to compare data and find values that are in approximately the same range.

So, loosely speaking, heatmap represents facts as pictures. Visualizing complex data in such a way allows us to put much less effort into analyzing it, and we can understand it at a glance. Why? Because our brain is used to sense the world by our eyes, not just columns and rows of numbers.

Look at the example below.

Here, we can easily understand what is better and where we need to pay more attention.

Here, we need to check all the cells and compare them before concluding. As you can see, the effectiveness of the first summary and highlighting can be easily traced.

So, heatmap allows us to significantly reduce the number of operations needed to process information and greatly facilitates the search for various dependencies, and accordingly, the analysis of the entire data set. It will not only greatly facilitate data analysis but also is very easy to use.

How to Use the Heatmap

Let's see how to make a heatmap using Flexmonster Pivot Table and Charts. For example, we will use data from Kaggle. Let's find out which district is the most dangerous to walk in. It is straightforward and can be completed just in several steps. 

Step 1: Choose the Color Palette 

The first thing we are doing is creating an array with our color scheme. I chose different shades of red. 

xxxxxxxxxx

var colorScheme = [

  "FFDEDE",

  "#ff6666",

  "#ff3333",

  "#e60000",

  "#b30000"

]

Now we have the list of colors, each with its number in the array. An important thing here is that they are in order of increasing color intensity or warmth, so the number they own essentially displays how much the value is greater or less than the value in the middle of the sample. That means the more crimes there were committed, the darker the red in the cell will be.

Step 2: Define Maximum and Minimum Value

Next, we set the highest and lowest values to reduce to them the values that go beyond the interval. Also, maxValue will help us to find out in which color we should paint our cell.  

xxxxxxxxxx

var minValue = 0;

var maxValue = 900;

Step 3: Color the Cells

Now we create a function that receives an array of cells and data as input, selects among them those that contain exactly the values while leaving the total separately since we do not need it.

xxxxxxxxxx

function customizeCellFunction(cell, data) {

  if (data && data.type == "value" && !data.isTotal) {

    cell.style["background-color"] = getColorFromRange(data.value);

    cell.style["color"] = "#fff";

  }

}

If the value passes the check, we use a function that will determine the cell’s color. Now, let's have a closer look at getColorFromRange.

xxxxxxxxxx

function getColorFromRange(value) {

    if (isNaN(value)) {

    value = minValue;

  }

    value = Math.max(minValue, Math.min(value, maxValue));

    var perc = (minValue + value) / maxValue;

  var colorIdx = Math.round((colorScheme.length - 1) * perc);

  return colorScheme[colorIdx];

}

This function, getting a value, first brings it to the boundaries of our interval. If the value is empty, it gives it the minimum value. Math.max - this method selects the maximum of the values given to it, and this one - Math.min - likewise selects the minimum.

Math.max(minValue, Math.min(value, maxValue)) - in such a combination, we essentially create a check that the value does not exceed the maximum and is not less than the minimum, and even if so, it is assigned the closest value belonging to the interval. 

Next, we calculate how much this value is from the maximum so that we can then use this coefficient to calculate a suitable color for us. And in the end, the function returns the color by its number in the array, and then it is set as the color of the corresponding cell.

Step 4: Create Your Pivot

Values are processed, colors are defined. The only thing that remains for us is to create a container, load a table with the necessary data into it, and сustomize each cell using the function we implemented for the customizeCell API call.

In the same block, we specified the names of columns and rows, the values by which filters will work and the formatting of cells with values.

xxxxxxxxxx

var pivot = new Flexmonster({

  container: "pivot-container",

  componentFolder: "https://cdn.flexmonster.com/",

  licenseFilePath: "https://cdn.flexmonster.com/codepen.key",

  width: "100%",

  height: 600,

  toolbar: true,

  customizeCell: customizeCellFunction,

  report: {

    dataSource: {

      data: getData()

    },

    "slice": {

        "rows": [

            {

                "uniqueName": "District"

            }

        ],

        "columns": [

            {

                "uniqueName": "[Measures]"

            },

            {

                "uniqueName": "Year"

            }

        ],

        "measures": [

            {

                "uniqueName": "Robbery",

                "aggregation": "sum"

            }

        ]

    },

  }

});

Result

So, now we can see the most dangerous places in Berlin where robberies had taken place the most. 

If you are interested you can check the full demo on CodePen and share your thoughts and ideas with me.