highcharts-rails 4.0.4.1 → 4.1.0

data/app/assets/javascripts/highcharts/modules/canvas-tools.js

@@ -2908,7 +2908,7 @@ if (CanvasRenderingContext2D) {
 		});
 	}
 }/**
- * @license Highcharts JS v4.0.4 (2014-09-02)
+ * @license Highcharts JS v4.1.0 (2015-02-16)
  * CanVGRenderer Extension module
  *
  * (c) 2011-2012 Torstein Honsi, Erik Olsson

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

@@ -1,113 +1,20 @@
 /**
- * @license Data plugin for Highcharts
+ * @license Highcharts JS v4.1.0 (2015-02-16)
+ * Data module
  *
  * (c) 2012-2014 Torstein Honsi
  *
  * License: www.highcharts.com/license
  */
 
-/*
- * The Highcharts Data plugin is a utility to ease parsing of input sources like
- * CSV, HTML tables or grid views into basic configuration options for use 
- * directly in the Highcharts constructor.
- *
- * Demo: http://jsfiddle.net/highcharts/SnLFj/
- *
- * --- OPTIONS ---
- *
- * - columns : Array<Array<Mixed>>
- * A two-dimensional array representing the input data on tabular form. This input can
- * be used when the data is already parsed, for example from a grid view component.
- * Each cell can be a string or number. If not switchRowsAndColumns is set, the columns
- * are interpreted as series. See also the rows option.
- *
- * - complete : Function(chartOptions)
- * The callback that is evaluated when the data is finished loading, optionally from an 
- * external source, and parsed. The first argument passed is a finished chart options
- * object, containing the series. Thise options
- * can be extended with additional options and passed directly to the chart constructor. This is 
- * related to the parsed callback, that goes in at an earlier stage.
- *
- * - csv : String
- * A comma delimited string to be parsed. Related options are startRow, endRow, startColumn
- * and endColumn to delimit what part of the table is used. The lineDelimiter and 
- * itemDelimiter options define the CSV delimiter formats.
- *
- * - dateFormat: String
- * Which of the predefined date formats in Date.prototype.dateFormats to use to parse date
- * columns, for example "dd/mm/YYYY" or "YYYY-mm-dd". Defaults to a best guess based on
- * what format gives valid dates, and prefers ordered dates.
- * 
- * - endColumn : Integer
- * In tabular input data, the first row (indexed by 0) to use. Defaults to the last 
- * column containing data.
- *
- * - endRow : Integer
- * In tabular input data, the last row (indexed by 0) to use. Defaults to the last row
- * containing data.
- *
- * - googleSpreadsheetKey : String 
- * A Google Spreadsheet key. See https://developers.google.com/gdata/samples/spreadsheet_sample
- * for general information on GS.
- *
- * - googleSpreadsheetWorksheet : String 
- * The Google Spreadsheet worksheet. The available id's can be read from 
- * https://spreadsheets.google.com/feeds/worksheets/{key}/public/basic
- *
- * - itemDelimiter : String
- * Item or cell delimiter for parsing CSV. Defaults to the tab character "\t" if a tab character
- * is found in the CSV string, if not it defaults to ",".
- *
- * - lineDelimiter : String
- * Line delimiter for parsing CSV. Defaults to "\n".
- *
- * - parsed : Function
- * A callback function to access the parsed columns, the two-dimentional input data
- * array directly, before they are interpreted into series data and categories. See also
- * the complete callback, that goes in on a later stage where the raw columns are interpreted
- * into a Highcharts option structure. Return false to stop completion, or call this.complete()
- * to continue async.
- *
- * - parseDate : Function
- * A callback function to parse string representations of dates into JavaScript timestamps.
- * Return an integer on success.
- *
- * - rows : Array<Array<Mixed>>
- * The same as the columns input option, but defining rows intead of columns.
- *
- * - seriesMapping : Array<Object>
- * An array containing object with Point property names along with what column id the
- * property should be taken from.
- *
- * - startColumn : Integer
- * In tabular input data, the first column (indexed by 0) to use. 
- *
- * - startRow : Integer
- * In tabular input data, the first row (indexed by 0) to use.
- *
- * - switchRowsAndColumns : Boolean
- * Switch rows and columns of the input data, so that this.columns effectively becomes the
- * rows of the data set, and the rows are interpreted as series.
- *
- * - table : String|HTMLElement
- * A HTML table or the id of such to be parsed as input data. Related options ara startRow,
- * endRow, startColumn and endColumn to delimit what part of the table is used.
- */
-
-/*
- * TODO: 
- * - Handle various date formats
- *     - http://jsfiddle.net/highcharts/114wejdx/
- *     - http://jsfiddle.net/highcharts/ryv67bkq/
- */
-
 // JSLint options:
 /*global jQuery, HighchartsAdapter */
 
