highcharts-js-rails 0.2.1 → 1.0.0

data/vendor/assets/javascripts/highcharts/adapters/mootools.js

@@ -1,8 +1,8 @@
 /**
- * @license Highcharts JS v2.3.5 (2012-12-19)
+ * @license Highcharts JS v3.0.1 (2013-04-09)
  * MooTools adapter
  *
- * (c) 2010-2011 Torstein Hønsi
+ * (c) 2010-2013 Torstein Hønsi
  *
  * License: www.highcharts.com/license
  */
@@ -190,36 +190,11 @@ win.HighchartsAdapter = {
 		return arr.indexOf(item, from);
 	},
 
-	/**
-	 * Deep merge two objects and return a third
-	 */
-	merge: function () {
-		var args = arguments,
-			args13 = [{}], // MooTools 1.3+
-			i = args.length,
-			ret;
-
-		if (legacy) {
-			ret = $merge.apply(null, args);
-		} else {
-			while (i--) {
-				// Boolean argumens should not be merged.
-				// JQuery explicitly skips this, so we do it here as well.
-				if (typeof args[i] !== 'boolean') {
-					args13[i + 1] = args[i];
-				}
-			}
-			ret = Object.merge.apply(Object, args13);
-		}
-
-		return ret;
-	},
-
 	/**
 	 * Get the offset of an element relative to the top left corner of the web page
 	 */
 	offset: function (el) {
-		var offsets = $(el).getOffsets();
+		var offsets = el.getPosition(); // #1496
 		return {
 			left: offsets.x,
 			top: offsets.y
@@ -291,6 +266,12 @@ win.HighchartsAdapter = {
 		// create an event object that keeps all functions
 		event = legacyEvent ? new Event(eventArgs) : new DOMEvent(eventArgs);
 		event = $extend(event, eventArguments);
+
+		// When running an event on the Chart.prototype, MooTools nests the target in event.event
+		if (!event.target && event.event) {
+			event.target = event.event.target;
+		}
+
 		// override the preventDefault function to be able to use
 		// this for custom events
 		event.preventDefault = function () {
@@ -309,10 +290,14 @@ win.HighchartsAdapter = {
 	},
 	
 	/**
-	 * Set back e.pageX and e.pageY that MooTools has abstracted away
+	 * Set back e.pageX and e.pageY that MooTools has abstracted away. #1165, #1346.
 	 */
 	washMouseEvent: function (e) {
-		return e.event || e;
+		if (e.page) {
+			e.pageX = e.page.x;
+			e.pageY = e.page.y;
+		}
+		return e;
 	},
 
 	/**

data/vendor/assets/javascripts/highcharts/adapters/prototype.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v2.3.5 (2012-12-19)
+ * @license Highcharts JS v3.0.1 (2013-04-09)
  * Prototype adapter
  *
  * @author Michael Nelson, Torstein Hønsi.
@@ -83,7 +83,10 @@ return {
 					}
 
 					if (element.attr) { // SVGElement
-						element.attr(this.options.attribute, position);
+						
+						if (element.element) { // If not, it has been destroyed (#1405)
+							element.attr(this.options.attribute, position);
+						}
 					
 					} else { // HTML, #409
 						obj = {};
@@ -95,7 +98,9 @@ return {
 				finish: function () {
 					// Delete the property that holds this animation now that it is finished.
 					// Both canceled animations and complete ones gets a 'finish' call.
-					delete this.element._highchart_animation[this.key];
+					if (this.element && this.element._highchart_animation) { // #1405
+						delete this.element._highchart_animation[this.key];
+					}
 				}
 			});
 		}
@@ -261,82 +266,6 @@ return {
 		return arr.map(fn);
 	},
 
-	// deep merge. merge({a : 'a', b : {b1 : 'b1', b2 : 'b2'}}, {b : {b2 : 'b2_prime'}, c : 'c'}) => {a : 'a', b : {b1 : 'b1', b2 : 'b2_prime'}, c : 'c'}
-	/*merge: function(){
-		function doCopy(copy, original) {
-			var value,
-				key,
-				undef,
-				nil,
-				same,
-				obj,
-				arr,
-				node;
-
-			for (key in original) {
-				value = original[key];
-				undef = typeof(value) === 'undefined';
-				nil = value === null;
-				same = original === copy[key];
-
-				if (undef || nil || same) {
-					continue;
-				}
-
-				obj = typeof(value) === 'object';
-				arr = value && obj && value.constructor == Array;
-				node = !!value.nodeType;
-
-				if (obj && !arr && !node) {
-					copy[key] = doCopy(typeof copy[key] == 'object' ? copy[key] : {}, value);
-				}
-				else {
-					copy[key] = original[key];
-				}
-			}
-			return copy;
-		}
-
-		var args = arguments, retVal = {};
-
-		for (var i = 0; i < args.length; i++) {
-			retVal = doCopy(retVal, args[i]);
-		}
-
-		return retVal;
-	},*/
-	merge: function () { // the built-in prototype merge function doesn't do deep copy
-		function doCopy(copy, original) {
-			var value, key;
-
-			for (key in original) {
-				value = original[key];
-				if (value && typeof value === 'object' && value.constructor !== Array &&
-						typeof value.nodeType !== 'number') {
-					copy[key] = doCopy(copy[key] || {}, value); // copy
-
-				} else {
-					copy[key] = original[key];
-				}
-			}
-			return copy;
-		}
-
-		function merge() {
-			var args = arguments,
-				i,
-				retVal = {};
-
-			for (i = 0; i < args.length; i++) {
-				retVal = doCopy(retVal, args[i]);
-
-			}
-			return retVal;
-		}
-
-		return merge.apply(this, arguments);
-	},
-
 	// extend an object to handle highchart events (highchart objects, not svg elements).
 	// this is a very simple way of handling events but whatever, it works (i think)
 	_extend: function (object) {
@@ -360,6 +289,7 @@ return {
 					}
 				},
 				_highcharts_fire: function (name, args) {
+					var target = this;
 					(this._highchart_events[name] || []).each(function (fn) {
 						// args is never null here
 						if (args.stopped) {
@@ -370,6 +300,7 @@ return {
 						args.preventDefault = function () {
 							args.defaultPrevented = true;
 						};
+						args.target = target;
 
 						// If the event handler return false, prevent the default handler from executing
 						if (fn.bind(this)(args) === false) {

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

@@ -2908,7 +2908,7 @@ if (CanvasRenderingContext2D) {
 		});
 	}
 }/**
- * @license Highcharts JS v2.3.5 (2012-12-19)
+ * @license Highcharts JS v3.0.1 (2013-04-09)
  * CanVGRenderer Extension module
  *
  * (c) 2011-2012 Torstein Hønsi, Erik Olsson

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

@@ -1,7 +1,8 @@
 /**
- * @license Data plugin for Highcharts v0.1
+ * @license Data plugin for Highcharts
  *
- * (c) 2012 Torstein Hønsi
+ * (c) 2012-2013 Torstein Hønsi
+ * Last revision 2012-11-27
  *
  * License: www.highcharts.com/license
  */
@@ -44,14 +45,14 @@
  * A Google Spreadsheet key. See https://developers.google.com/gdata/samples/spreadsheet_sample
  * for general information on GS.
  *
- * - googleSpreadsheetKey : String 
+ * - googleSpreadsheetWorksheet : String 
  * The Google Spreadsheet worksheet. The available id's can be read from 
  * https://spreadsheets.google.com/feeds/worksheets/{key}/public/basic
  *
- * - itemDilimiter : String
+ * - itemDelimiter : String
  * Item or cell delimiter for parsing CSV. Defaults to ",".
  *
- * - lineDilimiter : String
+ * - lineDelimiter : String
  * Line delimiter for parsing CSV. Defaults to "\n".
  *
  * - parsed : Function
@@ -76,7 +77,9 @@
  * endRow, startColumn and endColumn to delimit what part of the table is used.
  */
 
+// JSLint options:
 /*global jQuery */
+
 (function (Highcharts) {	
 	
 	// Utilities
@@ -118,7 +121,6 @@
 	},
 
 	dataFound: function () {
-		
 		// Interpret the values into right types
 		this.parseTypes();
 		
@@ -137,14 +139,16 @@
 	 * Parse a CSV input string
 	 */
 	parseCSV: function () {
-		var options = this.options,
+		var self = this,
+			options = this.options,
 			csv = options.csv,
 			columns = this.columns,
 			startRow = options.startRow || 0,
 			endRow = options.endRow || Number.MAX_VALUE,
 			startColumn = options.startColumn || 0,
 			endColumn = options.endColumn || Number.MAX_VALUE,
-			lines;
+			lines,
+			activeRowNo = 0;
 			
 		if (csv) {
 			
@@ -154,19 +158,26 @@
 				.split(options.lineDelimiter || "\n");
 			
 			each(lines, function (line, rowNo) {
-				if (rowNo >= startRow && rowNo <= endRow) {
-					var items = line.split(options.itemDelimiter || ',');
+				var trimmed = self.trim(line),
+					isComment = trimmed.indexOf('#') === 0,
+					isBlank = trimmed === '',
+					items;
+				
+				if (rowNo >= startRow && rowNo <= endRow && !isComment && !isBlank) {
+					items = line.split(options.itemDelimiter || ',');
 					each(items, function (item, colNo) {
 						if (colNo >= startColumn && colNo <= endColumn) {
 							if (!columns[colNo - startColumn]) {
 								columns[colNo - startColumn] = [];					
 							}
 							
-							columns[colNo - startColumn][rowNo - startRow] = item;
+							columns[colNo - startColumn][activeRowNo] = item;
 						}
 					});
+					activeRowNo += 1;
 				}
-			}); 
+			});
+
 			this.dataFound();
 		}
 	},
@@ -213,13 +224,18 @@
 	/**
 	 * TODO: 
 	 * - switchRowsAndColumns
-	 * - startRow, endRow etc.
 	 */
 	parseGoogleSpreadsheet: function () {
 		var self = this,
 			options = this.options,
 			googleSpreadsheetKey = options.googleSpreadsheetKey,
-			columns = this.columns;
+			columns = this.columns,
+			startRow = options.startRow || 0,
+			endRow = options.endRow || Number.MAX_VALUE,
+			startColumn = options.startColumn || 0,
+			endColumn = options.endColumn || Number.MAX_VALUE,
+			gr, // google row
+			gc; // google column
 
 		if (googleSpreadsheetKey) {
 			jQuery.getJSON('https://spreadsheets.google.com/feeds/cells/' + 
@@ -245,15 +261,28 @@
 			
 				// Set up arrays containing the column data
 				for (i = 0; i < colCount; i++) {
-					columns[i] = new Array(rowCount);
+					if (i >= startColumn && i <= endColumn) {
+						// Create new columns with the length of either end-start or rowCount
+						columns[i - startColumn] = [];
+
+						// Setting the length to avoid jslint warning
+						columns[i - startColumn].length = Math.min(rowCount, endRow - startRow);
+					}
 				}
 				
 				// Loop over the cells and assign the value to the right
 				// place in the column arrays
 				for (i = 0; i < cellCount; i++) {
 					cell = cells[i];
-					columns[cell.gs$cell.col - 1][cell.gs$cell.row - 1] = 
-						cell.content.$t;
+					gr = cell.gs$cell.row - 1; // rows start at 1
+					gc = cell.gs$cell.col - 1; // columns start at 1
+
+					// If both row and col falls inside start and end
+					// set the transposed cell value in the newly created columns
+					if (gc >= startColumn && gc <= endColumn &&
+						gr >= startRow && gr <= endRow) {
+						columns[gc - startColumn][gr - startRow] = cell.content.$t;
+					}
 				}
 				self.dataFound();
 			});
@@ -279,7 +308,6 @@
 	 * Trim a string from whitespace
 	 */
 	trim: function (str) {
-		//return typeof str === 'number' ? str : str.replace(/^\s+|\s+$/g, ''); // fails with spreadsheet
 		return typeof str === 'string' ? str.replace(/^\s+|\s+$/g, '') : str;
 	},
 	
@@ -302,6 +330,7 @@
 				val = columns[col][row];
 				floatVal = parseFloat(val);
 				trimVal = this.trim(val);
+
 				/*jslint eqeq: true*/
 				if (trimVal == floatVal) { // is numeric
 				/*jslint eqeq: false*/
@@ -322,7 +351,7 @@
 						columns[col].isDatetime = true;
 					
 					} else { // string
-						columns[col][row] = trimVal;
+						columns[col][row] = trimVal === '' ? null : trimVal;
 					}
 				}
 				
@@ -350,7 +379,7 @@
 			match;
 
 		if (parseDate) {
-			ret = parseDate;
+			ret = parseDate(val);
 		}
 			
 		if (typeof val === 'string') {
@@ -486,21 +515,17 @@
 		if (userOptions && userOptions.data) {
 			Highcharts.data(Highcharts.extend(userOptions.data, {
 				complete: function (dataOptions) {
-					var datasets = []; 
-					
-					// Don't merge the data arrays themselves
-					each(dataOptions.series, function (series, i) {
-						datasets[i] = series.data;
-						series.data = null;
-					});
 					
+					// Merge series configs
+					if (userOptions.series) {
+						each(userOptions.series, function (series, i) {
+							userOptions.series[i] = Highcharts.merge(series, dataOptions.series[i]);
+						});
+					}
+
 					// Do the merge
 					userOptions = Highcharts.merge(dataOptions, userOptions);
-					
-					// Re-insert the data
-					each(datasets, function (data, i) {
-						userOptions.series[i].data = data;
-					});
+
 					proceed.call(chart, userOptions, callback);
 				}
 			}));

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

@@ -1,8 +1,8 @@
 /**
- * @license Highcharts JS v2.3.5 (2012-12-19)
+ * @license Highcharts JS v3.0.1 (2013-04-09)
  * Exporting module
  *
- * (c) 2010-2011 Torstein Hønsi
+ * (c) 2010-2013 Torstein Hønsi
  *
  * License: www.highcharts.com/license
  */
@@ -37,16 +37,17 @@ var Chart = Highcharts.Chart,
 	PX = 'px',
 	UNDEFINED,
 	symbols = Highcharts.Renderer.prototype.symbols,
-	defaultOptions = Highcharts.getOptions();
+	defaultOptions = Highcharts.getOptions(),
+	buttonOffset;
 
 	// Add language
 	extend(defaultOptions.lang, {
+		printChart: 'Print chart',
 		downloadPNG: 'Download PNG image',
 		downloadJPEG: 'Download JPEG image',
 		downloadPDF: 'Download PDF document',
 		downloadSVG: 'Download SVG vector image',
-		exportButtonTitle: 'Export to raster or vector image',
-		printButtonTitle: 'Print the chart'
+		contextButtonTitle: 'Chart context menu'
 	});
 
 // Buttons and menus are collected in a separate config option set called 'navigation'.
@@ -54,10 +55,11 @@ var Chart = Highcharts.Chart,
 defaultOptions.navigation = {
 	menuStyle: {
 		border: '1px solid #A0A0A0',
-		background: '#FFFFFF'
+		background: '#FFFFFF',
+		padding: '5px 0'
 	},
 	menuItemStyle: {
-		padding: '0 5px',
+		padding: '0 10px',
 		background: NONE,
 		color: '#303030',
 		fontSize: isTouchDevice ? '14px' : '11px'
@@ -68,31 +70,22 @@ defaultOptions.navigation = {
 	},
 
 	buttonOptions: {
-		align: 'right',
-		backgroundColor: {
-			linearGradient: [0, 0, 0, 20],
-			stops: [
-				[0.4, '#F7F7F7'],
-				[0.6, '#E3E3E3']
-			]
-		},
-		borderColor: '#B0B0B0',
-		borderRadius: 3,
-		borderWidth: 1,
-		//enabled: true,
-		height: 20,
-		hoverBorderColor: '#909090',
-		hoverSymbolFill: '#81A7CF',
-		hoverSymbolStroke: '#4572A5',
 		symbolFill: '#E0E0E0',
-		//symbolSize: 12,
-		symbolStroke: '#A0A0A0',
-		//symbolStrokeWidth: 1,
-		symbolX: 11.5,
+		symbolSize: 14,
+		symbolStroke: '#666',
+		symbolStrokeWidth: 3,
+		symbolX: 12.5,
 		symbolY: 10.5,
+		align: 'right',
+		buttonSpacing: 3, 
+		height: 22,
+		// text: null,
+		theme: {
+			fill: 'white', // capture hover
+			stroke: 'none'
+		},
 		verticalAlign: 'top',
-		width: 24,
-		y: 10
+		width: 24
 	}
 };
 
@@ -104,17 +97,21 @@ defaultOptions.exporting = {
 	//filename: 'chart',
 	type: 'image/png',
 	url: 'http://export.highcharts.com/',
-	width: 800,
+	//width: undefined,
+	//scale: 2
 	buttons: {
-		exportButton: {
-			//enabled: true,
-			symbol: 'exportIcon',
-			x: -10,
-			symbolFill: '#A8BF77',
-			hoverSymbolFill: '#768F3E',
-			_id: 'exportButton',
-			_titleKey: 'exportButtonTitle',
+		contextButton: {
+			//x: -10,
+			symbol: 'menu',
+			_titleKey: 'contextButtonTitle',
 			menuItems: [{
+				textKey: 'printChart',
+				onclick: function () {
+					this.print();
+				}
+			}, {
+				separator: true
+			}, {
 				textKey: 'downloadPNG',
 				onclick: function () {
 					this.exportChart();
@@ -155,19 +152,6 @@ defaultOptions.exporting = {
 				}
 			} // */
 			]
-
-		},
-		printButton: {
-			//enabled: true,
-			symbol: 'printIcon',
-			x: -36,
-			symbolFill: '#B5C9DF',
-			hoverSymbolFill: '#779ABF',
-			_id: 'printButton',
-			_titleKey: 'printButtonTitle',
-			onclick: function () {
-				this.print();
-			}
 		}
 	}
 };
@@ -203,6 +187,7 @@ Highcharts.post = function (url, data) {
 };
 
 extend(Chart.prototype, {
+
 	/**
 	 * Return an SVG representation of the chart
 	 *
@@ -214,6 +199,10 @@ extend(Chart.prototype, {
 			sandbox,
 			svg,
 			seriesOptions,
+			sourceWidth,
+			sourceHeight,
+			cssWidth,
+			cssHeight,
 			options = merge(chart.options, additionalOptions); // copy the options and add extra options
 
 		// IE compatibility hack for generating SVG content that it doesn't really understand
@@ -232,11 +221,26 @@ extend(Chart.prototype, {
 			width: chart.chartWidth + PX,
 			height: chart.chartHeight + PX
 		}, doc.body);
+		
+		// get the source size
+		cssWidth = chart.renderTo.style.width;
+		cssHeight = chart.renderTo.style.height;
+		sourceWidth = options.exporting.sourceWidth ||
+			options.chart.width ||
+			(/px$/.test(cssWidth) && parseInt(cssWidth, 10)) ||
+			600;
+		sourceHeight = options.exporting.sourceHeight ||
+			options.chart.height ||
+			(/px$/.test(cssHeight) && parseInt(cssHeight, 10)) ||
+			400;
 
 		// override some options
 		extend(options.chart, {
+			animation: false,
 			renderTo: sandbox,
-			forExport: true
+			forExport: true,
+			width: sourceWidth,
+			height: sourceHeight
 		});
 		options.exporting.enabled = false; // hide buttons in print
 		options.chart.plotBackgroundImage = null; // the converter doesn't handle images
@@ -256,7 +260,7 @@ extend(Chart.prototype, {
 		});
 
 		// generate the chart copy
-		chartCopy = new Highcharts.Chart(options);
+		chartCopy = new Highcharts.Chart(options, chart.callback);
 
 		// reflect axis extremes in the export
 		each(['xAxis', 'yAxis'], function (axisType) {
@@ -286,7 +290,6 @@ extend(Chart.prototype, {
 			.replace(/isShadow="[^"]+"/g, '')
 			.replace(/symbolName="[^"]+"/g, '')
 			.replace(/jQuery[0-9]+="[^"]+"/g, '')
-			.replace(/isTracker="[^"]+"/g, '')
 			.replace(/url\([^#]+#/g, 'url(#')
 			.replace(/<svg /, '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ')
 			.replace(/ href=/g, ' xlink:href=')
@@ -330,17 +333,30 @@ extend(Chart.prototype, {
 	 * @param {Object} chartOptions Additional chart options for the SVG representation of the chart
 	 */
 	exportChart: function (options, chartOptions) {
-		var exportingOptions = this.options.exporting,
-			svg = this.getSVG(merge(exportingOptions.chartOptions, chartOptions));
+		options = options || {};
+		
+		var chart = this,
+			chartExportingOptions = chart.options.exporting,
+			svg = chart.getSVG(merge(
+				{ chart: { borderRadius: 0 } },
+				chartExportingOptions,
+				chartOptions, 
+				{
+					exporting: {
+						sourceWidth: options.sourceWidth || chartExportingOptions.sourceWidth, // docs: option and parameter in exportChart()
+						sourceHeight: options.sourceHeight || chartExportingOptions.sourceHeight // docs
+					}
+				}
+			));
 
 		// merge the options
-		options = merge(exportingOptions, options);
+		options = merge(chart.options.exporting, options);
 		
 		// do the post
 		Highcharts.post(options.url, {
 			filename: options.filename || 'chart',
 			type: options.type,
-			width: options.width,
+			width: options.width || 0, // IE8 fails to post undefined correctly, so use 0
 			scale: options.scale || 2,
 			svg: svg
 		});
@@ -377,6 +393,7 @@ extend(Chart.prototype, {
 		body.appendChild(container);
 
 		// print
+		win.focus(); // #1510
 		win.print();
 
 		// allow the browser to prepare before reverting
@@ -408,7 +425,7 @@ extend(Chart.prototype, {
 	 * @param {Number} width The width of the opener button
 	 * @param {Number} height The height of the opener button
 	 */
-	contextMenu: function (name, items, x, y, width, height) {
+	contextMenu: function (name, items, x, y, width, height, button) {
 		var chart = this,
 			navOptions = chart.options.navigation,
 			menuItemStyle = navOptions.menuItemStyle,
@@ -445,6 +462,9 @@ extend(Chart.prototype, {
 			// hide on mouse out
 			hide = function () {
 				css(menu, { display: NONE });
+				if (button) {
+					button.setState(0);
+				}
 			};
 
 			// Hide the menu some time after mouse leave (#1357)
@@ -459,25 +479,27 @@ extend(Chart.prototype, {
 			// create the items
 			each(items, function (item) {
 				if (item) {
-					var div = createElement(DIV, {
-						onmouseover: function () {
-							css(this, navOptions.menuItemHoverStyle);
-						},
-						onmouseout: function () {
-							css(this, menuItemStyle);
-						},
-						innerHTML: item.text || chart.options.lang[item.textKey]
-					}, extend({
-						cursor: 'pointer'
-					}, menuItemStyle), innerMenu);
-
-					div.onclick = function () {
-						hide();
-						item.onclick.apply(chart, arguments);
-					};
+					var element = item.separator ? 
+						createElement('hr', null, null, innerMenu) :
+						createElement(DIV, {
+							onmouseover: function () {
+								css(this, navOptions.menuItemHoverStyle);
+							},
+							onmouseout: function () {
+								css(this, menuItemStyle);
+							},
+							onclick: function () {
+								hide();
+								item.onclick.apply(chart, arguments);
+							},
+							innerHTML: item.text || chart.options.lang[item.textKey]
+						}, extend({
+							cursor: 'pointer'
+						}, menuItemStyle), innerMenu);
+
 
 					// Keep references to menu divs to be able to destroy them
-					chart.exportDivElements.push(div);
+					chart.exportDivElements.push(element);
 				}
 			});
 
@@ -515,22 +537,14 @@ extend(Chart.prototype, {
 			btnOptions = merge(chart.options.navigation.buttonOptions, options),
 			onclick = btnOptions.onclick,
 			menuItems = btnOptions.menuItems,
-			buttonWidth = btnOptions.width,
-			buttonHeight = btnOptions.height,
-			box,
 			symbol,
 			button,
-			menuKey,
-			borderWidth = btnOptions.borderWidth,
-			boxAttr = {
-				stroke: btnOptions.borderColor
-
-			},
 			symbolAttr = {
 				stroke: btnOptions.symbolStroke,
 				fill: btnOptions.symbolFill
 			},
-			symbolSize = btnOptions.symbolSize || 12;
+			symbolSize = btnOptions.symbolSize || 12,
+			menuKey;
 
 		if (!chart.btnCount) {
 			chart.btnCount = 0;
@@ -547,99 +561,85 @@ extend(Chart.prototype, {
 			return;
 		}
 
-		// element to capture the click
-		function revert() {
-			symbol.attr(symbolAttr);
-			box.attr(boxAttr);
+
+		var attr = btnOptions.theme,
+			states = attr.states,
+			hover = states && states.hover,
+			select = states && states.select,
+			callback;
+
+		delete attr.states;
+
+		if (onclick) {
+			callback = function () {
+				onclick.apply(chart, arguments);
+			};
+
+		} else if (menuItems) {
+			callback = function () {
+				chart.contextMenu(
+					'contextmenu', 
+					menuItems, 
+					button.translateX, 
+					button.translateY, 
+					button.width, 
+					button.height,
+					button
+				);
+				button.setState(2);
+			};
+		}
+
+
+		if (btnOptions.text && btnOptions.symbol) {
+			attr.paddingLeft = Highcharts.pick(attr.paddingLeft, 25);
+		
+		} else if (!btnOptions.text) {
+			extend(attr, {
+				width: btnOptions.width,
+				height: btnOptions.height,
+				padding: 0
+			});
 		}
 
-		// the box border
-		box = renderer.rect(
-			0,
-			0,
-			buttonWidth,
-			buttonHeight,
-			btnOptions.borderRadius,
-			borderWidth
-		)
-		//.translate(buttonLeft, buttonTop) // to allow gradients
-		.align(btnOptions, true)
-		.attr(extend({
-			fill: btnOptions.backgroundColor,
-			'stroke-width': borderWidth,
-			zIndex: 19
-		}, boxAttr)).add();
-
-		// the invisible element to track the clicks
-		button = renderer.rect(
-				0,
-				0,
-				buttonWidth,
-				buttonHeight,
-				0
-			)
-			.align(btnOptions)
+		button = renderer.button(btnOptions.text, 0, 0, callback, attr, hover, select)
 			.attr({
-				id: btnOptions._id,
-				fill: 'rgba(255, 255, 255, 0.001)',
 				title: chart.options.lang[btnOptions._titleKey],
-				zIndex: 21
-			}).css({
-				cursor: 'pointer'
-			})
-			.on('mouseover', function () {
-				symbol.attr({
-					stroke: btnOptions.hoverSymbolStroke,
-					fill: btnOptions.hoverSymbolFill
-				});
-				box.attr({
-					stroke: btnOptions.hoverBorderColor
-				});
-			})
-			.on('mouseout', revert)
-			.on('click', revert)
-			.add();
-
-		// add the click event
-		if (menuItems) {
-
-			onclick = function () {
-				revert();
-				var bBox = button.getBBox();
-				chart.contextMenu('menu' + menuKey, menuItems, bBox.x, bBox.y, buttonWidth, buttonHeight);
-			};
+				'stroke-linecap': 'round'
+			});
+
+		if (btnOptions.symbol) {
+			symbol = renderer.symbol(
+					btnOptions.symbol,
+					btnOptions.symbolX - (symbolSize / 2),
+					btnOptions.symbolY - (symbolSize / 2),
+					symbolSize,				
+					symbolSize
+				)
+				.attr(extend(symbolAttr, {
+					'stroke-width': btnOptions.symbolStrokeWidth || 1,
+					zIndex: 1
+				})).add(button);
 		}
-		/*addEvent(button.element, 'click', function() {
-			onclick.apply(chart, arguments);
-		});*/
-		button.on('click', function () {
-			onclick.apply(chart, arguments);
-		});
 
-		// the icon
-		symbol = renderer.symbol(
-				btnOptions.symbol,
-				btnOptions.symbolX - (symbolSize / 2),
-				btnOptions.symbolY - (symbolSize / 2),
-				symbolSize,				
-				symbolSize
-			)
-			.align(btnOptions, true)
-			.attr(extend(symbolAttr, {
-				'stroke-width': btnOptions.symbolStrokeWidth || 1,
-				zIndex: 20
-			})).add();
-
-		// Keep references to the renderer element so to be able to destroy them later.
-		chart.exportSVGElements.push(box, button, symbol);
+		button.add()
+			.align(extend(btnOptions, {
+				width: button.width,
+				x: Highcharts.pick(btnOptions.x, buttonOffset) // #1654
+			}), true, 'spacingBox');
+
+		buttonOffset += (button.width + btnOptions.buttonSpacing) * (btnOptions.align === 'right' ? -1 : 1);
+
+		chart.exportSVGElements.push(button, symbol);
+
 	},
 
 	/**
 	 * Destroy the buttons.
 	 */
-	destroyExport: function () {
-		var i,
-			chart = this,
+	destroyExport: function (e) {
+		var chart = e.target,
+			i,
 			elem;
 
 		// Destroy the extra buttons added
@@ -666,76 +666,27 @@ extend(Chart.prototype, {
 	}
 });
 
-/**
- * Crisp for 1px stroke width, which is default. In the future, consider a smarter,
- * global function.
- */
-function crisp(arr) {
-	var i = arr.length;
-	while (i--) {
-		if (typeof arr[i] === 'number') {
-			arr[i] = Math.round(arr[i]) - 0.5;		
-		}
-	}
+
+symbols.menu = function (x, y, width, height) {
+	var arr = [
+		M, x, y + 2.5,
+		L, x + width, y + 2.5,
+		M, x, y + height / 2 + 0.5,
+		L, x + width, y + height / 2 + 0.5,
+		M, x, y + height - 1.5,
+		L, x + width, y + height - 1.5
+	];
 	return arr;
-}
-
-// Create the export icon
-symbols.exportIcon = function (x, y, width, height) {
-	return crisp([
-		M, // the disk
-		x, y + width,
-		L,
-		x + width, y + height,
-		x + width, y + height * 0.8,
-		x, y + height * 0.8,
-		'Z',
-		M, // the arrow
-		x + width * 0.5, y + height * 0.8,
-		L,
-		x + width * 0.8, y + height * 0.4,
-		x + width * 0.4, y + height * 0.4,
-		x + width * 0.4, y,
-		x + width * 0.6, y,
-		x + width * 0.6, y + height * 0.4,
-		x + width * 0.2, y + height * 0.4,
-		'Z'
-	]);
-};
-// Create the print icon
-symbols.printIcon = function (x, y, width, height) {
-	return crisp([
-		M, // the printer
-		x, y + height * 0.7,
-		L,
-		x + width, y + height * 0.7,
-		x + width, y + height * 0.4,
-		x, y + height * 0.4,
-		'Z',
-		M, // the upper sheet
-		x + width * 0.2, y + height * 0.4,
-		L,
-		x + width * 0.2, y,
-		x + width * 0.8, y,
-		x + width * 0.8, y + height * 0.4,
-		'Z',
-		M, // the lower sheet
-		x + width * 0.2, y + height * 0.7,
-		L,
-		x, y + height,
-		x + width, y + height,
-		x + width * 0.8, y + height * 0.7,
-		'Z'
-	]);
 };
 
-
 // Add the buttons on chart load
 Chart.prototype.callbacks.push(function (chart) {
 	var n,
 		exportingOptions = chart.options.exporting,
 		buttons = exportingOptions.buttons;
 
+	buttonOffset = 0;
+
 	if (exportingOptions.enabled !== false) {
 
 		for (n in buttons) {