Heat map

author(s): Torstein Hønsi

by Sascha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">
    Heatmap showing employee data per weekday. Heatmaps are commonly used to
    visualize hot spots within data sets, and to show patterns or correlations.
    Due to their compact nature, they are often used with large sets of data.
  </p>
</figure>

CSS

.highcharts-figure, .highcharts-data-table table {
    min-width: 360px; 
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

function getPointCategoryName(point, dimension) {
  var series = point.series,
    isY = dimension === 'y',
    axis = series[isY ? 'yAxis' : 'xAxis'];
  return axis.categories[point[isY ? 'y' : 'x']];
}

Highcharts.chart('container', {


  xAxis: {
    "categories": [
      "Mixed",
      "Charcut Traiteur",
      "Crèmerie",
      "Glaces",
      "SaladeFrSec",
      "Yaourt",
      "Boucherie",
      "PatIndus"
    ],
  },

  yAxis: {
    "categories": [
      "07:00",
      "08:00",
      "09:00",
      "10:00",
      "11:00",
      "12:00",
      "13:00",
      "14:00",
      "15:00",
      "16:00",
      "17:00",
      "18:00",
      "19:00",
      "20:00",
      "21:00",
      "22:00",
      "23:00",
      "00:00",
      "01:00",
      "02:00",
      "03:00",
      "04:00",
      "05:00",
      "06:00",
      "07:00"
    ],
    "min": 0,
            "startOnTick": true,
            "max": 7,
            "endOnTick": true
  },


  legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 280
  },


  series: [{
      "type": "heatmap",
      "data": [{
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
        {
          "y": -1
        },
       ...