highcharts-rails 5.0.10 → 5.0.11

data/app/assets/javascripts/highcharts/highcharts-more.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v5.0.10 (2017-03-31)
+ * @license Highcharts JS v5.0.11 (2017-05-04)
  *
  * (c) 2009-2016 Torstein Honsi
  *
@@ -87,13 +87,14 @@
                 // Render the backgrounds
                 if (backgroundOption) {
                     backgroundOption = splat(backgroundOption);
+
                     len = Math.max(
                         backgroundOption.length,
                         this.background.length || 0
                     );
 
                     for (i = 0; i < len; i++) {
-                        if (backgroundOption[i]) {
+                        if (backgroundOption[i] && this.axis) { // #6641 - if axis exists, chart is circular and apply background
                             this.renderBackground(
                                 merge(
                                     this.defaultBackgroundOptions,
@@ -1959,17 +1960,17 @@
                     }
                     // up points
                     y = Math.max(previousY, previousY + point.y) + range[0];
-                    shapeArgs.y = yAxis.toPixels(y, true);
+                    shapeArgs.y = yAxis.translate(y, 0, 1, 0, 1);
 
                     // sum points
                     if (point.isSum) {
-                        shapeArgs.y = yAxis.toPixels(range[1], true);
-                        shapeArgs.height = Math.min(yAxis.toPixels(range[0], true), yAxis.len) -
+                        shapeArgs.y = yAxis.translate(range[1], 0, 1, 0, 1);
+                        shapeArgs.height = Math.min(yAxis.translate(range[0], 0, 1, 0, 1), yAxis.len) -
                             shapeArgs.y; // #4256
 
                     } else if (point.isIntermediateSum) {
-                        shapeArgs.y = yAxis.toPixels(range[1], true);
-                        shapeArgs.height = Math.min(yAxis.toPixels(previousIntermediate, true), yAxis.len) -
+                        shapeArgs.y = yAxis.translate(range[1], 0, 1, 0, 1);
+                        shapeArgs.height = Math.min(yAxis.translate(previousIntermediate, 0, 1, 0, 1), yAxis.len) -
                             shapeArgs.y;
                         previousIntermediate = range[1];
 
@@ -1977,8 +1978,8 @@
                         // shape height (#3886)
                     } else {
                         shapeArgs.height = yValue > 0 ?
-                            yAxis.toPixels(previousY, true) - shapeArgs.y :
-                            yAxis.toPixels(previousY, true) - yAxis.toPixels(previousY - yValue, true);
+                            yAxis.translate(previousY, 0, 1, 0, 1) - shapeArgs.y :
+                            yAxis.translate(previousY, 0, 1, 0, 1) - yAxis.translate(previousY - yValue, 0, 1, 0, 1);
 
                         previousY += stack && stack[point.x] ? stack[point.x].total : yValue;
                     }
@@ -2116,6 +2117,7 @@
                     length = data.length,
                     lineWidth = this.graph.strokeWidth() + this.borderWidth,
                     normalizer = Math.round(lineWidth) % 2 / 2,
+                    reversedYAxis = this.yAxis.reversed,
                     path = [],
                     prevArgs,
                     pointArgs,
@@ -2135,7 +2137,10 @@
                         prevArgs.y + data[i - 1].minPointLengthOffset + normalizer
                     ];
 
-                    if (data[i - 1].y < 0) {
+                    if (
+                        (data[i - 1].y < 0 && !reversedYAxis) ||
+                        (data[i - 1].y > 0 && reversedYAxis)
+                    ) {
                         d[2] += prevArgs.height;
                         d[5] += prevArgs.height;
                     }
@@ -2348,7 +2353,8 @@
         }, {
             pointArrayMap: ['y', 'z'],
             parallelArrays: ['x', 'y', 'z'],
-            trackerGroups: ['markerGroup', 'dataLabelsGroup'],
+            trackerGroups: ['group', 'dataLabelsGroup'],
+            specialGroup: 'group', // To allow clipping (#6296)
             bubblePadding: true,
             zoneAxis: 'z',
             directTouch: true,

data/app/assets/javascripts/highcharts/modules/accessibility.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v5.0.10 (2017-03-31)
+ * @license Highcharts JS v5.0.11 (2017-05-04)
  * Accessibility module
  *
  * (c) 2010-2017 Highsoft AS
@@ -410,9 +410,12 @@
                 return false;
             }
 
-            // Recursively skip null points
-            if (newPoint.isNull && this.options.accessibility.keyboardNavigation &&
-                this.options.accessibility.keyboardNavigation.skipNullPoints) {
+            // Recursively skip null points or points in series that should be skipped
+            if (
+                newPoint.isNull &&
+                this.options.accessibility.keyboardNavigation.skipNullPoints ||
+                newPoint.series.options.skipKeyboardNavigation // docs
+            ) {
                 this.highlightedPoint = newPoint;
                 return this.highlightAdjacentPoint(next);
             }
@@ -870,8 +873,10 @@
                     ]
                 ], {
                     // Only run this module if we have at least one legend - wait for it - item.
+                    // Don't run if the legend is populated by a colorAxis.
                     validate: function() {
-                        return chart.legend && chart.legend.allItems && !chart.colorAxis;
+                        return chart.legend && chart.legend.allItems &&
+                            !(chart.colorAxis && chart.colorAxis.length);
                     },
 
                     // Make elements focusable and accessible
@@ -945,7 +950,7 @@
                 (axesDesc.xAxis ? ('<div>' + axesDesc.xAxis + '</div>') : '') +
                 (axesDesc.yAxis ? ('<div>' + axesDesc.yAxis + '</div>') : '');
 
-            // Add shortcut to data table if export-csv is loaded
+            // Add shortcut to data table if export-data is loaded
             if (chart.getCSV) {
                 tableShortcutAnchor.innerHTML = 'View as data table.';
                 tableShortcutAnchor.href = '#' + tableId;
@@ -1037,31 +1042,38 @@
             chart.addScreenReaderRegion(hiddenSectionId, tableId);
 
             // Enable keyboard navigation
-            if (a11yOptions.keyboardNavigation) {
+            if (a11yOptions.keyboardNavigation.enabled) {
                 chart.addKeyboardNavEvents();
             }
 
-            /* Wrap table functionality from export-csv */
+            /* Wrap table functionality from export-data */
 
             // Keep track of columns
             merge(true, options.exporting, {
                 csv: {
-                    columnHeaderFormatter: function(series, key, keyLength) {
+                    columnHeaderFormatter: function(item, key, keyLength) {
+                        if (!item) {
+                            return 'Category';
+                        }
+                        if (item instanceof H.Axis) {
+                            return (item.options.title && item.options.title.text) ||
+                                (item.isDatetimeAxis ? 'DateTime' : 'Category');
+                        }
                         var prevCol = topLevelColumns[topLevelColumns.length - 1];
                         if (keyLength > 1) {
                             // We need multiple levels of column headers
-                            // Populate a list of column headers to add in addition to the ones added by export-csv
-                            if ((prevCol && prevCol.text) !== series.name) {
+                            // Populate a list of column headers to add in addition to the ones added by export-data
+                            if ((prevCol && prevCol.text) !== item.name) {
                                 topLevelColumns.push({
-                                    text: series.name,
+                                    text: item.name,
                                     span: keyLength
                                 });
                             }
                         }
                         if (oldColumnHeaderFormatter) {
-                            return oldColumnHeaderFormatter.call(this, series, key, keyLength);
+                            return oldColumnHeaderFormatter.call(this, item, key, keyLength);
                         }
-                        return keyLength > 1 ? key : series.name;
+                        return keyLength > 1 ? key : item.name;
                     }
                 }
             });
@@ -1078,8 +1090,9 @@
                     proceed.apply(this, Array.prototype.slice.call(arguments, 1));
 
                     var table = doc.getElementById(tableId),
+                        head = table.getElementsByTagName('thead')[0],
                         body = table.getElementsByTagName('tbody')[0],
-                        firstRow = body.firstChild.children,
+                        firstRow = head.firstChild.children,
                         columnHeaderRow = '<tr><td></td>',
                         cell,
                         newCell;
@@ -1108,7 +1121,7 @@
                         each(topLevelColumns, function(col) {
                             columnHeaderRow += '<th scope="col" colspan="' + col.span + '">' + col.text + '</th>';
                         });
-                        body.insertAdjacentHTML('afterbegin', columnHeaderRow);
+                        head.insertAdjacentHTML('afterbegin', columnHeaderRow);
                     }
                 }
             });

data/app/assets/javascripts/highcharts/modules/annotations.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v5.0.10 (2017-03-31)
+ * @license Highcharts JS v5.0.11 (2017-05-04)
  *
  * (c) 2009-2017 Torstein Honsi
  *
@@ -172,7 +172,6 @@
                     shapeParams,
                     linkType,
                     series,
-                    param,
                     bbox,
                     x,
                     y;
@@ -215,13 +214,13 @@
                     shapeParams = extend({}, options.shape.params);
 
                     if (options.units === 'values') {
-                        for (param in shapeParams) {
+                        H.objectEach(shapeParams, function(val, param) {
                             if (inArray(param, ['width', 'x']) > -1) {
                                 shapeParams[param] = xAxis.translate(shapeParams[param]);
                             } else if (inArray(param, ['height', 'y']) > -1) {
                                 shapeParams[param] = yAxis.translate(shapeParams[param]);
                             }
-                        }
+                        });
 
                         if (shapeParams.width) {
                             shapeParams.width -= xAxis.toPixels(0) - xAxis.left;

data/app/assets/javascripts/highcharts/modules/boost.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v5.0.10 (2017-03-31)
+ * @license Highcharts JS v5.0.11 (2017-05-04)
  * Boost module
  *
  * (c) 2010-2017 Highsoft AS
@@ -61,8 +61,8 @@
          *
          * Settings
          *	There are two ways of setting the boost threshold:
-         *    - Per. series: boost based on number of points in individual series
-         *    - Per. chart: boost based on the number of series 
+         *	- Per. series: boost based on number of points in individual series
+         *	- Per. chart: boost based on the number of series 
          *
          *  To set the series boost threshold, set seriesBoostThreshold on the chart object.
          *  To set the series-specific threshold, set boostThreshold on the series object.
@@ -115,7 +115,7 @@
          * @apioption series.boostThreshold
          */
 
-        /* global Float32Array, Image */
+        /* global Float32Array */
 
 
         var win = H.win,
@@ -1097,7 +1097,15 @@
                     minVal,
                     color,
                     scolor,
-                    sdata = isStacked ? series.data : (xData || rawData);
+                    sdata = isStacked ? series.data : (xData || rawData),
+                    closestLeft = {
+                        x: Number.MIN_VALUE,
+                        y: 0
+                    },
+                    closestRight = {
+                        x: Number.MIN_VALUE,
+                        y: 0
+                    };
 
                 if (options.boostData && options.boostData.length > 0) {
                     return;
@@ -1176,9 +1184,11 @@
 
                         if (plotY !== undefined && !isNaN(plotY) && point.y !== null) {
                             shapeArgs = point.shapeArgs;
-                            pointAttr = (point.pointAttr && point.pointAttr['']) ||
-                                point.series.pointAttribs(point);
-                            swidth = pointAttr['stroke-width'];
+
+
+                            pointAttr = point.series.pointAttribs(point);
+
+                            swidth = pointAttr['stroke-width'] || 0;
 
                             // Handle point colors
                             color = H.color(pointAttr.fill).rgba;
@@ -1344,7 +1354,17 @@
                         isYInside = y >= yMin && y <= yMax;
                     }
 
-                    if ((!y || !isYInside)) {
+                    if (x > xMax && closestRight.x < xMax) {
+                        closestRight.x = x;
+                        closestRight.y = y;
+                    }
+
+                    if (x < xMin && closestLeft.x < xMin) {
+                        closestLeft.x = x;
+                        closestLeft.y = y;
+                    }
+
+                    if (y !== 0 && (!y || !isYInside)) {
                         return;
                     }
 
@@ -1427,6 +1447,30 @@
 
                     //return true;
                 });
+
+                function pushSupplementPoint(point) {
+                    if (!settings.useGPUTranslations) {
+                        inst.skipTranslation = true;
+                        point.x = xAxis.toPixels(point.x, true);
+                        point.y = yAxis.toPixels(point.y, true);
+                    }
+
+                    // We should only do this for lines, and we should ignore markers
+                    // since there's no point here that would have a marker.
+
+                    vertice(
+                        point.x,
+                        point.y,
+                        0,
+                        2
+                    );
+                }
+
+                if (!lastX) {
+                    // There are no points within the selected range
+                    pushSupplementPoint(closestLeft);
+                    pushSupplementPoint(closestRight);
+                }
             }
 
             /*
@@ -1566,7 +1610,9 @@
                 gl.viewport(0, 0, width, height);
                 shader.setPMatrix(orthoMatrix(width, height));
 
-                gl.lineWidth(settings.lineWidth);
+                if (settings.lineWidth > 1 && !H.isMS) {
+                    gl.lineWidth(settings.lineWidth);
+                }
 
                 vbuffer.build(exports.data, 'aVertexPosition', 4);
                 vbuffer.bind();
@@ -1628,8 +1674,9 @@
                         gl.blendEquation(gl.FUNC_MIN);
 
                     } else {
-                        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); //, gl.ONE, gl.ZERO);
-                        gl.blendEquation(gl.FUNC_ADD);
+                        //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);//, gl.ONE, gl.ZERO);
+                        //gl.blendEquation(gl.FUNC_ADD);
+                        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
                     }
 
                     shader.reset();
@@ -1737,7 +1784,6 @@
              */
             function init(canvas, noFlush) {
                 var i = 0,
-                    activeContext,
                     contexts = [
                         'webgl',
                         'experimental-webgl',
@@ -1758,7 +1804,6 @@
                 for (; i < contexts.length; i++) {
                     gl = canvas.getContext(contexts[i]);
                     if (gl) {
-                        activeContext = contexts[i];
                         break;
                     }
                 }
@@ -2230,6 +2275,25 @@
             return false;
         }
 
+        /* Used for treemap|heatmap.drawPoints */
+        function pointDrawHandler(proceed) {
+            if (!isSeriesBoosting(this)) {
+                return proceed.call(this);
+            }
+
+            //Make sure we have a valid OGL context
+            var renderer = createAndAttachRenderer(this.chart, this);
+
+            if (renderer) {
+                allocateIfNotSeriesBoosting(renderer, this);
+                renderer.pushSeries(this);
+            }
+
+            renderIfNotSeriesBoosting(renderer, this);
+        }
+
+
+
         ////////////////////////////////////////////////////////////////////////////////
         // We're wrapped in a closure, so just return if there's no webgl support
 
@@ -2240,404 +2304,376 @@
             } else {
                 H.error(26);
             }
-            //eslint-disable
-            return;
-            //eslint-enable
-        }
+        } else {
 
-        ////////////////////////////////////////////////////////////////////////////////
-        // GL-SPECIFIC WRAPPINGS FOLLOWS
+            ////////////////////////////////////////////////////////////////////////////
+            // GL-SPECIFIC WRAPPINGS FOLLOWS
 
-        /** If the series is a heatmap or treemap, or if the series is not boosting
-         *  do the default behaviour. Otherwise, process if the series has no 
-         *  extremes.
-         */
-        wrap(Series.prototype, 'processData', function(proceed) {
-            // If this is a heatmap, do default behaviour
-            if (!isSeriesBoosting(this) ||
-                this.type === 'heatmap' ||
-                this.type === 'treemap') {
-                proceed.apply(this, Array.prototype.slice.call(arguments, 1));
-            }
+            /** If the series is a heatmap or treemap, or if the series is not boosting
+             *  do the default behaviour. Otherwise, process if the series has no 
+             *  extremes.
+             */
+            wrap(Series.prototype, 'processData', function(proceed) {
+                // If this is a heatmap, do default behaviour
+                if (!isSeriesBoosting(this) ||
+                    this.type === 'heatmap' ||
+                    this.type === 'treemap') {
+                    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
+                }
 
-            if (!this.hasExtremes || !this.hasExtremes(true)) {
-                proceed.apply(this, Array.prototype.slice.call(arguments, 1));
-            }
-        });
+                if (!this.hasExtremes || !this.hasExtremes(true)) {
+                    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
+                }
+            });
 
-        H.extend(Series.prototype, {
-            pointRange: 0,
-            directTouch: false,
-            allowDG: false, // No data grouping, let boost handle large data 
-            hasExtremes: function(checkX) {
-                var options = this.options,
-                    data = options.data,
-                    xAxis = this.xAxis && this.xAxis.options,
-                    yAxis = this.yAxis && this.yAxis.options;
-
-                return data.length > (options.boostThreshold || Number.MAX_VALUE) &&
-                    isNumber(yAxis.min) && isNumber(yAxis.max) &&
-                    (!checkX || (isNumber(xAxis.min) && isNumber(xAxis.max)));
-            },
+            H.extend(Series.prototype, {
+                pointRange: 0,
+                directTouch: false,
+                allowDG: false, // No data grouping, let boost handle large data 
+                hasExtremes: function(checkX) {
+                    var options = this.options,
+                        data = options.data,
+                        xAxis = this.xAxis && this.xAxis.options,
+                        yAxis = this.yAxis && this.yAxis.options;
+
+                    return data.length > (options.boostThreshold || Number.MAX_VALUE) &&
+                        isNumber(yAxis.min) && isNumber(yAxis.max) &&
+                        (!checkX || (isNumber(xAxis.min) && isNumber(xAxis.max)));
+                },
 
-            /**
-             * If implemented in the core, parts of this can probably be 
-             * shared with other similar methods in Highcharts.
-             */
-            destroyGraphics: function() {
-                var series = this,
-                    points = this.points,
-                    point,
-                    i;
-
-                if (points) {
-                    for (i = 0; i < points.length; i = i + 1) {
-                        point = points[i];
-                        if (point && point.graphic) {
-                            point.graphic = point.graphic.destroy();
+                /**
+                 * If implemented in the core, parts of this can probably be 
+                 * shared with other similar methods in Highcharts.
+                 */
+                destroyGraphics: function() {
+                    var series = this,
+                        points = this.points,
+                        point,
+                        i;
+
+                    if (points) {
+                        for (i = 0; i < points.length; i = i + 1) {
+                            point = points[i];
+                            if (point && point.graphic) {
+                                point.graphic = point.graphic.destroy();
+                            }
                         }
                     }
-                }
 
-                each(['graph', 'area', 'tracker'], function(prop) {
-                    if (series[prop]) {
-                        series[prop] = series[prop].destroy();
-                    }
-                });
-            },
+                    each(['graph', 'area', 'tracker'], function(prop) {
+                        if (series[prop]) {
+                            series[prop] = series[prop].destroy();
+                        }
+                    });
+                },
 
-            renderCanvas: function() {
-                var series = this,
-                    options = series.options || {},
-                    renderer = false,
-                    chart = series.chart,
-                    xAxis = this.xAxis,
-                    yAxis = this.yAxis,
-                    //ctx,
-                    //c = 0,
-                    xData = options.xData || series.processedXData,
-                    yData = options.yData || series.processedYData,
+                renderCanvas: function() {
+                    var series = this,
+                        options = series.options || {},
+                        renderer = false,
+                        chart = series.chart,
+                        xAxis = this.xAxis,
+                        yAxis = this.yAxis,
+                        //ctx,
+                        //c = 0,
+                        xData = options.xData || series.processedXData,
+                        yData = options.yData || series.processedYData,
+
+                        rawData = options.data,
+                        xExtremes = xAxis.getExtremes(),
+                        xMin = xExtremes.min,
+                        xMax = xExtremes.max,
+                        yExtremes = yAxis.getExtremes(),
+                        yMin = yExtremes.min,
+                        yMax = yExtremes.max,
+                        pointTaken = {},
+                        lastClientX,
+                        sampling = !!series.sampling,
+                        points,
+                        enableMouseTracking = options.enableMouseTracking !== false,
+                        threshold = options.threshold,
+                        yBottom = yAxis.getThreshold(threshold),
+                        isRange = series.pointArrayMap &&
+                        series.pointArrayMap.join(',') === 'low,high',
+                        isStacked = !!options.stacking,
+                        cropStart = series.cropStart || 0,
+                        requireSorting = series.requireSorting,
+                        useRaw = !xData,
+                        minVal,
+                        maxVal,
+                        minI,
+                        maxI,
+
+                        addKDPoint = function(clientX, plotY, i) {
+                            //Shaves off about 60ms compared to repeated concatination
+                            index = clientX + ',' + plotY;
+
+                            // The k-d tree requires series points. 
+                            // Reduce the amount of points, since the time to build the 
+                            // tree increases exponentially.
+                            if (enableMouseTracking && !pointTaken[index]) {
+                                pointTaken[index] = true;
+
+                                if (chart.inverted) {
+                                    clientX = xAxis.len - clientX;
+                                    plotY = yAxis.len - plotY;
+                                }
 
-                    rawData = options.data,
-                    xExtremes = xAxis.getExtremes(),
-                    xMin = xExtremes.min,
-                    xMax = xExtremes.max,
-                    yExtremes = yAxis.getExtremes(),
-                    yMin = yExtremes.min,
-                    yMax = yExtremes.max,
-                    pointTaken = {},
-                    lastClientX,
-                    sampling = !!series.sampling,
-                    points,
-                    // r = options.marker && options.marker.radius,
-                    // cvsDrawPoint = this.cvsDrawPoint,
-                    // cvsLineTo = options.lineWidth ? this.cvsLineTo : false,
-                    // cvsMarker = r <= 1 ? this.cvsMarkerSquare : this.cvsMarkerCircle,
-                    enableMouseTracking = options.enableMouseTracking !== false,
-                    // lastPoint,
-                    threshold = options.threshold,
-                    yBottom = yAxis.getThreshold(threshold),
-                    hasThreshold = isNumber(threshold),
-                    // translatedThreshold = yBottom,
-                    // doFill = this.fill,
-                    isRange = series.pointArrayMap &&
-                    series.pointArrayMap.join(',') === 'low,high',
-                    isStacked = !!options.stacking,
-                    cropStart = series.cropStart || 0,
-                    requireSorting = series.requireSorting,
-                    wasNull,
-                    connectNulls = options.connectNulls,
-                    useRaw = !xData,
-                    minVal,
-                    maxVal,
-                    minI,
-                    maxI,
-                    // fillColor = series.fillOpacity ?
-                    // 		new Color(series.color).setOpacity(
-                    // 				pick(options.fillOpacity, 0.75)
-                    // 			).get() : series.color,
-
-                    addKDPoint = function(clientX, plotY, i) {
-                        //Shaves off about 60ms compared to repeated concatination
-                        index = clientX + ',' + plotY;
-
-                        // The k-d tree requires series points. 
-                        // Reduce the amount of points, since the time to build the 
-                        // tree increases exponentially.
-                        if (enableMouseTracking && !pointTaken[index]) {
-                            pointTaken[index] = true;
-
-                            if (chart.inverted) {
-                                clientX = xAxis.len - clientX;
-                                plotY = yAxis.len - plotY;
+                                points.push({
+                                    clientX: clientX,
+                                    plotX: clientX,
+                                    plotY: plotY,
+                                    i: cropStart + i
+                                });
                             }
+                        };
 
-                            points.push({
-                                clientX: clientX,
-                                plotX: clientX,
-                                plotY: plotY,
-                                i: cropStart + i
+                    // Get or create the renderer
+                    renderer = createAndAttachRenderer(chart, series);
+
+                    if (!this.visible) {
+                        if (!isChartSeriesBoosting(chart) && renderer) {
+                            renderer.clear();
+                            this.image.attr({
+                                href: ''
                             });
                         }
-                    };
-
-                // Get or create the renderer
-                renderer = createAndAttachRenderer(chart, series);
-
-                if (!this.visible) {
-                    if (!isChartSeriesBoosting(chart) && renderer) {
-                        renderer.clear();
-                        this.image.attr({
-                            href: ''
-                        });
+                        return;
                     }
-                    return;
-                }
-
-                // If we are zooming out from SVG mode, destroy the graphics
-                if (this.points || this.graph) {
-                    this.destroyGraphics();
-                }
 
-                // If we're rendering per. series we should create the marker groups
-                // as usual.
-                if (!isChartSeriesBoosting(chart)) {
-                    this.markerGroup = series.plotGroup(
-                        'markerGroup',
-                        'markers',
-                        true,
-                        1,
-                        chart.seriesGroup
-                    );
-                } else {
-                    //Use a single group for the markers
-                    this.markerGroup = chart.markerGroup;
-                }
-
-                points = this.points = [];
+                    // If we are zooming out from SVG mode, destroy the graphics
+                    if (this.points || this.graph) {
+                        this.destroyGraphics();
+                    }
 
-                // Do not start building while drawing 
-                series.buildKDTree = noop;
+                    // If we're rendering per. series we should create the marker groups
+                    // as usual.
+                    if (!isChartSeriesBoosting(chart)) {
+                        this.markerGroup = series.plotGroup(
+                            'markerGroup',
+                            'markers',
+                            true,
+                            1,
+                            chart.seriesGroup
+                        );
+                    } else {
+                        //Use a single group for the markers
+                        this.markerGroup = chart.markerGroup;
+                    }
 
-                if (renderer) {
-                    allocateIfNotSeriesBoosting(renderer, this);
-                    renderer.pushSeries(series);
-                    // Perform the actual renderer if we're on series level
-                    renderIfNotSeriesBoosting(renderer, this, chart);
-                    //console.log(series, chart);
-                }
+                    points = this.points = [];
 
-                /* This builds the KD-tree */
-                function processPoint(d, i) {
-                    var x,
-                        y,
-                        clientX,
-                        plotY,
-                        isNull,
-                        low,
-                        chartDestroyed = typeof chart.index === 'undefined',
-                        isYInside = true;
+                    // Do not start building while drawing 
+                    series.buildKDTree = noop;
 
-                    if (!chartDestroyed) {
-                        if (useRaw) {
-                            x = d[0];
-                            y = d[1];
-                        } else {
-                            x = d;
-                            y = yData[i];
-                        }
+                    if (renderer) {
+                        allocateIfNotSeriesBoosting(renderer, this);
+                        renderer.pushSeries(series);
+                        // Perform the actual renderer if we're on series level
+                        renderIfNotSeriesBoosting(renderer, this, chart);
+                        //console.log(series, chart);
+                    }
 
-                        // Resolve low and high for range series
-                        if (isRange) {
+                    /* This builds the KD-tree */
+                    function processPoint(d, i) {
+                        var x,
+                            y,
+                            clientX,
+                            plotY,
+                            isNull,
+                            low,
+                            chartDestroyed = typeof chart.index === 'undefined',
+                            isYInside = true;
+
+                        if (!chartDestroyed) {
                             if (useRaw) {
-                                y = d.slice(1, 3);
+                                x = d[0];
+                                y = d[1];
+                            } else {
+                                x = d;
+                                y = yData[i];
                             }
-                            low = y[0];
-                            y = y[1];
-                        } else if (isStacked) {
-                            x = d.x;
-                            y = d.stackY;
-                            low = y - d.y;
-                        }
 
-                        isNull = y === null;
+                            // Resolve low and high for range series
+                            if (isRange) {
+                                if (useRaw) {
+                                    y = d.slice(1, 3);
+                                }
+                                low = y[0];
+                                y = y[1];
+                            } else if (isStacked) {
+                                x = d.x;
+                                y = d.stackY;
+                                low = y - d.y;
+                            }
 
-                        // Optimize for scatter zooming
-                        if (!requireSorting) {
-                            isYInside = y >= yMin && y <= yMax;
-                        }
+                            isNull = y === null;
 
-                        if (!isNull && x >= xMin && x <= xMax && isYInside) {
+                            // Optimize for scatter zooming
+                            if (!requireSorting) {
+                                isYInside = y >= yMin && y <= yMax;
+                            }
 
-                            // We use ceil to allow the KD tree to work with sub pixels,
-                            // which can be used in boost to space pixels
-                            clientX = Math.ceil(xAxis.toPixels(x, true));
+                            if (!isNull && x >= xMin && x <= xMax && isYInside) {
 
-                            if (sampling) {
-                                if (minI === undefined || clientX === lastClientX) {
-                                    if (!isRange) {
-                                        low = y;
-                                    }
-                                    if (maxI === undefined || y > maxVal) {
-                                        maxVal = y;
-                                        maxI = i;
-                                    }
-                                    if (minI === undefined || low < minVal) {
-                                        minVal = low;
-                                        minI = i;
-                                    }
+                                // We use ceil to allow the KD tree to work with sub
+                                // pixels, which can be used in boost to space pixels
+                                clientX = Math.ceil(xAxis.toPixels(x, true));
 
-                                }
-                                if (clientX !== lastClientX) { // Add points and reset
-                                    if (minI !== undefined) { // then maxI is also a number
-                                        plotY = yAxis.toPixels(maxVal, true);
-                                        yBottom = yAxis.toPixels(minVal, true);
-
-                                        addKDPoint(clientX, plotY, maxI);
-                                        if (yBottom !== plotY) {
-                                            addKDPoint(clientX, yBottom, minI);
+                                if (sampling) {
+                                    if (minI === undefined || clientX === lastClientX) {
+                                        if (!isRange) {
+                                            low = y;
+                                        }
+                                        if (maxI === undefined || y > maxVal) {
+                                            maxVal = y;
+                                            maxI = i;
+                                        }
+                                        if (minI === undefined || low < minVal) {
+                                            minVal = low;
+                                            minI = i;
                                         }
+
                                     }
+                                    if (clientX !== lastClientX) { // Add points and reset
+                                        if (minI !== undefined) { // then maxI is also a number
+                                            plotY = yAxis.toPixels(maxVal, true);
+                                            yBottom = yAxis.toPixels(minVal, true);
+
+                                            addKDPoint(clientX, plotY, maxI);
+                                            if (yBottom !== plotY) {
+                                                addKDPoint(clientX, yBottom, minI);
+                                            }
+                                        }
 
-                                    minI = maxI = undefined;
-                                    lastClientX = clientX;
+                                        minI = maxI = undefined;
+                                        lastClientX = clientX;
+                                    }
+                                } else {
+                                    plotY = Math.ceil(yAxis.toPixels(y, true));
+                                    addKDPoint(clientX, plotY, i);
                                 }
-                            } else {
-                                plotY = Math.ceil(yAxis.toPixels(y, true));
-                                addKDPoint(clientX, plotY, i);
                             }
                         }
-                        wasNull = isNull && !connectNulls;
+
+                        return !chartDestroyed;
                     }
 
-                    return !chartDestroyed;
-                }
+                    function doneProcessing() {
+                        fireEvent(series, 'renderedCanvas');
+                        // Pass tests in Pointer. 
+                        // Replace this with a single property, and replace when zooming
+                        // in below boostThreshold.
+                        series.directTouch = false;
+                        series.options.stickyTracking = true;
+
+                        // Go back to prototype, ready to build
+                        delete series.buildKDTree;
+                        series.buildKDTree();
+                    }
 
-                function doneProcessing() {
-                    fireEvent(series, 'renderedCanvas');
-                    // Pass tests in Pointer. 
-                    // Replace this with a single property, and replace when zooming in
-                    // below boostThreshold.
-                    series.directTouch = false;
-                    series.options.stickyTracking = true;
+                    // Loop over the points to build the k-d tree
+                    eachAsync(
+                        isStacked ? series.data : (xData || rawData),
+                        processPoint,
+                        doneProcessing,
+                        chart.renderer.forExport ? Number.MAX_VALUE : undefined
+                    );
+                }
+            });
 
-                    delete series.buildKDTree; // Go back to prototype, ready to build
-                    series.buildKDTree();
+            /*
+             * We need to handle heatmaps separatly, since we can't perform the
+             * size/color calculations in the shader easily.
+             *
+             * This likely needs future optimization.
+             *
+             */
+            each(['heatmap', 'treemap'],
+                function(t) {
+                    if (seriesTypes[t]) {
+                        wrap(seriesTypes[t].prototype, 'drawPoints', pointDrawHandler);
+                        seriesTypes[t].prototype.directTouch = false; // Use k-d-tree
+                    }
                 }
+            );
 
-                // Loop over the points to build the k-d tree
-                eachAsync(
-                    isStacked ? series.data : (xData || rawData),
-                    processPoint,
-                    doneProcessing,
-                    chart.renderer.forExport ? Number.MAX_VALUE : undefined
+            if (seriesTypes.bubble) {
+                // By default, the bubble series does not use the KD-tree, so force it
+                // to.
+                delete seriesTypes.bubble.prototype.buildKDTree;
+                seriesTypes.bubble.prototype.directTouch = false;
+
+                // Needed for markers to work correctly
+                wrap(
+                    seriesTypes.bubble.prototype,
+                    'markerAttribs',
+                    function(proceed) {
+                        if (isSeriesBoosting(this)) {
+                            return false;
+                        }
+                        return proceed.apply(this, [].slice.call(arguments, 1));
+                    }
                 );
             }
-        });
-
-        /* Used for treemap|heatmap.drawPoints */
-        function pointDrawHandler(proceed) {
-            if (!isSeriesBoosting(this)) {
-                return proceed.call(this);
-            }
 
-            //Make sure we have a valid OGL context
-            var renderer = createAndAttachRenderer(this.chart, this);
-
-            if (renderer) {
-                allocateIfNotSeriesBoosting(renderer, this);
-                renderer.pushSeries(this);
-            }
-
-            renderIfNotSeriesBoosting(renderer, this);
-        }
+            seriesTypes.scatter.prototype.fill = true;
 
-        /*
-         * We need to handle heatmaps separatly, since we can't perform the size/color
-         * calculations in the shader easily.
-         *
-         * This likely needs future optimization.
-         *
-         */
-        each(['heatmap', 'treemap'],
-            function(t) {
-                if (seriesTypes[t]) {
-                    wrap(seriesTypes[t].prototype, 'drawPoints', pointDrawHandler);
-                    seriesTypes[t].prototype.directTouch = false; // Use k-d-tree
-                }
-            }
-        );
+            extend(seriesTypes.area.prototype, {
+                fill: true,
+                fillOpacity: true,
+                sampling: true
+            });
 
-        if (seriesTypes.bubble) {
-            // By default, the bubble series does not use the KD-tree, so force it to.
-            delete seriesTypes.bubble.prototype.buildKDTree;
-            seriesTypes.bubble.prototype.directTouch = false;
+            extend(seriesTypes.column.prototype, {
+                fill: true,
+                sampling: true
+            });
 
-            // Needed for markers to work correctly
-            wrap(seriesTypes.bubble.prototype, 'markerAttribs', function(proceed) {
-                if (isSeriesBoosting(this)) {
-                    return false;
+            wrap(Series.prototype, 'setVisible', function(proceed, vis) {
+                proceed.call(this, vis, false);
+                if (this.visible === false && this.ogl && this.canvas && this.image) {
+                    this.ogl.clear();
+                    this.image.attr({
+                        href: ''
+                    });
+                } else {
+                    this.chart.redraw();
                 }
-                return proceed.apply(this, [].slice.call(arguments, 1));
             });
-        }
 
-        seriesTypes.scatter.prototype.fill = true;
-
-        extend(seriesTypes.area.prototype, {
-            fill: true,
-            fillOpacity: true,
-            sampling: true
-        });
-
-        extend(seriesTypes.column.prototype, {
-            fill: true,
-            sampling: true
-        });
-
-        wrap(Series.prototype, 'setVisible', function(proceed, vis) {
-            proceed.call(this, vis, false);
-            if (this.visible === false && this.ogl && this.canvas && this.image) {
-                this.ogl.clear();
-                this.image.attr({
-                    href: ''
-                });
-            } else {
-                this.chart.redraw();
-            }
-        });
-
-        /**
-         * Take care of the canvas blitting
-         */
-        H.Chart.prototype.callbacks.push(function(chart) {
+            /**
+             * Take care of the canvas blitting
+             */
+            H.Chart.prototype.callbacks.push(function(chart) {
 
-            /* Convert chart-level canvas to image */
-            function canvasToSVG() {
-                if (chart.ogl && isChartSeriesBoosting(chart)) {
-                    chart.ogl.render(chart);
+                /* Convert chart-level canvas to image */
+                function canvasToSVG() {
+                    if (chart.ogl && isChartSeriesBoosting(chart)) {
+                        chart.ogl.render(chart);
+                    }
                 }
-            }
 
-            /* Clear chart-level canvas */
-            function preRender() {
-                if (chart.canvas && chart.ogl && isChartSeriesBoosting(chart)) {
-                    // Allocate
-                    chart.ogl.allocateBuffer(chart);
-                }
+                /* Clear chart-level canvas */
+                function preRender() {
+                    if (chart.canvas && chart.ogl && isChartSeriesBoosting(chart)) {
+                        // Allocate
+                        chart.ogl.allocateBuffer(chart);
+                    }
 
-                //see #6518
-                if (chart.markerGroup) {
-                    chart.markerGroup.translate(
-                        chart.xAxis[0].pos,
-                        chart.yAxis[0].pos
-                    );
+                    //see #6518
+                    if (chart.markerGroup) {
+                        chart.markerGroup.translate(
+                            chart.xAxis[0].pos,
+                            chart.yAxis[0].pos
+                        );
+                    }
                 }
-            }
 
-            addEvent(chart, 'predraw', preRender);
-            addEvent(chart, 'render', canvasToSVG);
-        });
+                addEvent(chart, 'predraw', preRender);
+                addEvent(chart, 'render', canvasToSVG);
+            });
+        } // if hasCanvasSupport
 
     }(Highcharts));
 }));