contour 0.5.7 → 0.6.0

data/CHANGELOG.rdoc

@@ -1,3 +1,12 @@
+== 0.6.0
+
+* Enhancements
+  * Underlying HighCharts Library updated to 2.1.9 to work with jQuery 1.7.0
+  * Added jquery-rails ~> 1.0.17 as a dependency
+
+* Bug Fix
+  * CSS classes negative and positive now properly apply color to their corresponding links
+
 == 0.5.7
 
 * Enhancements

data/README.rdoc

@@ -42,7 +42,7 @@ In order to get registration working, you can use the modified Contour Authentic
 
 == Setting up a new project with quick authentication
 
-Make sure you have Rails 3.1.0
+Make sure you have Rails 3.1.1
 
   rails -v
   
@@ -52,9 +52,9 @@ Make sure you have Rails 3.1.0
   
 Modify Gemfile and add
 
-  gem 'contour', '~> 0.5.0'          # Basic Layout and Assets
-  gem 'devise',  '~> 1.4.4'          # User Authorization
-  gem 'omniauth',   '0.2.6'          # User Multi-Authentication  
+  gem 'contour', '~> 0.6.0'          # Basic Layout and Assets
+  gem 'devise'                       # User Authorization
+  gem 'omniauth'                     # User Multi-Authentication  
 
 Run Bundle install
 

data/contour.gemspec

@@ -11,7 +11,7 @@ require 'contour/version'
 
 Gem::Specification.new do |s|
   s.name = 'contour'
-  s.version = Contour::VERSION.dup
+  s.version = Contour::VERSION::STRING
   s.platform = Gem::Platform::RUBY
   s.summary = 'Basic Rails framework files and assets for layout and authentication'
   s.email = 'remosm@gmail.com'
@@ -21,9 +21,7 @@ Gem::Specification.new do |s|
 
   s.add_dependency('devise', '~> 1.4.9')
   s.add_dependency('omniauth', '=0.2.6')
-  # jquery-rails 1.0.17 switches to jQuery 1.7.0
-  # HighCharts 2.1.4 requires jQuery 1.6.4
-  s.add_dependency('jquery-rails', '>= 1.0.0', '<= 1.0.16')
+  s.add_dependency('jquery-rails', '~> 1.0.17')
   
   s.files = `git ls-files`.split("\n")
 end

data/lib/contour/version.rb

@@ -1,3 +1,10 @@
 module Contour
-  VERSION = "0.5.7"
+  module VERSION #:nodoc:
+    MAJOR = 0
+    MINOR = 6
+    TINY = 0
+    BUILD = nil # nil, "pre", "rc", "rc2"
+
+    STRING = [MAJOR, MINOR, TINY, BUILD].compact.join('.')
+  end
 end

data/vendor/assets/javascripts/contour.js

@@ -3,6 +3,6 @@
 //
 //= require jquery
 //= require jquery_ujs
-//= require external/highcharts-2.1.4.src
-//= require external/exporting-2.1.4.src
+//= require external/highcharts-2.1.9.src
+//= require external/exporting-2.1.9.src
 //= require_tree .

data/vendor/assets/javascripts/external/{exporting-2.1.4.src.js → exporting-2.1.9.src.js}

@@ -1,21 +1,22 @@
-/** 
- * @license Highcharts JS v2.1.4 (2011-03-02)
+/**
+ * @license Highcharts JS v2.1.9 (2011-11-11)
  * Exporting module
- * 
- * (c) 2010 Torstein Hønsi
- * 
+ *
+ * (c) 2010-2011 Torstein Hønsi
+ *
  * License: www.highcharts.com/license
  */
 
 // JSLint options:
 /*global Highcharts, document, window, Math, setTimeout */
 
