HeatMap with Grouping

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<div id="container" style="height: 400px; max-width: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  var data1 = [{
    'x': 0,
    'y': 0,
    'value': 2,
    'color': "black",
    'scale': 0
  }, {
    'x': 0,
    'y': 1,
    'value': 4,
    'scale': 0
  }, {
    'x': 0,
    'y': 2,
    'value': 6,
    'scale': 0
  }, {
    'x': 0,
    'y': 3,
    'value': 8,
    'scale': 0
  }, {
    'x': 0,
    'y': 4,
    'value': 5,
    'color': "black",
    'scale': 0
  }];

  var data2 = [{
    'x': 1,
    'y': 0,
    'value': 9,
    'scale': 10
  }, {
    'x': 1,
    'y': 1,
    'value': 7,
    'scale': 10
  }, {
    'x': 1,
    'y': 2,
    'value': 5,
    'scale': 10
  }, {
    'x': 1,
    'y': 3,
    'value': 3,
    'scale': 10
  }, {
    'x': 1,
    'y': 4,
    'value': 1,
    'scale': 10
  }];

  var data3 = [{
    'x': 2,
    'y': 0,
    'value': 2,
    'scale': 20
  }, {
    'x': 2,
    'y': 1,
    'value': 4,
    'scale': 20
  }, {
    'x': 2,
    'y': 2,
    'value': 6,
    'scale': 20
  }, {
    'x': 2,
    'y': 3,
    'value': 8,
    'scale': 20
  }, {
    'x': 2,
    'y': 4,
    'value': 5,
    'scale': 20
  }];

  var data4 = [{
    'x': 3,
    'y': 0,
    'value': 9,
    'scale': 30
  }, {
    'x': 3,
    'y': 1,
    'value': 7,
    'color': "black",
    'scale': 30
  }, {
    'x': 3,
    'y': 2,
    'value': 5,
    'scale': 30
  }, {
    'x': 3,
    'y': 3,
    'value': 3,
    'scale': 30
  }, {
    'x': 3,
    'y': 4,
    'value': 1,
    'scale': 30
  }];

  var UNDEFINED,
    stops = [
      [0.25, '#EC2500'],
      [0.5, '#ECE100'],
      [0.75, '#EC9800'],
      [1, '#9EDE00']
    ],
    distance = stops[1][0] - stops[0][0],
    modifiedStops = [];

  $.each(stops, function(i, stop) {
    modifiedStops.push([stop[0] - distance - 0.001, '#ffffff']);
    modifiedStops.push(stop);
    modifiedStops.push([stop[0] + 0.001, stop[1]]);
  });
  $('#container').highcharts({

    chart: {
      type: 'heatmap'
    },


    title: {
      text: 'Heat map',
      align: 'left'
    },

    xAxis: {
      categories: ['apples', 'bananas', 'oranges',...