Working Heatmap Canvas

Nayana das

by Nayana Das

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.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: 320px; width: 500px; margin: 0 auto"></div>

<!-- Source: http://vikjavev.no/ver/highcharts-demos/heatmap.csv.php?year=2013 -->
<pre id="csv" style="display: none">x,y,value
0, 0, 79.0
0, 1, 38.6
0, 2, 30.2
0, 3, 10.8
0, 4, 22.0
0, 5, 0.491
0, 6, 7.5
0, 7, 9.8
0, 8, 0.765
0, 9, 1.1
0, 10, 3.5
0, 11, 0.317
0, 12, 1.1
0, 13, 3.9
0, 14, 5.0
0, 15, 7.5
0, 16, 2.2
0, 17, 1.3
0, 18, 3.4
0, 19, 2.3
1, 0, 81.0
1, 1, 37.7
1, 2, 28.4
1, 3, 9.7
1, 4, 19.9
1, 5, 0.489
1, 6, 7.3
1, 7, 9.4
1, 8, 0.78
1, 9, 1.6
1, 10, 4.7
1, 11, 0.344
1, 12, 1.3
1, 13, 6.3
1, 14, 7.6
1, 15, 7.2
1, 16, 1.7
1, 17, 1.1
1, 18, 3.0
1, 19, 1.7
2, 0, 82.0
2, 1, 36.2
2, 2, 26.8
2, 3, 9.8
2, 4, 20.9
2, 5, 0.467
2, 6, 5.9
2, 7, 6.9
2, 8, 0.856
2, 9, 1.4
2, 10, 4.1
2, 11, 0.351
2, 12, 1.1
2, 13, 4.1
2, 14, 5.2
2, 15, 4.9
2, 16, 1.5
2, 17, 0.5
2, 18, 2.6
2, 19, 2.3
3, 0, 81.0
3, 1, 37.7
3, 2, 25.9
3, 3, 9.6
3, 4, 20.0
3, 5, 0.479
3, 6, 6.0
3, 7, 6.7
3, 8, 0.89
3, 9, 0.8
3, 10, 2.1
3, 11, 0.359
3, 12, 1.1
3, 13, 7.3
3, 14, 8.4
3, 15, 2.4
3, 16, 0.8
3, 17, 0.8
3, 18, 1.9
3, 19, 2.2
4, 0, 67.0
4, 1, 36.2
4, 2, 25.8
4, 3, 8.5
4, 4, 19.1
4, 5, 0.447
4, 6, 6.0
4, 7, 6.9
4, 8, 0.878
4, 9, 2.7
4, 10, 6.7
4, 11, 0.404
4, 12, 0.7
4, 13, 4.4
4, 14, 5.1
4, 15, 2.7
4, 16, 1.0
4, 17, 1.4
4, 18, 2.5
4, 19, 3.1
5, 0, 74.0
5, 1, 39.0
5, 2, 25.3
5, 3, 8.9
5, 4, 18.8
5, 5, 0.476
5, 6, 6.1
5, 7, 7.1
5, 8, 0.863
5, 9, 1.3
5, 10, 3.1
5, 11, 0.422
5, 12, 1.0
5, 13, 5.5
5, 14, 6.5
5, 15, 2.8
5, 16, 1.3
5, 17, 0.7
5, 18, 3.0
5, 19, 1.8
6, 0, 51.0
6, 1, 38.2
6, 2, 24.6
6, 3, 6.7
6, 4, 15.9
6, 5, 0.42
6, 6, 9.0
6, 7, 10.3
6, 8, 0.867
6, 9, 2.3
6, 10, 5.4
6, 11, 0.415
6, 12, 0.6
6, 13, 3.0
6, 14, 3.6
6, 15, 2.7
6, 16, 1.2
6,...

JavaScript

$(function () {

 /**
     * This plugin extends Highcharts in two ways:
     * - Use HTML5 canvas instead of SVG for rendering of the heatmap squares. Canvas
     *   outperforms SVG when it comes to thousands of single shapes.
     * - Add a K-D-tree to find the nearest point on mouse move. Since we no longer have SVG shapes
     *   to capture mouseovers, we need another way of detecting hover points for the tooltip.
     */
    (function (H) {
        var Series = H.Series,
            each = H.each;

        /**
         * Create a hidden canvas to draw the graph on. The contents is later copied over
         * to an SVG image element.
         */
        Series.prototype.getContext = function () {
            if (!this.canvas) {
                this.canvas = document.createElement('canvas');
                this.canvas.setAttribute('width', this.chart.chartWidth);
                this.canvas.setAttribute('height', this.chart.chartHeight);
                this.image = this.chart.renderer.image('', 0, 0, this.chart.chartWidth, this.chart.chartHeight).add(this.group);
                this.ctx = this.canvas.getContext('2d');
            }
            return this.ctx;
        };

        /**
         * Draw the canvas image inside an SVG image
         */
        Series.prototype.canvasToSVG = function () {
            this.image.attr({ href: this.canvas.toDataURL('image/png') });
        };

        /**
         * Wrap the drawPoints method to draw the points in canvas instead of the slower SVG,
         * that requires one shape each point.
         */
        H.wrap(H.seriesTypes.heatmap.prototype, 'drawPoints', function () {

            var ctx = this.getContext();

            if (ctx) {

                // draw the columns
                each(this.points, function (point) {
                    var plotY = point.plotY,
                        shapeArgs,
                        pointAttr;

                    if (plotY !== undefined && !isNaN(plotY) &&...