Highcharts - SPLessons

Highcharts Heat Maps series

Chapter 21

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Highcharts Heat Maps series

Highcharts Heat Maps series

shape Introduction

Highcharts heat map represents the data in a graphical format where the individual values of the matrix are represented in colors. This chapter, explains about Highcharts Heat Maps series.

Heat maps

shape Description

Highcharts Heat Maps series can represent the data graphically. One should add additional plugin to the header section of html page to create a Highcharts Heat Maps series. Users need to include the following plugin after highchart.js.

<script src=”https://code.highcharts.com/modules/heatmap.js”></script>

Basic Heat map

shape Description

A basic Highcharts Heat Maps series is used to represent the given data in a tabular format. Users can define the color range of the values i.e. high, average and low. Usually, the heat maps are used to display the information like employee attendance and stock market investments.

shape Example

Following is the simple code for creating a Heat map using the CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Basic Heat map</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/modules/heatmap.js"></script>   
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 80,
            plotBorderWidth: 1
        },
        title: {
            text: 'Sales per employee per weekday'
        },
        xAxis: {
            categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
        },
        yAxis: {
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            title: null
        },
        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },
        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 280
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                    this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
            }
        },
        series: [{
            name: 'Sales per employee',
            borderWidth: 1,
            data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
            dataLabels: {
                enabled: true,
                color: '#000000'
            }
        }]
    });
});
</script>
</body>
</html>

Summary

shape Key Points

  • The heat map displays given data in a matrix containing individual values
  • Color range values can be defined using Highcharts Heat map series.

shape Programming
Tips

  • Add the additional plugins for both the Heat and Tree map after the highchart.js.
  • Give the preferred chart type in the chart.type property.
  • Ensure that all the chart options or settings are correct before running the application.
  • Using CDN access for both jQuery and Highcharts is an easy way for the end-user to create Highcharts.