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; width: 500px; 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
                });
           ...