Highcharts - faster scatter chart

by Nick Karnik

HTML

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

<div id="container" style="width: 600px; height: 500px; margin: 1em"></div>

JavaScript

/**
 * Faster scatter charts mod for Highcharts
 *
 * Author: Torstein Hønsi
 * Last updated: 2013-12-20
 */
(function (H) {
    // Skip advanced options testing, assume all points are given as [x, y]
    H.seriesTypes.scatter.prototype.pointClass = H.extendClass(H.Point, {
        init: function (series, options) {
            this.series = series;
            this.x = options[0];
            this.y = options[1];
            return this;
        }
    });
    // Draw points as composite shapes
    H.seriesTypes.scatter.prototype.drawPoints = function () {
        var data = this.points,
            renderer = this.chart.renderer,
            radius = this.options.marker.radius,
            stripes = [],
            group, 
            i = data.length,
            point,
            layers = this.layers;
        
        if (!layers) {
            layers = this.layers = [];
        }
    
        // Divide the points into stripes. Points within the same group won't overlap in the y
        // dimension
        while (i--) {
            point = data[i];
            group = Math.round(point.plotY / radius);
            if (!stripes[group]) {
                stripes[group] = [];
            }
            stripes[group].push(point);
        }
    
        // Sort the members of each stripe by x value
        i = stripes.length;
        while (i--) {
            if (stripes[i]) {
                stripes[i].sort(function(a, b) {
                    return a.plotX - b.plotX;
                });
            }
        }
    
        // Loop over the members of each stripe and add them to a group if they don't overlap
        // in the x dimension.
        var groups = [],
            oddOrEven = 0,
            group, 
            stripe, 
            remaining = data.length,
            x,
            lastX,
            j;
    
        // first do even stripes, where points are guaranteed not to overlap with points in even stripes
        while (remaining) {
           ...