Heat Map Chart

Let's say you want to go out for an expensive dinner. But since it is expensive, you want to make an informed decision about where to go. So you pick up a set of magazines that review such restaurants. And to help you decide, you plot the ratings in a visual format, say a separate column chart for each magazine.

FusionCharts will render here
FusionCharts will render here
FusionCharts will render here
FusionCharts will render here
FusionCharts will render here

The column charts do a great job of bringing out the highs and the lows in the ratings. You can easily see that Noma and The Fat Duck come highly recommended by Gourmet News, and Le Benardin is best avoided. But knowing how subjective these ratings are, which the column charts clearly show, wouldn't you like to consider all the ratings at once to make your decision?

Check out live examples of Heat Map charts in our charts gallery and JSFiddle gallery.

Bring in the Heat Map Chart

The Heat Map Chart represents data in a tabular format with user-defined color ranges like low, average and high. So putting together all the ratings from different magazines, here's the heat map chart you will come to:

FusionCharts will render here

As you can see, the condensed color-coded format of the Heat Map chart makes the data much more easy to understand. You have your ratings for each restaurant effectively categorized under the Poor, Average, Good and Best ranges.

You can also selectively hide or show any range as well. For example, you can see values only in the Best range by "switching off" all other ranges from the legend.

Now how about taking it a step further? Rather than having predefined ranges, how about choosing your own range on the chart itself?

Bring in the gradient legend

The gradient legend is a continuous range, instead of being broken into three discrete ranges. This affects the rest of the chart as well since the data sets pick their color from where their value falls in the gradient range instead of one of the three discrete values.

FusionCharts will render here

You just have to drag the pointers to select whatever range you want.

Isn't it much easier to choose a restaurant using the Heat Map chart? Of course, you wouldn't be creating a Heat Map chart every time you need to choose a restaurant. So let's take a look at some of the more business uses of the chart.

Applications of the Heat Map Chart

A heat map chart can be used to visualize complex data like performance comparison of different companies, market response, stock market investments, and lots more.

In the chart below, we are visualizing the weekly CPU utilization of 23 computers in a network. Here you can easily know which computers have logged extreme values. If it were not for the heat map chart, the data would have been visualized using separate column or line charts which would've been very cumbersome.

FusionCharts will render here

It is a similar case with a huge marketing data set. From the heat map chart below, you can easily point out the best performing mediums versus the loss-making mediums. Instantaneous understanding is where the heat map chart scores highly.

FusionCharts will render here

In the Weekly Performance chart below, it is very easy to distinguish the high performers from the laggards because of the color gradations.

FusionCharts will render here

This was all about the heat map JavaScript chart. You can use it to visualize large amounts of data, and your analysis will be much quicker because of the color gradations. See more examples of the heat map chart here.

Want to include Heat Map Chart in your project?

Download free trial to start creating charts you want.

Business Users

Contact us using the form below and we'll be happy to assist you!

If you see this, leave this form field blank and invest in CSS support.