-(function() { // encapsulate
+(function () { // encapsulate
 
 // create shortcuts
 var HC = Highcharts,
 	Chart = HC.Chart,
 	addEvent = HC.addEvent,
+	removeEvent = HC.removeEvent,
 	createElement = HC.createElement,
 	discardElement = HC.discardElement,
 	css = HC.css,
@@ -26,7 +27,7 @@ var HC = Highcharts,
 	mathMax = math.max,
 	doc = document,
 	win = window,
-	hasTouch = 'ontouchstart' in doc.documentElement,	
+	hasTouch = doc.documentElement.ontouchstart !== undefined,
 	M = 'M',
 	L = 'L',
 	DIV = 'div',
@@ -35,19 +36,17 @@ var HC = Highcharts,
 	PREFIX = 'highcharts-',
 	ABSOLUTE = 'absolute',
 	PX = 'px',
+	UNDEFINED,
+	defaultOptions = HC.getOptions();
 
-
-
-	// Add language and get the defaultOptions
-	defaultOptions = HC.setOptions({
-		lang: {
-			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'
-		}
+	// Add language
+	extend(defaultOptions.lang, {
+		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'
 	});
 
 // Buttons and menus are collected in a separate config option set called 'navigation'.
@@ -67,7 +66,7 @@ defaultOptions.navigation = {
 		background: '#4572A5',
 		color: '#FFFFFF'
 	},
-	
+
 	buttonOptions: {
 		align: 'right',
 		backgroundColor: {
@@ -93,7 +92,7 @@ defaultOptions.navigation = {
 		symbolY: 10.5,
 		verticalAlign: 'top',
 		width: 24,
-		y: 10		
+		y: 10
 	}
 };
 
@@ -106,6 +105,7 @@ defaultOptions.exporting = {
 	type: 'image/png',
 	url: 'http://export.highcharts.com/',
 	width: 800,
+	enableImages: false,
 	buttons: {
 		exportButton: {
 			//enabled: true,
@@ -113,29 +113,30 @@ defaultOptions.exporting = {
 			x: -10,
 			symbolFill: '#A8BF77',
 			hoverSymbolFill: '#768F3E',
+			_id: 'exportButton',
 			_titleKey: 'exportButtonTitle',
 			menuItems: [{
 				textKey: 'downloadPNG',
-				onclick: function() {
+				onclick: function () {
 					this.exportChart();
 				}
 			}, {
 				textKey: 'downloadJPEG',
-				onclick: function() {
+				onclick: function () {
 					this.exportChart({
 						type: 'image/jpeg'
 					});
 				}
 			}, {
 				textKey: 'downloadPDF',
-				onclick: function() {
+				onclick: function () {
 					this.exportChart({
 						type: 'application/pdf'
 					});
 				}
 			}, {
 				textKey: 'downloadSVG',
-				onclick: function() {
+				onclick: function () {
 					this.exportChart({
 						type: 'image/svg+xml'
 					});
@@ -146,11 +147,11 @@ defaultOptions.exporting = {
 					var svg = this.getSVG()
 						.replace(/</g, '\n&lt;')
 						.replace(/>/g, '&gt;');
-						
+
 					doc.body.innerHTML = '<pre>'+ svg +'</pre>';
 				}
 			}*/]
-			
+
 		},
 		printButton: {
 			//enabled: true,
@@ -158,8 +159,9 @@ defaultOptions.exporting = {
 			x: -36,
 			symbolFill: '#B5C9DF',
 			hoverSymbolFill: '#779ABF',
+			_id: 'printButton',
 			_titleKey: 'printButtonTitle',
-			onclick: function() {
+			onclick: function () {
 				this.print();
 			}
 		}
@@ -171,10 +173,10 @@ defaultOptions.exporting = {
 extend(Chart.prototype, {
 	/**
 	 * Return an SVG representation of the chart
-	 * 
+	 *
 	 * @param additionalOptions {Object} Additional chart options for the generated SVG representation
-	 */	
-	 getSVG: function(additionalOptions) {
+	 */
+	getSVG: function (additionalOptions) {
 		var chart = this,
 			chartCopy,
 			sandbox,
@@ -184,18 +186,20 @@ extend(Chart.prototype, {
 			pointOptions,
 			pointMarker,
 			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
 		if (!doc.createElementNS) {
-			doc.createElementNS = function(ns, tagName) {
+			/*jslint unparam: true*//* allow unused parameter ns in function below */
+			doc.createElementNS = function (ns, tagName) {
 				var elem = doc.createElement(tagName);
-				elem.getBBox = function() {
-					return chart.renderer.Element.prototype.getBBox.apply({ element: elem });
+				elem.getBBox = function () {
+					return HC.Renderer.prototype.Element.prototype.getBBox.apply({ element: elem });
 				};
 				return elem;
 			};
+			/*jslint unparam: false*/
 		}
-		
+
 		// create a sandbox where a new chart will be generated
 		sandbox = createElement(DIV, null, {
 			position: ABSOLUTE,
@@ -203,31 +207,38 @@ extend(Chart.prototype, {
 			width: chart.chartWidth + PX,
 			height: chart.chartHeight + PX
 		}, doc.body);
-		
+
 		// override some options
 		extend(options.chart, {
 			renderTo: sandbox,
 			forExport: true
 		});
 		options.exporting.enabled = false; // hide buttons in print
-		options.chart.plotBackgroundImage = null; // the converter doesn't handle images
+
+		if (!options.exporting.enableImages) {
+			options.chart.plotBackgroundImage = null; // the converter doesn't handle images
+		}
+
 		// prepare for replicating the chart
 		options.series = [];
-		each(chart.series, function(serie) {
-			seriesOptions = serie.options;			
-			
+		each(chart.series, function (serie) {
+			seriesOptions = serie.options;
+
 			seriesOptions.animation = false; // turn off animation
 			seriesOptions.showCheckbox = false;
-			
-			// remove image markers
-			if (seriesOptions && seriesOptions.marker && /^url\(/.test(seriesOptions.marker.symbol)) { 
-				seriesOptions.marker.symbol = 'circle';
+			seriesOptions.visible = serie.visible;
+
+			if (!options.exporting.enableImages) {
+				// remove image markers
+				if (seriesOptions && seriesOptions.marker && /^url\(/.test(seriesOptions.marker.symbol)) {
+					seriesOptions.marker.symbol = 'circle';
+				}
 			}
-			
+
 			seriesOptions.data = [];
-			
-			each(serie.data, function(point) {
-				
+
+			each(serie.data, function (point) {
+
 				// extend the options by those values that can be expressed in a number or array config
 				config = point.config;
 				pointOptions = {
@@ -236,81 +247,108 @@ extend(Chart.prototype, {
 					name: point.name
 				};
 
-				if (typeof config == 'object' && point.config && config.constructor != Array) {
+				if (typeof config === 'object' && point.config && config.constructor !== Array) {
 					extend(pointOptions, config);
 				}
 
+				pointOptions.visible = point.visible;
 				seriesOptions.data.push(pointOptions); // copy fresh updated data
-								
-				// remove image markers
-				pointMarker = point.config && point.config.marker;
-				if (pointMarker && /^url\(/.test(pointMarker.symbol)) { 
-					delete pointMarker.symbol;
+
+				if (!options.exporting.enableImages) {
+					// remove image markers
+					pointMarker = point.config && point.config.marker;
+					if (pointMarker && /^url\(/.test(pointMarker.symbol)) {
+						delete pointMarker.symbol;
+					}
 				}
-			});	
-			
+			});
+
 			options.series.push(seriesOptions);
 		});
-		
+
 		// generate the chart copy
 		chartCopy = new Highcharts.Chart(options);
-		
+
+		// reflect axis extremes in the export
+		each(['xAxis', 'yAxis'], function (axisType) {
+			each(chart[axisType], function (axis, i) {
+				var axisCopy = chartCopy[axisType][i],
+					extremes = axis.getExtremes(),
+					userMin = extremes.userMin,
+					userMax = extremes.userMax;
+
+				if (userMin !== UNDEFINED || userMax !== UNDEFINED) {
+					axisCopy.setExtremes(userMin, userMax, true, false);
+				}
+			});
+		});
+
 		// get the SVG from the container's innerHTML
 		svg = chartCopy.container.innerHTML;
-		
+
 		// free up memory
 		options = null;
 		chartCopy.destroy();
 		discardElement(sandbox);
-		
+
 		// sanitize
 		svg = svg
-			.replace(/zIndex="[^"]+"/g, '') 
+			.replace(/zIndex="[^"]+"/g, '')
 			.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=/, ' xlink:href=')
-			.replace(/preserveAspectRatio="none">/g, 'preserveAspectRatio="none"/>')*/
+			.replace(/<svg /, '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ')
+			.replace(/ href=/g, ' xlink:href=')
+			/*.replace(/preserveAspectRatio="none">/g, 'preserveAspectRatio="none"/>')*/
 			/* This fails in IE < 8
 			.replace(/([0-9]+)\.([0-9]+)/g, function(s1, s2, s3) { // round off to save weight
 				return s2 +'.'+ s3[0];
-			})*/ 
-			
+			})*/
+
+			// Replace HTML entities, issue #347
+			.replace(/&nbsp;/g, '\u00A0') // no-break space
+			.replace(/&shy;/g,  '\u00AD') // soft hyphen
+
 			// IE specific
-			.replace(/id=([^" >]+)/g, 'id="$1"') 
+			.replace(/id=([^" >]+)/g, 'id="$1"')
 			.replace(/class=([^" ]+)/g, 'class="$1"')
 			.replace(/ transform /g, ' ')
 			.replace(/:(path|rect)/g, '$1')
-			.replace(/style="([^"]+)"/g, function(s) {
+			.replace(/<img ([^>]*)>/gi, '<image $1 />')
+			.replace(/<\/image>/g, '') // remove closing tags for images as they'll never have any content
+			.replace(/<image ([^>]*)([^\/])>/gi, '<image $1$2 />') // closes image tags for firefox
+			.replace(/width=(\d+)/g, 'width="$1"')
+			.replace(/height=(\d+)/g, 'height="$1"')
+			.replace(/hc-svg-href="/g, 'xlink:href="')
+			.replace(/style="([^"]+)"/g, function (s) {
 				return s.toLowerCase();
 			});
-			
+
 		// IE9 beta bugs with innerHTML. Test again with final IE9.
 		svg = svg.replace(/(url\(#highcharts-[0-9]+)&quot;/g, '$1')
 			.replace(/&quot;/g, "'");
-		if (svg.match(/ xmlns="/g).length == 2) {
+		if (svg.match(/ xmlns="/g).length === 2) {
 			svg = svg.replace(/xmlns="[^"]+"/, '');
 		}
-			
+
 		return svg;
 	},
-	
+
 	/**
 	 * Submit the SVG representation of the chart to the server
 	 * @param {Object} options Exporting options. Possible members are url, type and width.
 	 * @param {Object} chartOptions Additional chart options for the SVG representation of the chart
 	 */
-	exportChart: function(options, chartOptions) {
+	exportChart: function (options, chartOptions) {
 		var form,
 			chart = this,
 			svg = chart.getSVG(chartOptions);
-			
+
 		// merge the options
 		options = merge(chart.options.exporting, options);
-		
+
 		// create the form
 		form = createElement('form', {
 			method: 'post',
@@ -318,82 +356,82 @@ extend(Chart.prototype, {
 		}, {
 			display: NONE
 		}, doc.body);
-		
+
 		// add the values
-		each(['filename', 'type', 'width', 'svg'], function(name) {
+		each(['filename', 'type', 'width', 'svg'], function (name) {
 			createElement('input', {
 				type: HIDDEN,
 				name: name,
-				value: { 
-					filename: options.filename || 'chart', 
-					type: options.type, 
-					width: options.width, 
-					svg: svg 
+				value: {
+					filename: options.filename || 'chart',
+					type: options.type,
+					width: options.width,
+					svg: svg
 				}[name]
 			}, null, form);
 		});
-		
+
 		// submit
 		form.submit();
-		
+
 		// clean up
 		discardElement(form);
 	},
-	
+
 	/**
 	 * Print the chart
 	 */
-	print: function() {
-		
+	print: function () {
+
 		var chart = this,
 			container = chart.container,
 			origDisplay = [],
 			origParent = container.parentNode,
 			body = doc.body,
 			childNodes = body.childNodes;
-			
+
 		if (chart.isPrinting) { // block the button while in printing mode
 			return;
 		}
-		
+
 		chart.isPrinting = true;
-		
-		// hide all body content	
-		each(childNodes, function(node, i) {
-			if (node.nodeType == 1) {
+
+		// hide all body content
+		each(childNodes, function (node, i) {
+			if (node.nodeType === 1) {
 				origDisplay[i] = node.style.display;
 				node.style.display = NONE;
 			}
 		});
-			
+
 		// pull out the chart
 		body.appendChild(container);
-		 
+
 		// print
-		win.print();		
-		
+		win.print();
+
 		// allow the browser to prepare before reverting
-		setTimeout(function() {
+		setTimeout(function () {
 
 			// put the chart back in
 			origParent.appendChild(container);
-			
+
 			// restore all body content
-			each(childNodes, function(node, i) {
-				if (node.nodeType == 1) {
+			each(childNodes, function (node, i) {
+				if (node.nodeType === 1) {
 					node.style.display = origDisplay[i];
 				}
 			});
-			
+
 			chart.isPrinting = false;
-			
+
 		}, 1000);
 
 	},
-	
+
 	/**
-	 * Display a popup menu for choosing the export type 
-	 * 
+	 * Display a popup menu for choosing the export type
+	 *
 	 * @param {String} name An identifier for the menu
 	 * @param {Array} items A collection with text and onclicks for the items
 	 * @param {Number} x The x position of the opener button
@@ -401,24 +439,24 @@ 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) {
 		var chart = this,
 			navOptions = chart.options.navigation,
 			menuItemStyle = navOptions.menuItemStyle,
 			chartWidth = chart.chartWidth,
 			chartHeight = chart.chartHeight,
-			cacheName = 'cache-'+ name,
+			cacheName = 'cache-' + name,
 			menu = chart[cacheName],
 			menuPadding = mathMax(width, height), // for mouse leave detection
 			boxShadow = '3px 3px 10px #888',
 			innerMenu,
 			hide,
-			menuStyle; 
-		
+			menuStyle;
+
 		// create the menu only the first time
 		if (!menu) {
-			
-			// create a HTML element above the SVG		
+
+			// create a HTML element above the SVG
 			chart[cacheName] = menu = createElement(DIV, {
 				className: PREFIX + name
 			}, {
@@ -426,51 +464,56 @@ extend(Chart.prototype, {
 				zIndex: 1000,
 				padding: menuPadding + PX
 			}, chart.container);
-			
-			innerMenu = createElement(DIV, null, 
+
+			innerMenu = createElement(DIV, null,
 				extend({
 					MozBoxShadow: boxShadow,
 					WebkitBoxShadow: boxShadow,
 					boxShadow: boxShadow
-				}, navOptions.menuStyle) , menu);
-			
+				}, navOptions.menuStyle), menu);
+
 			// hide on mouse out
-			hide = function() {
+			hide = function () {
 				css(menu, { display: NONE });
 			};
-			
+
 			addEvent(menu, 'mouseleave', hide);
-			
-			
+
+
 			// create the items
-			each(items, function(item) {
+			each(items, function (item) {
 				if (item) {
 					var div = createElement(DIV, {
-						onmouseover: function() {
+						onmouseover: function () {
 							css(this, navOptions.menuItemHoverStyle);
 						},
-						onmouseout: function() {
+						onmouseout: function () {
 							css(this, menuItemStyle);
 						},
-						innerHTML: item.text || HC.getOptions().lang[item.textKey]
+						innerHTML: item.text || chart.options.lang[item.textKey]
 					}, extend({
 						cursor: 'pointer'
 					}, menuItemStyle), innerMenu);
-					
-					div[hasTouch ? 'ontouchstart' : 'onclick'] = function() {
+
+					div[hasTouch ? 'ontouchstart' : 'onclick'] = function () {
 						hide();
 						item.onclick.apply(chart, arguments);
 					};
-						
+
+					// Keep references to menu divs to be able to destroy them
+					chart.exportDivElements.push(div);
 				}
 			});
-			
+
+			// Keep references to menu and innerMenu div to be able to destroy them
+			chart.exportDivElements.push(innerMenu, menu);
+
 			chart.exportMenuWidth = menu.offsetWidth;
 			chart.exportMenuHeight = menu.offsetHeight;
 		}
-		
+
 		menuStyle = { display: 'block' };
-		
+
 		// if outside right, right align it
 		if (x + chart.exportMenuWidth > chartWidth) {
 			menuStyle.right = (chartWidth - x - width - menuPadding) + PX;
@@ -483,14 +526,14 @@ extend(Chart.prototype, {
 		} else {
 			menuStyle.top = (y + height - menuPadding) + PX;
 		}
-		
+
 		css(menu, menuStyle);
 	},
-	
+
 	/**
 	 * Add the export button to the chart
 	 */
-	addButton: function(options) {
+	addButton: function (options) {
 		var chart = this,
 			renderer = chart.renderer,
 			btnOptions = merge(chart.options.navigation.buttonOptions, options),
@@ -503,32 +546,38 @@ extend(Chart.prototype, {
 			buttonHeight = btnOptions.height,
 			box,
 			symbol,
-			button,	
+			button,
 			borderWidth = btnOptions.borderWidth,
 			boxAttr = {
 				stroke: btnOptions.borderColor
-				
+
 			},
 			symbolAttr = {
 				stroke: btnOptions.symbolStroke,
 				fill: btnOptions.symbolFill
 			};
-			
+
+		// Keeps references to the button elements
+		if (!chart.exportDivElements) {
+			chart.exportDivElements = [];
+			chart.exportSVGElements = [];
+		}
+
 		if (btnOptions.enabled === false) {
 			return;
 		}
-			
+
 		// element to capture the click
 		function revert() {
 			symbol.attr(symbolAttr);
 			box.attr(boxAttr);
 		}
-		
+
 		// the box border
 		box = renderer.rect(
 			0,
 			0,
-			buttonWidth, 
+			buttonWidth,
 			buttonHeight,
 			btnOptions.borderRadius,
 			borderWidth
@@ -540,9 +589,9 @@ extend(Chart.prototype, {
 			'stroke-width': borderWidth,
 			zIndex: 19
 		}, boxAttr)).add();
-		
+
 		// the invisible element to track the clicks
-		button = renderer.rect( 
+		button = renderer.rect(
 				0,
 				0,
 				buttonWidth,
@@ -551,13 +600,14 @@ extend(Chart.prototype, {
 			)
 			.align(btnOptions)
 			.attr({
+				id: btnOptions._id,
 				fill: 'rgba(255, 255, 255, 0.001)',
-				title: HC.getOptions().lang[btnOptions._titleKey],
+				title: chart.options.lang[btnOptions._titleKey],
 				zIndex: 21
 			}).css({
 				cursor: 'pointer'
 			})
-			.on('mouseover', function() {
+			.on('mouseover', function () {
 				symbol.attr({
 					stroke: btnOptions.hoverSymbolStroke,
 					fill: btnOptions.hoverSymbolFill
@@ -569,12 +619,12 @@ extend(Chart.prototype, {
 			.on('mouseout', revert)
 			.on('click', revert)
 			.add();
-		
+
 		//addEvent(button.element, 'click', revert);
-		
+
 		// add the click event
 		if (menuItems) {
-			onclick = function(e) {
+			onclick = function () {
 				revert();
 				var bBox = button.getBBox();
 				chart.contextMenu('export-menu', menuItems, bBox.x, bBox.y, buttonWidth, buttonHeight);
@@ -583,30 +633,61 @@ extend(Chart.prototype, {
 		/*addEvent(button.element, 'click', function() {
 			onclick.apply(chart, arguments);
 		});*/
-		button.on('click', function() {
+		button.on('click', function () {
 			onclick.apply(chart, arguments);
 		});
-		
+
 		// the icon
 		symbol = renderer.symbol(
-				btnOptions.symbol, 
-				btnOptions.symbolX, 
-				btnOptions.symbolY, 
+				btnOptions.symbol,
+				btnOptions.symbolX,
+				btnOptions.symbolY,
 				(btnOptions.symbolSize || 12) / 2
 			)
 			.align(btnOptions, true)
 			.attr(extend(symbolAttr, {
 				'stroke-width': btnOptions.symbolStrokeWidth || 1,
-				zIndex: 20		
+				zIndex: 20
 			})).add();
-		
-		
-		
+
+		// Keep references to the renderer element so to be able to destroy them later.
+		chart.exportSVGElements.push(box, button, symbol);
+	},
+
+	/**
+	 * Destroy the buttons.
+	 */
+	destroyExport: function () {
+		var i,
+			chart = this,
+			elem;
+
+		// Destroy the extra buttons added
+		for (i = 0; i < chart.exportSVGElements.length; i++) {
+			elem = chart.exportSVGElements[i];
+			// Destroy and null the svg/vml elements
+			elem.onclick = elem.ontouchstart = null;
+			chart.exportSVGElements[i] = elem.destroy();
+		}
+
+		// Destroy the divs for the menu
+		for (i = 0; i < chart.exportDivElements.length; i++) {
+			elem = chart.exportDivElements[i];
+
+			// Remove the event handler
+			removeEvent(elem, 'mouseleave');
+
+			// Remove inline events
+			chart.exportDivElements[i] = elem.onmouseout = elem.onmouseover = elem.ontouchstart = elem.onclick = null;
+
+			// Destroy the div by moving to garbage bin
+			discardElement(elem);
+		}
 	}
 });
 
 // Create the export icon
-HC.Renderer.prototype.symbols.exportIcon = function(x, y, radius) {
+HC.Renderer.prototype.symbols.exportIcon = function (x, y, radius) {
 	return [
 		M, // the disk
 		x - radius, y + radius,
@@ -628,7 +709,7 @@ HC.Renderer.prototype.symbols.exportIcon = function(x, y, radius) {
 	];
 };
 // Create the print icon
-HC.Renderer.prototype.symbols.printIcon = function(x, y, radius) {
+HC.Renderer.prototype.symbols.printIcon = function (x, y, radius) {
 	return [
 		M, // the printer
 		x - radius, y + radius * 0.5,
@@ -656,7 +737,7 @@ HC.Renderer.prototype.symbols.printIcon = function(x, y, radius) {
 
 
 // Add the buttons on chart load
-Chart.prototype.callbacks.push(function(chart) {
+Chart.prototype.callbacks.push(function (chart) {
 	var n,
 		exportingOptions = chart.options.exporting,
 		buttons = exportingOptions.buttons;
@@ -666,8 +747,12 @@ Chart.prototype.callbacks.push(function(chart) {
 		for (n in buttons) {
 			chart.addButton(buttons[n]);
 		}
+
+		// Destroy the export elements at chart destroy
+		addEvent(chart, 'destroy', chart.destroyExport);
 	}
+
 });
 
 
-})();
+}());