-(function (Highcharts) { // docs
+(function (Highcharts) {
 	
 	// Utilities
 	var each = Highcharts.each,
+		pick = Highcharts.pick,
 		inArray = HighchartsAdapter.inArray,
 		splat = Highcharts.splat,
 		SeriesBuilder;
@@ -128,6 +35,8 @@
 		this.options = options;
 		this.chartOptions = chartOptions;
 		this.columns = options.columns || this.rowsToColumns(options.rows) || [];
+		this.firstRowAsNames = pick(options.firstRowAsNames, true);
+		this.decimalRegex = options.decimalPoint && new RegExp('^([0-9]+)' + options.decimalPoint + '([0-9]+)$');
 
 		// This is a two-dimensional array holding the raw, trimmed string values
 		// with the same organisation as the columns array. It makes it possible
@@ -172,7 +81,7 @@
 			globalType = chartOptions && chartOptions.chart && chartOptions.chart.type,
 			individualCounts = [],
 			seriesBuilders = [],
-			seriesIndex,
+			seriesIndex = 0,
 			i;
 
 		each((chartOptions && chartOptions.series) || [], function (series) {
@@ -253,9 +162,6 @@
 		// Interpret the values into right types
 		this.parseTypes();
 		
-		// Use first row for series names?
-		this.findHeaderRow();
-		
 		// Handle columns if a handleColumns callback is given
 		if (this.parsed() !== false) {
 		
@@ -420,26 +326,23 @@
 		}
 	},
 	
-	/**
-	 * Find the header row. For now, we just check whether the first row contains
-	 * numbers or strings. Later we could loop down and find the first row with 
-	 * numbers.
-	 */
-	findHeaderRow: function () {
-		var headerRow = 0;
-		each(this.columns, function (column) {
-			if (column.isNumeric && typeof column[0] !== 'string') {
-				headerRow = null;
-			}
-		});
-		this.headerRow = headerRow;
-	},
-	
 	/**
 	 * Trim a string from whitespace
 	 */
-	trim: function (str) {
-		return typeof str === 'string' ? str.replace(/^\s+|\s+$/g, '') : str;
+	trim: function (str, inside) {
+		if (typeof str === 'string') {
+			str = str.replace(/^\s+|\s+$/g, '');
+
+			// Clear white space insdie the string, like thousands separators
+			if (inside && /^[0-9\s]+$/.test(str)) { 
+				str = str.replace(/\s/g, '');
+			}
+
+			if (this.decimalRegex) {
+				str = str.replace(this.decimalRegex, '$1.$2');
+			}
+		}
+		return str;
 	},
 	
 	/**
@@ -447,97 +350,118 @@
 	 */
 	parseTypes: function () {
 		var columns = this.columns,
-			rawColumns = this.rawColumns, 
-			col = columns.length, 
-			row,
+			col = columns.length;
+
+		while (col--) {
+			this.parseColumn(columns[col], col);
+		}
+
+	},
+
+	/**
+	 * Parse a single column. Set properties like .isDatetime and .isNumeric.
+	 */
+	parseColumn: function (column, col) {
+		var rawColumns = this.rawColumns,
+			columns = this.columns, 
+			row = column.length,
 			val,
 			floatVal,
 			trimVal,
-			isXColumn,
+			trimInsideVal,
+			firstRowAsNames = this.firstRowAsNames,
+			isXColumn = inArray(col, this.valueCount.xColumns) !== -1,
 			dateVal,
-			descending,
 			backup = [],
 			diff,
-			hasHeaderRow,
-			forceCategory,
-			chartOptions = this.chartOptions;
-
-		while (col--) {
-			row = columns[col].length;
+			chartOptions = this.chartOptions,
+			descending,
+			columnTypes = this.options.columnTypes || [],
+			columnType = columnTypes[col],
+			forceCategory = isXColumn && ((chartOptions && chartOptions.xAxis && splat(chartOptions.xAxis)[0].type === 'category') || columnType === 'string');
+		
+		if (!rawColumns[col]) {
 			rawColumns[col] = [];
-			isXColumn = inArray(col, this.valueCount.xColumns) !== -1;
-			forceCategory = isXColumn && chartOptions && chartOptions.xAxis && splat(chartOptions.xAxis)[0].type === 'category';
-			while (row--) {
-				val = backup[row] || columns[col][row];
-				floatVal = parseFloat(val);
-				trimVal = rawColumns[col][row] = this.trim(val);
-
-				// Disable number or date parsing by setting the X axis type to category
-				if (forceCategory) {
-					columns[col][row] = trimVal;
-
-				/*jslint eqeq: true*/
-				} else if (trimVal == floatVal) { // is numeric
-				/*jslint eqeq: false*/
-					columns[col][row] = floatVal;
-					
-					// If the number is greater than milliseconds in a year, assume datetime
-					if (floatVal > 365 * 24 * 3600 * 1000) {
-						columns[col].isDatetime = true;
-					} else {
-						columns[col].isNumeric = true;
-					}					
+		}
+		while (row--) {
+			val = backup[row] || column[row];
+			
+			trimVal = this.trim(val);
+			trimInsideVal = this.trim(val, true);
+			floatVal = parseFloat(trimInsideVal);
+
+			// Set it the first time
+			if (rawColumns[col][row] === undefined) {
+				rawColumns[col][row] = trimVal;
+			}
+			
+			// Disable number or date parsing by setting the X axis type to category
+			if (forceCategory || (row === 0 && firstRowAsNames)) {
+				column[row] = trimVal;
+
+			} else if (+trimInsideVal === floatVal) { // is numeric
+			
+				column[row] = floatVal;
 				
-				} else { // string, continue to determine if it is a date string or really a string
-					dateVal = this.parseDate(val);
-					// Only allow parsing of dates if this column is an x-column
-					if (isXColumn && typeof dateVal === 'number' && !isNaN(dateVal)) { // is date
-						backup[row] = val; 
-						columns[col][row] = dateVal;
-						columns[col].isDatetime = true;
-
-						// Check if the dates are uniformly descending or ascending. If they 
-						// are not, chances are that they are a different time format, so check
-						// for alternative.
-						if (columns[col][row + 1] !== undefined) {
-							diff = dateVal > columns[col][row + 1];
-							if (diff !== descending && descending !== undefined) {
-								if (this.alternativeFormat) {
-									this.dateFormat = this.alternativeFormat;
-									row = columns[col].length;
-									this.alternativeFormat = this.dateFormats[this.dateFormat].alternative;
-								} else {
-									columns[col].unsorted = true;
-								}
+				// If the number is greater than milliseconds in a year, assume datetime
+				if (floatVal > 365 * 24 * 3600 * 1000 && columnType !== 'float') {
+					column.isDatetime = true;
+				} else {
+					column.isNumeric = true;
+				}
+
+				if (column[row + 1] !== undefined) {
+					descending = floatVal > column[row + 1];
+				}
+			
+			// String, continue to determine if it is a date string or really a string
+			} else {
+				dateVal = this.parseDate(val);
+				// Only allow parsing of dates if this column is an x-column
+				if (isXColumn && typeof dateVal === 'number' && !isNaN(dateVal) && columnType !== 'float') { // is date
+					backup[row] = val; 
+					column[row] = dateVal;
+					column.isDatetime = true;
+
+					// Check if the dates are uniformly descending or ascending. If they 
+					// are not, chances are that they are a different time format, so check
+					// for alternative.
+					if (column[row + 1] !== undefined) {
+						diff = dateVal > column[row + 1];
+						if (diff !== descending && descending !== undefined) {
+							if (this.alternativeFormat) {
+								this.dateFormat = this.alternativeFormat;
+								row = column.length;
+								this.alternativeFormat = this.dateFormats[this.dateFormat].alternative;
+							} else {
+								column.unsorted = true;
 							}
-							descending = diff;
-						}
-					
-					} else { // string
-						columns[col][row] = trimVal === '' ? null : trimVal;
-						if (row !== 0 && (columns[col].isDatetime || columns[col].isNumeric)) {
-							columns[col].mixed = true;
 						}
+						descending = diff;
+					}
+				
+				} else { // string
+					column[row] = trimVal === '' ? null : trimVal;
+					if (row !== 0 && (column.isDatetime || column.isNumeric)) {
+						column.mixed = true;
 					}
 				}
 			}
+		}
 
-			// If strings are intermixed with numbers or dates in a parsed column, it is an indication
-			// that parsing went wrong or the data was not intended to display as numbers or dates and 
-			// parsing is too aggressive. Fall back to categories. Demonstrated in the 
-			// highcharts/demo/column-drilldown sample.
-			if (isXColumn && columns[col].mixed) {
-				columns[col] = rawColumns[col];
-			}
+		// If strings are intermixed with numbers or dates in a parsed column, it is an indication
+		// that parsing went wrong or the data was not intended to display as numbers or dates and 
+		// parsing is too aggressive. Fall back to categories. Demonstrated in the 
+		// highcharts/demo/column-drilldown sample.
+		if (isXColumn && column.mixed) {
+			columns[col] = rawColumns[col];
 		}
 
-		// If the 0 column is date and descending, reverse all columns. 
-		// TODO: probably this should apply to xColumns, not 0 column alone.
-		if (columns[0].isDatetime && descending) {
-			hasHeaderRow = typeof columns[0][0] !== 'number';
+		// If the 0 column is date or number and descending, reverse all columns. 
+		if (isXColumn && descending && this.options.sort) {
 			for (col = 0; col < columns.length; col++) {
 				columns[col].reverse();
-				if (hasHeaderRow) {
+				if (firstRowAsNames) {
 					columns[col].unshift(columns[col].pop());
 				}
 			}
@@ -578,7 +502,6 @@
 		'mm/dd/YY': {
 			regex: /^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{2})$/,
 			parser: function (match) {
-				console.log(match)
 				return Date.UTC(+match[3] + 2000, match[1] - 1, +match[2]);
 			}
 		}
@@ -731,7 +654,7 @@
 
 			// Get the names and shift the top row
 			for (i = 0; i < columns.length; i++) {
-				if (this.headerRow === 0) {
+				if (this.firstRowAsNames) {
 					columns[i].name = columns[i].shift();
 				}
 			}
@@ -812,17 +735,23 @@
 				if (builder.name) {
 					series[seriesIndex].name = builder.name;
 				}
+				if (type === 'category') {
+					series[seriesIndex].turboThreshold = 0;
+				}
 			}
 
 
 
 			// Do the callback
 			chartOptions = {
-				xAxis: {
-					type: type
-				},
 				series: series
 			};
+			if (type) {
+				chartOptions.xAxis = {
+					type: type
+				};
+			}
+			
 			if (options.complete) {
 				options.complete(chartOptions);
 			}

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

@@ -7,7 +7,7 @@
  * Demo: http://jsfiddle.net/highcharts/Vf3yT/
  */
 
-/*global HighchartsAdapter*/
+/*global Highcharts,HighchartsAdapter*/
 (function (H) {
 
 	"use strict";
@@ -25,18 +25,39 @@
 		ColumnSeries = seriesTypes.column,
 		fireEvent = HighchartsAdapter.fireEvent,
 		inArray = HighchartsAdapter.inArray,
-		dupes = [];
+		dupes = [],
+		ddSeriesId = 1;
 
 	// Utilities
-	function tweenColors(startColor, endColor, pos) {
-		var rgba = [
-				Math.round(startColor[0] + (endColor[0] - startColor[0]) * pos),
-				Math.round(startColor[1] + (endColor[1] - startColor[1]) * pos),
-				Math.round(startColor[2] + (endColor[2] - startColor[2]) * pos),
-				startColor[3] + (endColor[3] - startColor[3]) * pos
-			];
-		return 'rgba(' + rgba.join(',') + ')';
+	/*
+	 * Return an intermediate color between two colors, according to pos where 0
+	 * is the from color and 1 is the to color
+	 */
+	function tweenColors(from, to, pos) {
+		// Check for has alpha, because rgba colors perform worse due to lack of
+		// support in WebKit.
+		var hasAlpha;
+
+		from = from.rgba;
+		to = to.rgba;
+		hasAlpha = (to[3] !== 1 || from[3] !== 1);
+		if (!to.length || !from.length) {
+			Highcharts.error(23);
+		}
+		return (hasAlpha ? 'rgba(' : 'rgb(') + 
+			Math.round(to[0] + (from[0] - to[0]) * (1 - pos)) + ',' + 
+			Math.round(to[1] + (from[1] - to[1]) * (1 - pos)) + ',' + 
+			Math.round(to[2] + (from[2] - to[2]) * (1 - pos)) + 
+			(hasAlpha ? (',' + (to[3] + (from[3] - to[3]) * (1 - pos))) : '') + ')';
 	}
+	/**
+	 * Handle animation of the color attributes directly
+	 */
+	each(['fill', 'stroke'], function (prop) {
+		HighchartsAdapter.addAnimSetter(prop, function (fx) {
+			fx.elem.attr(prop, tweenColors(H.Color(fx.start), H.Color(fx.end), fx.pos));
+		});
+	});
 
 	// Add language
 	extend(defaultOptions.lang, {
@@ -101,10 +122,11 @@
 			level,
 			levelNumber;
 
-		levelNumber = oldSeries.levelNumber || 0;
+		levelNumber = oldSeries.options._levelNumber || 0;
 			
 		ddOptions = extend({
-			color: color
+			color: color,
+			_ddSeriesId: ddSeriesId++
 		}, ddOptions);
 		pointIndex = inArray(point, oldSeries.points);
 
@@ -112,19 +134,21 @@
 		each(oldSeries.chart.series, function (series) {
 			if (series.xAxis === xAxis) {
 				levelSeries.push(series);
-				levelSeriesOptions.push(series.userOptions);
-				series.levelNumber = series.levelNumber || levelNumber; // #3182
+				series.options._ddSeriesId = series.options._ddSeriesId || ddSeriesId++;
+				series.options._colorIndex = series.userOptions._colorIndex;
+				levelSeriesOptions.push(series.options);
+				series.options._levelNumber = series.options._levelNumber || levelNumber; // #3182
 			}
 		});
 
 		// Add a record of properties for each drilldown level
 		level = {
 			levelNumber: levelNumber,
-			seriesOptions: oldSeries.userOptions,
+			seriesOptions: oldSeries.options,
 			levelSeriesOptions: levelSeriesOptions,
 			levelSeries: levelSeries,
 			shapeArgs: point.shapeArgs,
-			bBox: point.graphic.getBBox(),
+			bBox: point.graphic ? point.graphic.getBBox() : {}, // no graphic in line series with markers disabled
 			color: color,
 			lowerSeriesOptions: ddOptions,
 			pointOptions: oldSeries.options.data[pointIndex],
@@ -144,7 +168,7 @@
 		this.drilldownLevels.push(level);
 
 		newSeries = level.lowerSeries = this.addSeries(ddOptions, false);
-		newSeries.levelNumber = levelNumber + 1;
+		newSeries.options._levelNumber = levelNumber + 1;
 		if (xAxis) {
 			xAxis.oldPos = xAxis.pos;
 			xAxis.userMin = xAxis.userMax = null;
@@ -167,7 +191,7 @@
 			each(this.drilldownLevels, function (level) {
 				if (level.levelNumber === levelToRemove) {
 					each(level.levelSeries, function (series) {
-						if (series.levelNumber === levelToRemove) { // Not removed, not added as part of a multi-series drilldown
+						if (series.options && series.options._levelNumber === levelToRemove) { // Not removed, not added as part of a multi-series drilldown
 							series.remove(false);
 						}
 					});
@@ -233,7 +257,7 @@
 			levelNumber = drilldownLevels[drilldownLevels.length - 1].levelNumber,
 			i = drilldownLevels.length,
 			chartSeries = chart.series,
-			seriesI = chartSeries.length,
+			seriesI,
 			level,
 			oldSeries,
 			newSeries,
@@ -241,7 +265,7 @@
 			addSeries = function (seriesOptions) {
 				var addedSeries;
 				each(chartSeries, function (series) {
-					if (series.userOptions === seriesOptions) {
+					if (series.options._ddSeriesId === seriesOptions._ddSeriesId) {
 						addedSeries = series;
 					}
 				});
@@ -254,7 +278,7 @@
 					newSeries = addedSeries;
 				}
 			};
-		
+
 		while (i--) {
 
 			level = drilldownLevels[i];
@@ -264,6 +288,7 @@
 				// Get the lower series by reference or id
 				oldSeries = level.lowerSeries;
 				if (!oldSeries.chart) {  // #2786
+					seriesI = chartSeries.length; // #2919
 					while (seriesI--) {
 						if (chartSeries[seriesI].options.id === level.lowerSeriesOptions.id) {
 							oldSeries = chartSeries[seriesI];
@@ -281,11 +306,11 @@
 					newSeries.drilldownLevel = level;
 					newSeries.options.animation = chart.options.drilldown.animation;
 
-					if (oldSeries.animateDrillupFrom) {
+					if (oldSeries.animateDrillupFrom && oldSeries.chart) { // #2919
 						oldSeries.animateDrillupFrom(level);
 					}
 				}
-				newSeries.levelNumber = levelNumber;
+				newSeries.options._levelNumber = levelNumber;
 				
 				oldSeries.remove(false);
 
@@ -325,7 +350,9 @@
 				level = newSeries.drilldownLevel;
 
 			each(this.points, function (point) {
-				point.graphic.hide();
+				if (point.graphic) { // #3407
+					point.graphic.hide();
+				}
 				if (point.dataLabel) {
 					point.dataLabel.hide();
 				}
@@ -337,18 +364,22 @@
 
 			// Do dummy animation on first point to get to complete
 			setTimeout(function () {
-				each(newSeries.points, function (point, i) {  
-					// Fade in other points			  
-					var verb = i === (level && level.pointIndex) ? 'show' : 'fadeIn',
-						inherit = verb === 'show' ? true : undefined;
-					point.graphic[verb](inherit);
-					if (point.dataLabel) {
-						point.dataLabel[verb](inherit);
-					}
-					if (point.connector) {
-						point.connector[verb](inherit);
-					}
-				});
+				if (newSeries.points) { // May be destroyed in the meantime, #3389
+					each(newSeries.points, function (point, i) {  
+						// Fade in other points			  
+						var verb = i === (level && level.pointIndex) ? 'show' : 'fadeIn',
+							inherit = verb === 'show' ? true : undefined;
+						if (point.graphic) { // #3407
+							point.graphic[verb](inherit);
+						}
+						if (point.dataLabel) {
+							point.dataLabel[verb](inherit);
+						}
+						if (point.connector) {
+							point.connector[verb](inherit);
+						}
+					});
+				}
 			}, Math.max(this.chart.options.drilldown.animation.duration - 50, 0));
 
 			// Reset
@@ -360,23 +391,28 @@
 	ColumnSeries.prototype.animateDrilldown = function (init) {
 		var series = this,
 			drilldownLevels = this.chart.drilldownLevels,
-			animateFrom = this.chart.drilldownLevels[this.chart.drilldownLevels.length - 1].shapeArgs,
-			animationOptions = this.chart.options.drilldown.animation;
+			animateFrom,
+			animationOptions = this.chart.options.drilldown.animation,
+			xAxis = this.xAxis;
 			
 		if (!init) {
 			each(drilldownLevels, function (level) {
-				if (series.userOptions === level.lowerSeriesOptions) {
+				if (series.options._ddSeriesId === level.lowerSeriesOptions._ddSeriesId) {
 					animateFrom = level.shapeArgs;
+					animateFrom.fill = level.color;
 				}
 			});
 
-			animateFrom.x += (this.xAxis.oldPos - this.xAxis.pos);
-	
+			animateFrom.x += (pick(xAxis.oldPos, xAxis.pos) - xAxis.pos);
+
 			each(this.points, function (point) {
 				if (point.graphic) {
 					point.graphic
 						.attr(animateFrom)
-						.animate(point.shapeArgs, animationOptions);
+						.animate(
+							extend(point.shapeArgs, { fill: point.color }), 
+							animationOptions
+						);
 				}
 				if (point.dataLabel) {
 					point.dataLabel.fadeIn(animationOptions);
@@ -407,8 +443,6 @@
 		delete this.group;
 		each(this.points, function (point) {
 			var graphic = point.graphic,
-				startColor = H.Color(point.color).rgba,
-				endColor = H.Color(level.color).rgba,
 				complete = function () {
 					graphic.destroy();
 					if (group) {
@@ -421,18 +455,10 @@
 				delete point.graphic;
 
 				if (animationOptions) {
-					/*jslint unparam: true*/
-					graphic.animate(level.shapeArgs, H.merge(animationOptions, {
-						step: function (val, fx) {
-							if (fx.prop === 'start' && startColor.length === 4 && endColor.length === 4) {
-								this.attr({
-									fill: tweenColors(startColor, endColor, fx.pos)
-								});
-							}
-						},
-						complete: complete
-					}));
-					/*jslint unparam: false*/
+					graphic.animate(
+						extend(level.shapeArgs, { fill: level.color }),
+						H.merge(animationOptions, { complete: complete })
+					);
 				} else {
 					graphic.attr(level.shapeArgs);
 					complete();
@@ -453,28 +479,19 @@
 					animateFrom = level.shapeArgs,
 					start = animateFrom.start,
 					angle = animateFrom.end - start,
-					startAngle = angle / this.points.length,
-					startColor = H.Color(level.color).rgba;
+					startAngle = angle / this.points.length;
 
 				if (!init) {
 					each(this.points, function (point, i) {
-						var endColor = H.Color(point.color).rgba;
-
-						/*jslint unparam: true*/
 						point.graphic
 							.attr(H.merge(animateFrom, {
 								start: start + i * startAngle,
-								end: start + (i + 1) * startAngle
-							}))[animationOptions ? 'animate' : 'attr'](point.shapeArgs, H.merge(animationOptions, {
-								step: function (val, fx) {
-									if (fx.prop === 'start' && startColor.length === 4 && endColor.length === 4) {
-										this.attr({
-											fill: tweenColors(startColor, endColor, fx.pos)
-										});
-									}
-								}
-							}));
-						/*jslint unparam: false*/
+								end: start + (i + 1) * startAngle,
+								fill: level.color
+							}))[animationOptions ? 'animate' : 'attr'](
+								extend(point.shapeArgs, { fill: point.color }), 
+								animationOptions
+							);
 					});
 					this.animate = null;
 				}
@@ -482,7 +499,7 @@
 		});
 	}
 	
-	H.Point.prototype.doDrilldown = function (_holdRedraw) {
+	H.Point.prototype.doDrilldown = function (_holdRedraw, category) {
 		var series = this.series,
 			chart = series.chart,
 			drilldown = chart.options.drilldown,
@@ -500,7 +517,8 @@
 		// seriesOptions, and call addSeriesAsDrilldown async if necessary.
 		fireEvent(chart, 'drilldown', { 
 			point: this,
-			seriesOptions: seriesOptions
+			seriesOptions: seriesOptions,
+			category: category
 		});
 		
 		if (seriesOptions) {
@@ -510,7 +528,18 @@
 				chart.addSeriesAsDrilldown(this, seriesOptions);
 			}
 		}
+	};
 
+	/**
+	 * Drill down to a given category. This is the same as clicking on an axis label.
+	 */
+	H.Axis.prototype.drilldownCategory = function (x) {
+		each(this.ticks[x].label.ddPoints, function (point) {
+			if (point.series && point.series.visible && point.doDrilldown) { // #3197
+				point.doDrilldown(true, x);
+			}
+		});
+		this.chart.applyDrilldown();
 	};
 	
 	wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
@@ -543,12 +572,7 @@
 					.addClass('highcharts-drilldown-axis-label')
 					.css(chart.options.drilldown.activeAxisLabelStyle)
 					.on('click', function () {
-						each(tickLabel.ddPoints, function (point) {
-							if (point.doDrilldown) {
-								point.doDrilldown(true);
-							}
-						});
-						chart.applyDrilldown();
+						series.xAxis.drilldownCategory(x);
 					});
 				if (!tickLabel.ddPoints) {
 					tickLabel.ddPoints = [];