Highcharts Demo

author(s): Øystein Moseng

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>

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

JavaScript

/*

	TODO:
    - Set point width in X direction to less than full width
    - Make point width in Y direction encompass both Y-variations in a row.  
      (Note that rows must have a cell for each X value, so we can't just say that the variation
       cells are in their own row)
    - The above points might fix this, but also make sure axes are long enough to show all cells

*/

Highcharts.seriesType('honeycomb', 'heatmap', {
    states: {
        hover: {
            //	halo: true,
            //	brightness: 0.2
        }
    }
}, {
    translate: function() {
        var series = this,
            options = series.options,
            xAxis = series.xAxis,
            yAxis = series.yAxis,
            between = function(x, a, b) {
                return Math.min(Math.max(a, x), b);
            };

        series.generatePoints();

        Highcharts.each(series.points, function(point) {
            var xPad = (options.colsize || 1) / 4,
                yPad = (options.rowsize || 1) / 2,
                x1 = between(
                    Math.round(
                        xAxis.len -
                        xAxis.translate(point.x - xPad * 2, 0, 1, 0, 1)
                    ), -xAxis.len, 2 * xAxis.len
                ),
                x2 = between(
                    Math.round(
                        xAxis.len -
                        xAxis.translate(point.x - xPad, 0, 1, 0, 1)
                    ), -xAxis.len, 2 * xAxis.len
                ),
                x3 = between(
                    Math.round(
                        xAxis.len -
                        xAxis.translate(point.x + xPad, 0, 1, 0, 1)
                    ), -xAxis.len, 2 * xAxis.len
                ),
                x4 = between(
                    Math.round(
                        xAxis.len -
                        xAxis.translate(point.x + xPad * 2, 0, 1, 0, 1)
                    ), -xAxis.len, 2 * xAxis.len
                ),
                y1 = between(
                 ...