highcharts-rails 3.0.10 → 4.0.0

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

@@ -2,7 +2,7 @@
 // @compilation_level SIMPLE_OPTIMIZATIONS
 
 /**
- * @license Highcharts JS v3.0.10 (2014-03-10)
+ * @license Highcharts JS v4.0.0 (2014-04-22)
  *
  * (c) 2009-2014 Torstein Honsi
  *
@@ -30,7 +30,6 @@ var arrayMin = Highcharts.arrayMin,
 	Tick = Highcharts.Tick,
 	Point = Highcharts.Point,
 	Pointer = Highcharts.Pointer,
-	TrackerMixin = Highcharts.TrackerMixin,
 	CenteredSeriesMixin = Highcharts.CenteredSeriesMixin,
 	Series = Highcharts.Series,
 	math = Math,
@@ -323,14 +322,9 @@ var radialAxisMixin = {
 	 * from center
 	 */
 	getPosition: function (value, length) {
-		if (!this.isCircular) {
-			length = this.translate(value);
-			value = this.min;	
-		}
-		
 		return this.postTranslate(
-			this.translate(value),
-			pick(length, this.center[2] / 2) - this.offset
+			this.isCircular ? this.translate(value) : 0, // #2848
+			pick(this.isCircular ? length : this.translate(value), this.center[2] / 2) - this.offset
 		);		
 	},
 	
