Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function() {
  (function(H) {
    H.wrap(H.seriesTypes.heatmap.prototype, 'translate', function(proceed) {
      var each = H.each,
        series = this,
        options = series.options,
        xAxis = series.xAxis,
        yAxis = series.yAxis,
        between = function(x, a, b) {
          return Math.min(Math.max(a, x), b);
        },
        pixelSpacing = options.pixelSpacing || [0, 0, 0, 0];

      series.generatePoints();

      each(series.points, function(point) {
        var xPad = (options.colsize || 1) / 2,
          yPad = (options.rowsize || 1) / 2,
          x1 = between(Math.round(xAxis.len - xAxis.translate(point.x - xPad, 0, 1, 0, 1) + pixelSpacing[3]), 0, xAxis.len),
          x2 = between(Math.round(xAxis.len - xAxis.translate(point.x + xPad, 0, 1, 0, 1) - pixelSpacing[1]), 0, xAxis.len),
          y1 = between(Math.round(yAxis.translate(point.y - yPad, 0, 1, 0, 1) - pixelSpacing[2]), 0, yAxis.len),
          y2 = between(Math.round(yAxis.translate(point.y + yPad, 0, 1, 0, 1) + pixelSpacing[0]), 0, yAxis.len);

        // Set plotX and plotY for use in K-D-Tree and more
        point.plotX = point.clientX = (x1 + x2) / 2;
        point.plotY = (y1 + y2) / 2;

        point.shapeType = 'rect';
        point.shapeArgs = {
          x: Math.min(x1, x2),
          y: Math.min(y1, y2),
          width: Math.abs(x2 - x1),
          height: Math.abs(y2 - y1)
        };
      });

      series.translateColors();

      // Make sure colors are updated on colorAxis update (#2893)
      if (this.chart.hasRendered) {
        each(series.points, function(point) {
          point.shapeArgs.fill = point.options.color || point.color; // #3311
        });
      }
    });
  }(Highcharts));

  $('#container').highcharts({
    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 40
    },


    title: {
      text: 'Sales per employee per weekday'
    },

    xAxis: {
      categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia',...