@@ -343,7 +337,7 @@ var radialAxisMixin = {
 			center = this.center;
 			
 		angle = this.startAngleRad + angle;
-		
+
 		return {
 			x: chart.plotLeft + center[0] + Math.cos(angle) * radius,
 			y: chart.plotTop + center[1] + Math.sin(angle) * radius
@@ -444,7 +438,12 @@ var radialAxisMixin = {
 			}
 		// Concentric polygons 
 		} else {
-			xAxis = chart.xAxis[0];
+			// Find the X axis in the same pane
+			each(chart.xAxis, function (a) {
+				if (a.pane === axis.pane) {
+					xAxis = a;
+				}
+			});
 			ret = [];
 			value = axis.translate(value);
 			tickPositions = xAxis.tickPositions;
@@ -577,7 +576,7 @@ wrap(tickProto, 'getLabelPosition', function (proceed, x, y, label, horiz, label
 		ret,
 		align = labelOptions.align,
 		angle = ((axis.translate(this.pos) + axis.startAngleRad + Math.PI / 2) / Math.PI * 180) % 360;
-	
+
 	if (axis.isRadial) {
 		ret = axis.getPosition(this.pos, (axis.center[2] / 2) + pick(labelOptions.distance, -25));
 		
@@ -654,7 +653,7 @@ defaultPlotOptions.arearange = merge(defaultPlotOptions.area, {
 	marker: null,
 	threshold: null,
 	tooltip: {
-		pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.low}</b> - <b>{point.high}</b><br/>' 
+		pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.low}</b> - <b>{point.high}</b><br/>' // docs
 	},
 	trackByArea: true,
 	dataLabels: {
@@ -663,6 +662,11 @@ defaultPlotOptions.arearange = merge(defaultPlotOptions.area, {
 		xHigh: 0,
 		yLow: 0,
 		yHigh: 0	
+	},
+	states: {
+		hover: {
+			halo: false
+		}
 	}
 });
 
@@ -909,6 +913,7 @@ seriesTypes.areasplinerange = extendClass(seriesTypes.arearange, {
 					height,
 					y;
 
+				point.tooltipPos = null; // don't inherit from column
 				point.plotHigh = plotHigh = yAxis.translate(point.high, 0, 1, 0, 1);
 				point.plotLow = point.plotY;
 
@@ -947,6 +952,7 @@ seriesTypes.areasplinerange = extendClass(seriesTypes.arearange, {
 defaultPlotOptions.gauge = merge(defaultPlotOptions.line, {
 	dataLabels: {
 		enabled: true,
+		defer: false,
 		y: 15,
 		borderWidth: 1,
 		borderColor: 'silver',
@@ -1169,8 +1175,7 @@ var GaugeSeries = {
 		if (pick(redraw, true)) {
 			this.chart.redraw();
 		}
-	},
-	drawTracker: TrackerMixin.drawTrackerPoint
+	}
 };
 seriesTypes.gauge = extendClass(seriesTypes.line, GaugeSeries);
 
@@ -1194,7 +1199,7 @@ defaultPlotOptions.boxplot = merge(defaultPlotOptions.column, {
 	//stemWidth: null,
 	threshold: null,
 	tooltip: {
-		pointFormat: '<span style="color:{series.color};font-weight:bold">{series.name}</span><br/>' +
+		pointFormat: '<span style="color:{series.color}">\u25CF</span> <b> {series.name}</b><br/>' + // docs
 			'Maximum: {point.high}<br/>' +
 			'Upper quartile: {point.q3}<br/>' +
 			'Median: {point.median}<br/>' +
@@ -1338,8 +1343,7 @@ seriesTypes.boxplot = extendClass(seriesTypes.column, {
 					'M',
 					crispX, q1Plot,
 					'L',
-					crispX, lowPlot,
-					'z'
+					crispX, lowPlot
 				];
 				
 				// The box
@@ -1398,8 +1402,7 @@ seriesTypes.boxplot = extendClass(seriesTypes.column, {
 					medianPlot,
 					'L',
 					right, 
-					medianPlot,
-					'z'
+					medianPlot
 				];
 				
 				// Create or update the graphics
@@ -1457,7 +1460,7 @@ defaultPlotOptions.errorbar = merge(defaultPlotOptions.boxplot, {
 	grouping: false,
 	linkedTo: ':previous',
 	tooltip: {
-		pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.low}</b> - <b>{point.high}</b><br/>' 
+		pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.low}</b> - <b>{point.high}</b><br/>'
 	},
 	whiskerWidth: null
 });
@@ -1536,8 +1539,7 @@ seriesTypes.waterfall = extendClass(seriesTypes.column, {
 			y,
 			previousY,
 			stackPoint,
-			threshold = options.threshold,
-			crispCorr = (options.borderWidth % 2) / 2;
+			threshold = options.threshold;
 
 		// run column series translate
 		seriesTypes.column.prototype.translate.apply(this);
@@ -1552,7 +1554,7 @@ seriesTypes.waterfall = extendClass(seriesTypes.column, {
 
 			// get current stack
 			stack = series.getStack(i);
-			stackPoint = stack.points[series.index];
+			stackPoint = stack.points[series.index + ',' + i];
 
 			// override point value for sums
 			if (isNaN(point.y)) {
@@ -1580,7 +1582,7 @@ seriesTypes.waterfall = extendClass(seriesTypes.column, {
 				shapeArgs.height *= -1;
 			}
 
-			point.plotY = shapeArgs.y = mathRound(shapeArgs.y) - crispCorr;
+			point.plotY = shapeArgs.y = mathRound(shapeArgs.y) - (series.borderWidth % 2) / 2;
 			shapeArgs.height = mathRound(shapeArgs.height);
 			point.yBottom = shapeArgs.y + shapeArgs.height;
 		}
@@ -1676,7 +1678,7 @@ seriesTypes.waterfall = extendClass(seriesTypes.column, {
 
 		var data = this.data,
 			length = data.length,
-			lineWidth = this.options.lineWidth + this.options.borderWidth,
+			lineWidth = this.options.lineWidth + this.borderWidth,
 			normalizer = mathRound(lineWidth) % 2 / 2,
 			path = [],
 			M = 'M',
@@ -1741,6 +1743,7 @@ seriesTypes.waterfall = extendClass(seriesTypes.column, {
 // 1 - set default options
 defaultPlotOptions.bubble = merge(defaultPlotOptions.scatter, {
 	dataLabels: {
+		format: '{point.z}', // docs?
 		inside: true,
 		style: {
 			color: 'white',
@@ -1758,6 +1761,13 @@ defaultPlotOptions.bubble = merge(defaultPlotOptions.scatter, {
 	maxSize: '20%',
 	// negativeColor: null,
 	// sizeBy: 'area'
+	states: {
+		hover: {
+			halo: {
+				size: 5 // docs
+			}
+		}
+	},
 	tooltip: {
 		pointFormat: '({point.x}, {point.y}), Size: {point.z}'
 	},
@@ -1765,9 +1775,16 @@ defaultPlotOptions.bubble = merge(defaultPlotOptions.scatter, {
 	zThreshold: 0
 });
 
+var BubblePoint = extendClass(Point, {
+	haloPath: function () {
+		return Point.prototype.haloPath.call(this, this.shapeArgs.r + this.series.options.states.hover.halo.size);
+	}
+});
+
 // 2 - Create the series object
 seriesTypes.bubble = extendClass(seriesTypes.scatter, {
 	type: 'bubble',
+	pointClass: BubblePoint,
 	pointArrayMap: ['y', 'z'],
 	parallelArrays: ['x', 'y', 'z'],
 	trackerGroups: ['group', 'dataLabelsGroup'],
@@ -2309,7 +2326,7 @@ Axis.prototype.beforePadding = function () {
 					
 					group.attr(attribs);
 					if (markerGroup) {
-						markerGroup.attrSetters = group.attrSetters;
+						//markerGroup.attrSetters = group.attrSetters;
 						markerGroup.attr(attribs);
 					}
 				
@@ -2406,7 +2423,10 @@ Axis.prototype.beforePadding = function () {
 							}
 						)
 					};
-					this.toXY(point); // provide correct plotX, plotY for tooltip
+					// Provide correct plotX, plotY for tooltip
+					this.toXY(point); 
+					point.tooltipPos = [point.plotX, point.plotY];
+					point.ttBelow = point.plotY > center[1];
 				}
 			}
 		});

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

@@ -2908,7 +2908,7 @@ if (CanvasRenderingContext2D) {
 		});
 	}
 }/**
- * @license Highcharts JS v3.0.10 (2014-03-10)
+ * @license Highcharts JS v4.0.0 (2014-04-22)
  * CanVGRenderer Extension module
  *
  * (c) 2011-2012 Torstein Honsi, Erik Olsson

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

@@ -583,10 +583,14 @@
 				complete: function (dataOptions) {
 					
 					// Merge series configs
-					if (userOptions.series) {
-						each(userOptions.series, function (series, i) {
-							userOptions.series[i] = Highcharts.merge(series, dataOptions.series[i]);
-						});
+					if (userOptions.hasOwnProperty('series')) {
+						if (typeof userOptions.series === 'object') {
+							each(userOptions.series, function (series, i) {
+								userOptions.series[i] = Highcharts.merge(series, dataOptions.series[i]);
+							});
+						} else { // Allow merging in dataOptions.series (#2856)
+							delete userOptions.series;
+						}
 					}
 
 					// Do the merge

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

@@ -108,7 +108,7 @@
 
 		// Record options for all current series
 		each(oldSeries.chart.series, function (series) {
-			if (series.xAxis === xAxis && series.yAxis === yAxis) {
+			if (series.xAxis === xAxis) {
 				levelSeries.push(series);
 				levelSeriesOptions.push(series.userOptions);
 				series.levelNumber = series.levelNumber || 0;
@@ -223,13 +223,15 @@
 			drilldownLevels = chart.drilldownLevels,
 			levelNumber = drilldownLevels[drilldownLevels.length - 1].levelNumber,
 			i = drilldownLevels.length,
+			chartSeries = chart.series,
+			seriesI = chartSeries.length,
 			level,
 			oldSeries,
 			newSeries,
 			oldExtremes,
 			addSeries = function (seriesOptions) {
 				var addedSeries;
-				each(chart.series, function (series) {
+				each(chartSeries, function (series) {
 					if (series.userOptions === seriesOptions) {
 						addedSeries = series;
 					}
@@ -250,7 +252,16 @@
 			if (level.levelNumber === levelNumber) {
 				drilldownLevels.pop();
 				
+				// Get the lower series by reference or id
 				oldSeries = level.lowerSeries;
+				if (!oldSeries.chart) {  // #2786
+					while (seriesI--) {
+						if (chartSeries[seriesI].options.id === level.lowerSeriesOptions.id) {
+							oldSeries = chartSeries[seriesI];
+							break;
+						}
+					}
+				}
 
 				each(level.levelSeriesOptions, addSeries);
 				
@@ -258,12 +269,13 @@
 
 				if (newSeries.type === oldSeries.type) {
 					newSeries.drilldownLevel = level;
-					newSeries.options.animation = true;
+					newSeries.options.animation = chart.options.drilldown.animation;
 
 					if (oldSeries.animateDrillupFrom) {
 						oldSeries.animateDrillupFrom(level);
 					}
 				}
+				newSeries.levelNumber = levelNumber;
 				
 				oldSeries.remove(false);
 
@@ -369,35 +381,50 @@
 	 */
 	ColumnSeries.prototype.animateDrillupFrom = function (level) {
 		var animationOptions = this.chart.options.drilldown.animation,
-			group = this.group;
+			group = this.group,
+			series = this;
+
+		// Cancel mouse events on the series group (#2787)
+		each(series.trackerGroups, function (key) {
+			if (series[key]) { // we don't always have dataLabelsGroup
+				series[key].on('mouseover');
+			}
+		});
+			
 
 		delete this.group;
 		each(this.points, function (point) {
 			var graphic = point.graphic,
-				startColor = H.Color(point.color).rgba;
+				startColor = H.Color(point.color).rgba,
+				endColor = H.Color(level.color).rgba,
+				complete = function () {
+					graphic.destroy();
+					if (group) {
+						group = group.destroy();
+					}
+				};
 
 			if (graphic) {
 			
 				delete point.graphic;
 
-				/*jslint unparam: true*/
-				graphic.animate(level.shapeArgs, H.merge(animationOptions, {
-
-					step: function (val, fx) {
-						if (fx.prop === 'start') {
-							this.attr({
-								fill: tweenColors(startColor, H.Color(level.color).rgba, fx.pos)
-							});
-						}
-					},
-					complete: function () {
-						graphic.destroy();
-						if (group) {
-							group = group.destroy();
-						}
-					}
-				}));
-				/*jslint unparam: false*/
+				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*/
+				} else {
+					graphic.attr(level.shapeArgs);
+					complete();
+				}
 			}
 		});
 	};
@@ -426,10 +453,9 @@
 							.attr(H.merge(animateFrom, {
 								start: start + i * startAngle,
 								end: start + (i + 1) * startAngle
-							}))
-							.animate(point.shapeArgs, H.merge(animationOptions, {
+							}))[animationOptions ? 'animate' : 'attr'](point.shapeArgs, H.merge(animationOptions, {
 								step: function (val, fx) {
-									if (fx.prop === 'start') {
+									if (fx.prop === 'start' && startColor.length === 4 && endColor.length === 4) {
 										this.attr({
 											fill: tweenColors(startColor, endColor, fx.pos)
 										});

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

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v3.0.10 (2014-03-10)
+ * @license Highcharts JS v4.0.0 (2014-04-22)
  * Exporting module
  *
  * (c) 2010-2014 Torstein Honsi

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

@@ -22,6 +22,7 @@ var defaultOptions = Highcharts.getOptions(),
 
 // set default options
 defaultPlotOptions.funnel = merge(defaultPlotOptions.pie, {
+	animation: false,
 	center: ['50%', '50%'],
 	width: '90%',
 	neckWidth: '30%',

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

@@ -1,60 +1,606 @@
-(function (H) {
-	var seriesTypes = H.seriesTypes,
-		each = H.each;
+/**
+ * @license Highcharts JS v4.0.0 (2014-04-22)
+ *
+ * (c) 2011-2014 Torstein Honsi
+ *
+ * License: www.highcharts.com/license
+ */
+
+/*global HighchartsAdapter*/
+(function (Highcharts) {
+
+
+var UNDEFINED,
+	Axis = Highcharts.Axis,
+	Chart = Highcharts.Chart,
+	Color = Highcharts.Color,
+	Legend = Highcharts.Legend,
+	LegendSymbolMixin = Highcharts.LegendSymbolMixin,
+	Series = Highcharts.Series,
 	
-	seriesTypes.heatmap = H.extendClass(seriesTypes.map, {
-		useMapGeometry: false,
-		pointArrayMap: ['y', 'value'],
-		init: function () {
-			seriesTypes.map.prototype.init.apply(this, arguments);
-			this.pointRange = this.options.colsize || 1;
-			// TODO: similar logic for the Y axis
-		},
-		translate: function () {
-			var series = this,
-				options = series.options,
-				xAxis = series.xAxis,
-				yAxis = series.yAxis;
+	defaultOptions = Highcharts.getOptions(),
+	each = Highcharts.each,
+	extend = Highcharts.extend,
+	extendClass = Highcharts.extendClass,
+	merge = Highcharts.merge,
+	pick = Highcharts.pick,
+	numberFormat = Highcharts.numberFormat,
+	seriesTypes = Highcharts.seriesTypes,
+	wrap = Highcharts.wrap,
+	noop = function () {};
 
-			series.generatePoints();
 	
-			each(series.points, function (point) {
-				var xPad = (options.colsize || 1) / 2,
-					yPad = (options.rowsize || 1) / 2,
-					x1 = Math.round(xAxis.len - xAxis.translate(point.x - xPad, 0, 1, 0, 1)),
-					x2 = Math.round(xAxis.len - xAxis.translate(point.x + xPad, 0, 1, 0, 1)),
-					y1 = Math.round(yAxis.translate(point.y - yPad, 0, 1, 0, 1)),
-					y2 = Math.round(yAxis.translate(point.y + yPad, 0, 1, 0, 1));
-
-
-				point.plotY = 1; // Pass test in Column.drawPoints
-
-				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.pointRange = options.colsize || 1;
-			series.translateColors();
+
+
+/**
+ * The ColorAxis object for inclusion in gradient legends
+ */
+var ColorAxis = Highcharts.ColorAxis = function () {
+	this.isColorAxis = true;
+	this.init.apply(this, arguments);
+};
+extend(ColorAxis.prototype, Axis.prototype);
+extend(ColorAxis.prototype, {
+	defaultColorAxisOptions: {
+		lineWidth: 0,
+		gridLineWidth: 1,
+		tickPixelInterval: 72,
+		startOnTick: true,
+		endOnTick: true,
+		offset: 0,
+		marker: { // docs: use another name?
+			animation: {
+				duration: 50
+			},
+			color: 'gray',
+			width: 0.01
 		},
-		
-		animate: function () {},
-		getBox: function () {},
+		labels: {
+			overflow: 'justify'
+		},
+		minColor: '#EFEFFF',
+		maxColor: '#003875',
+		tickLength: 5
+	},
+	init: function (chart, userOptions) {
+		var horiz = chart.options.legend.layout !== 'vertical',
+			options;
+
+		// Build the options
+		options = merge(this.defaultColorAxisOptions, {
+			side: horiz ? 2 : 1,
+			reversed: !horiz
+		}, userOptions, {
+			isX: horiz,
+			opposite: !horiz,
+			showEmpty: false,
+			title: null,
+			isColor: true
+		});
+
+		Axis.prototype.init.call(this, chart, options);
 
-		getExtremes: function () {
-			// Get the extremes from the value data
-			H.Series.prototype.getExtremes.call(this, this.valueData);
-			this.valueMin = this.dataMin;
-			this.valueMax = this.dataMax;
+		// Base init() pushes it to the xAxis array, now pop it again
+		//chart[this.isXAxis ? 'xAxis' : 'yAxis'].pop();
 
-			// Get the extremes from the y data
-			H.Series.prototype.getExtremes.call(this);
+		// Prepare data classes
+		if (userOptions.dataClasses) {
+			this.initDataClasses(userOptions);
 		}
+		this.initStops(userOptions);
+
+		// Override original axis properties
+		this.isXAxis = true;
+		this.horiz = horiz;
+		this.zoomEnabled = false;
+	},
+
+	/*
+	 * Return an intermediate color between two colors, according to pos where 0
+	 * is the from color and 1 is the to color
+	 */
+	tweenColors: function (from, to, pos) {
+		// Check for has alpha, because rgba colors perform worse due to lack of
+		// support in WebKit.
+		var hasAlpha = (to.rgba[3] !== 1 || from.rgba[3] !== 1);
+		return (hasAlpha ? 'rgba(' : 'rgb(') + 
+			Math.round(to.rgba[0] + (from.rgba[0] - to.rgba[0]) * (1 - pos)) + ',' + 
+			Math.round(to.rgba[1] + (from.rgba[1] - to.rgba[1]) * (1 - pos)) + ',' + 
+			Math.round(to.rgba[2] + (from.rgba[2] - to.rgba[2]) * (1 - pos)) + 
+			(hasAlpha ? (',' + (to.rgba[3] + (from.rgba[3] - to.rgba[3]) * (1 - pos))) : '') + ')';
+		},
+
+	initDataClasses: function (userOptions) {
+		var axis = this,
+			chart = this.chart,
+			dataClasses,
+			colorCounter = 0,
+			options = this.options;
+		this.dataClasses = dataClasses = [];
+
+		each(userOptions.dataClasses, function (dataClass, i) {
+			var colors;
+
+			dataClass = merge(dataClass);
+			dataClasses.push(dataClass);
+			if (!dataClass.color) {
+				if (options.dataClassColor === 'category') {
+					colors = chart.options.colors;
+					dataClass.color = colors[colorCounter++];
+					// loop back to zero
+					if (colorCounter === colors.length) {
+						colorCounter = 0;
+					}
+				} else {
+					dataClass.color = axis.tweenColors(Color(options.minColor), Color(options.maxColor), i / (userOptions.dataClasses.length - 1));
+				}
+			}
+		});
+	},
+
+	initStops: function (userOptions) {
+		this.stops = userOptions.stops || [
+			[0, this.options.minColor],
+			[1, this.options.maxColor]
+		];
+		each(this.stops, function (stop) {
+			stop.color = Color(stop[1]);
+		});
+	},
+
+	/**
+	 * Extend the setOptions method to process extreme colors and color
+	 * stops.
+	 */
+	setOptions: function (userOptions) {
+		Axis.prototype.setOptions.call(this, userOptions);
+
+		this.options.crosshair = this.options.marker;
+		this.coll = 'colorAxis';
+	},
+
+	setAxisSize: function () {
+		var symbol = this.legendSymbol,
+			chart = this.chart,
+			x,
+			y,
+			width,
+			height;
+
+		if (symbol) {
+			this.left = x = symbol.attr('x');
+			this.top = y = symbol.attr('y');
+			this.width = width = symbol.attr('width');
+			this.height = height = symbol.attr('height');
+			this.right = chart.chartWidth - x - width;
+			this.bottom = chart.chartHeight - y - height;
+
+			this.len = this.horiz ? width : height;
+			this.pos = this.horiz ? x : y;
+		}
+	},
+
+	/** 
+	 * Translate from a value to a color
+	 */
+	toColor: function (value, point) {
+		var pos,
+			stops = this.stops,
+			from,
+			to,
+			color,
+			dataClasses = this.dataClasses,
+			dataClass,
+			i;
+
+		if (dataClasses) {
+			i = dataClasses.length;
+			while (i--) {
+				dataClass = dataClasses[i];
+				from = dataClass.from;
+				to = dataClass.to;
+				if ((from === UNDEFINED || value >= from) && (to === UNDEFINED || value <= to)) {
+					color = dataClass.color;
+					if (point) {
+						point.dataClass = i;
+					}
+					break;
+				}	
+			}
+
+		} else {
+
+			if (this.isLog) {
+				value = this.val2lin(value);
+			}
+			pos = 1 - ((this.max - value) / (this.max - this.min));
+			i = stops.length;
+			while (i--) {
+				if (pos > stops[i][0]) {
+					break;
+				}
+			}
+			from = stops[i] || stops[i + 1];
+			to = stops[i + 1] || from;
+
+			// The position within the gradient
+			pos = 1 - (to[0] - pos) / ((to[0] - from[0]) || 1);
+			
+			color = this.tweenColors(
+				from.color, 
+				to.color,
+				pos
+			);
+		}
+		return color;
+	},
+
+	getOffset: function () {
+		var group = this.legendGroup;
+		if (group) {
+
+			Axis.prototype.getOffset.call(this);
 			
-	});
+			if (!this.axisGroup.parentGroup) {
+
+				// Move the axis elements inside the legend group
+				this.axisGroup.add(group);
+				this.gridGroup.add(group);
+				this.labelGroup.add(group);
+
+				this.added = true;
+			}
+		}
+	},
+
+	/**
+	 * Create the color gradient
+	 */
+	setLegendColor: function () {
+		var grad,
+			horiz = this.horiz,
+			options = this.options;
+
+		grad = horiz ? [0, 0, 1, 0] : [0, 0, 0, 1]; 
+		this.legendColor = {
+			linearGradient: { x1: grad[0], y1: grad[1], x2: grad[2], y2: grad[3] },
+			stops: options.stops || [
+				[0, options.minColor],
+				[1, options.maxColor]
+			]
+		};
+	},
+
+	/**
+	 * The color axis appears inside the legend and has its own legend symbol
+	 */
+	drawLegendSymbol: function (legend, item) {
+		var padding = legend.padding,
+			legendOptions = legend.options,
+			horiz = this.horiz,
+			box,
+			width = pick(legendOptions.symbolWidth, horiz ? 200 : 12),
+			height = pick(legendOptions.symbolHeight, horiz ? 12 : 200),
+			labelPadding = pick(legendOptions.labelPadding, horiz ? 10 : 30);
+
+		this.setLegendColor();
+
+		// Create the gradient
+		item.legendSymbol = this.chart.renderer.rect(
+			0,
+			legend.baseline - 11,
+			width,
+			height
+		).attr({
+			zIndex: 1
+		}).add(item.legendGroup);
+		box = item.legendSymbol.getBBox();
+
+		// Set how much space this legend item takes up
+		this.legendItemWidth = width + padding + (horiz ? 0 : labelPadding);
+		this.legendItemHeight = height + padding + (horiz ? labelPadding : 0);
+	},
+	/**
+	 * Fool the legend
+	 */
+	setState: noop,
+	visible: true,
+	setVisible: noop,
+	getSeriesExtremes: function () {
+		var series;
+		if (this.series.length) {
+			series = this.series[0];
+			this.dataMin = series.valueMin;
+			this.dataMax = series.valueMax;
+		}
+	},
+	drawCrosshair: function (e, point) {
+		var newCross = !this.cross,
+			plotX = point && point.plotX,
+			plotY = point && point.plotY,
+			crossPos,
+			axisPos = this.pos,
+			axisLen = this.len;
+		
+		if (point) {
+			crossPos = this.toPixels(point.value);
+			if (crossPos < axisPos) {
+				crossPos = axisPos - 2;
+			} else if (crossPos > axisPos + axisLen) {
+				crossPos = axisPos + axisLen + 2;
+			}
+			
+			point.plotX = crossPos;
+			point.plotY = this.len - crossPos;
+			Axis.prototype.drawCrosshair.call(this, e, point);
+			point.plotX = plotX;
+			point.plotY = plotY;
+			
+			if (!newCross && this.cross) {
+				this.cross
+					.attr({
+						fill: this.crosshair.color
+					})
+					.add(this.labelGroup);
+			}
+		}
+	},
+	getPlotLinePath: function (a, b, c, d, pos) {
+		if (pos) { // crosshairs only
+			return this.horiz ? 
+				['M', pos - 4, this.top - 6, 'L', pos + 4, this.top - 6, pos, this.top, 'Z'] : 
+				['M', this.left, pos, 'L', this.left - 6, pos + 6, this.left - 6, pos - 6, 'Z'];
+		} else {
+			return Axis.prototype.getPlotLinePath.call(this, a, b, c, d);
+		}
+	},
+
+	update: function (newOptions, redraw) {
+		each(this.series, function (series) {
+			series.isDirtyData = true; // Needed for Axis.update when choropleth colors change
+		});
+		Axis.prototype.update.call(this, newOptions, redraw);
+		if (this.legendItem) {
+			this.setLegendColor();
+			this.chart.legend.colorizeItem(this, true);
+		}
+	},
+
+	/**
+	 * Get the legend item symbols for data classes
+	 */
+	getDataClassLegendSymbols: function () {
+		var axis = this,
+			chart = this.chart,
+			legendItems = [],
+			legendOptions = chart.options.legend,
+			valueDecimals = legendOptions.valueDecimals,
+			valueSuffix = legendOptions.valueSuffix || '',
+			name;
+
+		each(this.dataClasses, function (dataClass, i) {
+			var vis = true,
+				from = dataClass.from,
+				to = dataClass.to;
+			
+			// Assemble the default name. This can be overridden by legend.options.labelFormatter
+			name = '';
+			if (from === UNDEFINED) {
+				name = '< ';
+			} else if (to === UNDEFINED) {
+				name = '> ';
+			}
+			if (from !== UNDEFINED) {
+				name += numberFormat(from, valueDecimals) + valueSuffix;
+			}
+			if (from !== UNDEFINED && to !== UNDEFINED) {
+				name += ' - ';
+			}
+			if (to !== UNDEFINED) {
+				name += numberFormat(to, valueDecimals) + valueSuffix;
+			}
+			
+			// Add a mock object to the legend items
+			legendItems.push(extend({
+				chart: chart,
+				name: name,
+				options: {},
+				drawLegendSymbol: LegendSymbolMixin.drawRectangle,
+				visible: true,
+				setState: noop,
+				setVisible: function () {
+					vis = this.visible = !vis;
+					each(axis.series, function (series) {
+						each(series.points, function (point) {
+							if (point.dataClass === i) {
+								point.setVisible(vis);
+							}
+						});
+					});
+					
+					chart.legend.colorizeItem(this, vis);
+				}
+			}, dataClass));
+		});
+		return legendItems;
+	},
+	name: '' // Prevents 'undefined' in legend in IE8
+});
+
+
+
+/**
+ * Extend the chart getAxes method to also get the color axis
+ */
+wrap(Chart.prototype, 'getAxes', function (proceed) {
+
+	var options = this.options,
+		colorAxisOptions = options.colorAxis;
+
+	proceed.call(this);
+
+	this.colorAxis = [];
+	if (colorAxisOptions) {
+		proceed = new ColorAxis(this, colorAxisOptions); // Fake assignment for jsLint
+	}
+});
+
+
+/**
+ * Wrap the legend getAllItems method to add the color axis. This also removes the 
+ * axis' own series to prevent them from showing up individually.
+ */
+wrap(Legend.prototype, 'getAllItems', function (proceed) {
+	var allItems = [],
+		colorAxis = this.chart.colorAxis[0];
+
+	if (colorAxis) {
+
+		// Data classes
+		if (colorAxis.options.dataClasses) {
+			allItems = allItems.concat(colorAxis.getDataClassLegendSymbols());
+		// Gradient legend
+		} else {
+			// Add this axis on top
+			allItems.push(colorAxis);
+		}
+
+		// Don't add the color axis' series
+		each(colorAxis.series, function (series) {
+			series.options.showInLegend = false;
+		});
+	}
+
+	return allItems.concat(proceed.call(this));
+});/**
+ * Mixin for maps and heatmaps
+ */
+var colorSeriesMixin = {
+
+	pointAttrToOptions: { // mapping between SVG attributes and the corresponding options
+		stroke: 'borderColor',
+		'stroke-width': 'borderWidth',
+		fill: 'color',
+		dashstyle: 'dashStyle'
+	},
+	pointArrayMap: ['value'],
+	axisTypes: ['xAxis', 'yAxis', 'colorAxis'],
+	optionalAxis: 'colorAxis',
+	trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
+	getSymbol: noop,
+	parallelArrays: ['x', 'y', 'value'],
 	
+	/**
+	 * In choropleth maps, the color is a result of the value, so this needs translation too
+	 */
+	translateColors: function () {
+		var series = this,
+			nullColor = this.options.nullColor,
+			colorAxis = this.colorAxis;
+
+		each(this.data, function (point) {
+			var value = point.value,
+				color;
+
+			color = value === null ? nullColor : colorAxis ? colorAxis.toColor(value, point) : (point.color) || series.color;
+
+			if (color) {
+				point.color = color;
+			}
+		});
+	}
+};
+/**
+ * Extend the default options with map options
+ */
+defaultOptions.plotOptions.heatmap = merge(defaultOptions.plotOptions.scatter, {
+	animation: false,
+	borderWidth: 0,
+	nullColor: '#F8F8F8',
+	dataLabels: {
+		format: '{point.value}',
+		verticalAlign: 'middle',
+		crop: false,
+		overflow: false,
+		style: {
+			color: 'white',
+			fontWeight: 'bold',
+			textShadow: '0 0 5px black'
+		}
+	},
+	marker: null,
+	tooltip: {
+		pointFormat: '{point.x}, {point.y}: {point.value}<br/>'
+	},
+	states: {
+		normal: {
+			animation: true
+		},
+		hover: {
+			brightness: 0.2
+		}
+	}
+});
+
+// The Heatmap series type
+seriesTypes.heatmap = extendClass(seriesTypes.scatter, merge(colorSeriesMixin, {
+	type: 'heatmap',
+	pointArrayMap: ['y', 'value'],
+	hasPointSpecificOptions: true,
+	supportsDrilldown: true,
+	getExtremesFromAll: true,
+	init: function () {
+		seriesTypes.scatter.prototype.init.apply(this, arguments);
+		this.pointRange = this.options.colsize || 1;
+		this.yAxis.axisPointRange = this.options.rowsize || 1; // general point range
+	},
+	translate: function () {
+		var series = this,
+			options = series.options,
+			xAxis = series.xAxis,
+			yAxis = series.yAxis;
+
+		series.generatePoints();
+
+		each(series.points, function (point) {
+			var xPad = (options.colsize || 1) / 2,
+				yPad = (options.rowsize || 1) / 2,
+				x1 = Math.round(xAxis.len - xAxis.translate(point.x - xPad, 0, 1, 0, 1)),
+				x2 = Math.round(xAxis.len - xAxis.translate(point.x + xPad, 0, 1, 0, 1)),
+				y1 = Math.round(yAxis.translate(point.y - yPad, 0, 1, 0, 1)),
+				y2 = Math.round(yAxis.translate(point.y + yPad, 0, 1, 0, 1));
+
+			// Set plotX and plotY for use in K-D-Tree and more
+			point.plotX = (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();
+	},
+	drawPoints: seriesTypes.column.prototype.drawPoints,
+	animate: noop,
+	getBox: noop,
+	drawLegendSymbol: LegendSymbolMixin.drawRectangle,
+
+	getExtremes: function () {
+		// Get the extremes from the value data
+		Series.prototype.getExtremes.call(this, this.valueData);
+		this.valueMin = this.dataMin;
+		this.valueMax = this.dataMax;
+
+		// Get the extremes from the y data
+		Series.prototype.getExtremes.call(this);
+	}
+		
+}));
+
+
 }(Highcharts));