highcharts-rails 4.0.3 → 4.0.4

data/app/assets/javascripts/highcharts/adapters/standalone-framework.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v4.0.3 (2014-07-03)
+ * @license Highcharts JS v4.0.4 (2014-09-02)
  *
  * Standalone Highcharts Framework
  *
@@ -15,6 +15,7 @@ var UNDEFINED,
 	emptyArray = [],
 	timers = [],
 	timerId,
+	animSetters = {},
 	Fx;
 
 Math.easeInOutSine = function (t, b, c, d) {
@@ -184,6 +185,7 @@ function augment(obj) {
 
 
 return {
+
 	/**
 	 * Initialize the adapter. This is run once as Highcharts is first run.
 	 */
@@ -292,10 +294,14 @@ return {
 					elem = this.elem,
 					elemelem = elem.element; // if destroyed, it is null
 
+				// Animation setter defined from outside
+				if (animSetters[this.prop]) {
+					animSetters[this.prop](this);
+
 				// Animating a path definition on SVGElement
-				if (paths && elemelem) {
+				} else if (paths && elemelem) {
 					elem.attr('d', pathAnim.step(paths[0], paths[1], this.now, this.toD));
-				
+
 				// Other animations on SVGElement
 				} else if (elem.attr) {
 					if (elemelem) {
@@ -440,7 +446,7 @@ return {
 				}
 	
 				if (!end) {
-					end = parseFloat(prop[name]);
+					end = prop[name];
 				}
 				fx.custom(start, end, unit);
 			}	
@@ -454,6 +460,13 @@ return {
 		return window.getComputedStyle(el, undefined).getPropertyValue(prop);
 	},
 
+	/**
+	 * Add an animation setter for a specific property
+	 */
+	addAnimSetter: function (prop, fn) {
+		animSetters[prop] = fn;
+	},
+
 	/**
 	 * Downloads a script and executes a callback when done.
 	 * @param {String} scriptLocation

data/app/assets/javascripts/highcharts/highcharts-3d.js

@@ -2,7 +2,7 @@
 // @compilation_level SIMPLE_OPTIMIZATIONS
 
 /**
- * @license Highcharts JS v4.0.3 (2014-07-03)
+ * @license Highcharts JS v4.0.4 (2014-09-02)
  *
  * (c) 2009-2013 Torstein Hønsi
  *
@@ -75,6 +75,11 @@ function perspective(points, angle2, angle1, origin) {
 ////// HELPER METHODS //////
 var dFactor = (4 * (Math.sqrt(2) - 1) / 3) / (PI / 2);
 
+function defined(obj) {
+	return obj !== undefined && obj !== null;
+}
+
+
 function curveTo(cx, cy, rx, ry, start, end, dx, dy) {
 	var result = [];
 	if ((end > start) && (end - start > PI / 2 + 0.0001)) {
@@ -150,7 +155,7 @@ Highcharts.SVGRenderer.prototype.cuboid = function (shapeArgs) {
 	};
 
 	result.attr = function (args) {
-		if (args.shapeArgs || args.x) {
+		if (args.shapeArgs || defined(args.x)) {
 			var shapeArgs = args.shapeArgs || args;
 			var paths = this.renderer.cuboidPath(shapeArgs);
 			this.front.attr({d: paths[0], zIndex: paths[3]});
@@ -164,7 +169,7 @@ Highcharts.SVGRenderer.prototype.cuboid = function (shapeArgs) {
 	};
 	
 	result.animate = function (args, duration, complete) {
-		if (args.x && args.y) {
+		if (defined(args.x) && defined(args.y)) {
 			var paths = this.renderer.cuboidPath(args);
 			this.front.attr({zIndex: paths[3]}).animate({d: paths[0]}, duration, complete);
 			this.top.attr({zIndex: paths[4]}).animate({d: paths[1]}, duration, complete);
@@ -333,7 +338,7 @@ Highcharts.SVGRenderer.prototype.arc3d = function (shapeArgs) {
 	};
 
 	result.animate = function (args, duration, complete) {
-		if (args.end || args.start) {
+		if (defined(args.end) || defined(args.start)) {
 			this._shapeArgs = this.shapeArgs;
 
 			Highcharts.SVGElement.prototype.animate.call(this, {
@@ -348,6 +353,10 @@ Highcharts.SVGRenderer.prototype.arc3d = function (shapeArgs) {
 						end = fx.end,
 						pos = fx.pos,
 						sA = Highcharts.merge(start, {
+							x: start.x + ((end.x - start.x) * pos),
+							y: start.y + ((end.y - start.y) * pos),
+							r: start.r + ((end.r - start.r) * pos),
+							innerR: start.innerR + ((end.innerR - start.innerR) * pos),
 							start: start.start + ((end.start - start.start) * pos),
 							end: start.end + ((end.end - start.end) * pos)
 						});
@@ -518,7 +527,20 @@ defaultChartOptions.chart.options3d = {
 		back: { size: 1, color: 'rgba(255,255,255,0)' }
 	}
 };
-defaultChartOptions.plotOptions.pie.borderColor = undefined;
+
+Highcharts.wrap(Highcharts.Chart.prototype, 'init', function (proceed) {
+	var args = [].slice.call(arguments, 1),
+		plotOptions,
+		pieOptions;
+
+	if (args[0].chart.options3d && args[0].chart.options3d.enabled) {
+		plotOptions = args[0].plotOptions || {};
+		pieOptions = plotOptions.pie || {};
+
+		pieOptions.borderColor = Highcharts.pick(pieOptions.borderColor, undefined); 
+	}
+	proceed.apply(this, args);
+});
 
 Highcharts.wrap(Highcharts.Chart.prototype, 'setChartSize', function (proceed) {
 	proceed.apply(this, [].slice.call(arguments, 1));
@@ -851,20 +873,21 @@ Highcharts.wrap(Highcharts.seriesTypes.column.prototype, 'translate', function (
 	z += (seriesOptions.groupZPadding || 1);
 
 	Highcharts.each(series.data, function (point) {
-		var shapeArgs = point.shapeArgs,
-			tooltipPos = point.tooltipPos;
-
-		point.shapeType = 'cuboid';
-		shapeArgs.alpha = alpha;
-		shapeArgs.beta = beta; 
-		shapeArgs.z = z;
-		shapeArgs.origin = origin;
-		shapeArgs.depth = depth;
+		if (point.y !== null) {
+			var shapeArgs = point.shapeArgs,
+				tooltipPos = point.tooltipPos;
 
-		// Translate the tooltip position in 3d space
-		tooltipPos = perspective([{ x: tooltipPos[0], y: tooltipPos[1], z: z }], alpha, beta, origin)[0];
-		point.tooltipPos = [tooltipPos.x, tooltipPos.y];
+			point.shapeType = 'cuboid';
+			shapeArgs.alpha = alpha;
+			shapeArgs.beta = beta; 
+			shapeArgs.z = z;
+			shapeArgs.origin = origin;
+			shapeArgs.depth = depth;
 
+			// Translate the tooltip position in 3d space
+			tooltipPos = perspective([{ x: tooltipPos[0], y: tooltipPos[1], z: z }], alpha, beta, origin)[0];
+			point.tooltipPos = [tooltipPos.x, tooltipPos.y];
+		}
 	});	    
 });
 
@@ -881,25 +904,29 @@ Highcharts.wrap(Highcharts.seriesTypes.column.prototype, 'animate', function (pr
 		if (Highcharts.svg) { // VML is too slow anyway
 			if (init) {
 				Highcharts.each(series.data, function (point) {
-					point.height = point.shapeArgs.height;
-					point.shapey = point.shapeArgs.y;	//#2968				
-					point.shapeArgs.height = 1;
-					if (!reversed) {
-						if (point.stackY) {
-							point.shapeArgs.y = point.plotY + yAxis.translate(point.stackY);
-						} else {
-							point.shapeArgs.y = point.plotY + (point.negative ? -point.height : point.height);
+					if (point.y !== null) {
+						point.height = point.shapeArgs.height;
+						point.shapey = point.shapeArgs.y;	//#2968				
+						point.shapeArgs.height = 1;
+						if (!reversed) {
+							if (point.stackY) {
+								point.shapeArgs.y = point.plotY + yAxis.translate(point.stackY);
+							} else {
+								point.shapeArgs.y = point.plotY + (point.negative ? -point.height : point.height);
+							}
 						}
 					}
 				});
 
 			} else { // run the animation				
 				Highcharts.each(series.data, function (point) {					
-					point.shapeArgs.height = point.height;
-					point.shapeArgs.y = point.shapey;	//#2968
-					// null value do not have a graphic
-					if (point.graphic) {
-						point.graphic.animate(point.shapeArgs, series.options.animation);					
+					if (point.y !== null) {
+						point.shapeArgs.height = point.height;
+						point.shapeArgs.y = point.shapey;	//#2968
+						// null value do not have a graphic
+						if (point.graphic) {
+							point.graphic.animate(point.shapeArgs, series.options.animation);					
+						}
 					}
 				});
 
@@ -951,14 +978,16 @@ function draw3DPoints(proceed) {
 		this.borderWidth = options.borderWidth = options.edgeWidth || 1;
 
 		Highcharts.each(this.data, function (point) {
-			var pointAttr = point.pointAttr;
+			if (point.y !== null) {
+				var pointAttr = point.pointAttr;
 
-			// Set the border color to the fill color to provide a smooth edge
-			this.borderColor = Highcharts.pick(options.edgeColor, pointAttr[''].fill);
+				// Set the border color to the fill color to provide a smooth edge
+				this.borderColor = Highcharts.pick(options.edgeColor, pointAttr[''].fill);
 
-			pointAttr[''].stroke = this.borderColor;
-			pointAttr.hover.stroke = Highcharts.pick(states.hover.edgeColor, this.borderColor);
-			pointAttr.select.stroke = Highcharts.pick(states.select.edgeColor, this.borderColor);
+				pointAttr[''].stroke = this.borderColor;
+				pointAttr.hover.stroke = Highcharts.pick(states.hover.edgeColor, this.borderColor);
+				pointAttr.select.stroke = Highcharts.pick(states.select.edgeColor, this.borderColor);
+			}
 		});
 	}
 
@@ -1108,7 +1137,8 @@ Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function (pro
 });
 
 Highcharts.wrap(Highcharts.seriesTypes.pie.prototype.pointClass.prototype, 'haloPath', function (proceed) {
-	return this.series.chart.is3d() ? [] : proceed.call(this);
+	var args = arguments;
+	return this.series.chart.is3d() ? [] : proceed.call(this, args[1]);
 });
 
 Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'drawPoints', function (proceed) {
@@ -1119,6 +1149,7 @@ Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'drawPoints', function (pr
 
 		// Set the border color to the fill color to provide a smooth edge
 		this.borderWidth = options.borderWidth = options.edgeWidth || 1;
+		this.borderColor = options.edgeColor = Highcharts.pick(options.edgeColor, options.borderColor, undefined);
 
 		states.hover.borderColor = Highcharts.pick(states.hover.edgeColor, this.borderColor);		
 		states.hover.borderWidth = Highcharts.pick(states.hover.edgeWidth, this.borderWidth);	

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

@@ -2,7 +2,7 @@
 // @compilation_level SIMPLE_OPTIMIZATIONS
 
 /**
- * @license Highcharts JS v4.0.3 (2014-07-03)
+ * @license Highcharts JS v4.0.4 (2014-09-02)
  *
  * (c) 2009-2014 Torstein Honsi
  *
@@ -1671,11 +1671,10 @@ seriesTypes.waterfall = extendClass(seriesTypes.column, {
 	 */
 	toYData: function (pt) {
 		if (pt.isSum) {
-			return "sum";
+			return (pt.x === 0 ? null : "sum"); //#3245 Error when first element is Sum or Intermediate Sum
 		} else if (pt.isIntermediateSum) {
-			return "intermediateSum";
+			return (pt.x === 0 ? null : "intermediateSum"); //#3245
 		}
-
 		return pt.y;
 	},
 

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

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

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

@@ -32,6 +32,11 @@
  * 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 
@@ -60,7 +65,8 @@
  * 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.
+ * 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.
@@ -69,6 +75,10 @@
  * - 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. 
  *
@@ -84,13 +94,23 @@
  * 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 */
+/*global jQuery, HighchartsAdapter */
 
 (function (Highcharts) { // docs
 	
 	// Utilities
-	var each = Highcharts.each;
+	var each = Highcharts.each,
+		inArray = HighchartsAdapter.inArray,
+		splat = Highcharts.splat,
+		SeriesBuilder;
 	
 	
 	// The Data constructor
@@ -109,6 +129,12 @@
 		this.chartOptions = chartOptions;
 		this.columns = options.columns || this.rowsToColumns(options.rows) || [];
 
+		// This is a two-dimensional array holding the raw, trimmed string values
+		// with the same organisation as the columns array. It makes it possible
+		// for example to revert from interpreted timestamps to string-based
+		// categories.
+		this.rawColumns = [];
+
 		// No need to parse or interpret anything
 		if (this.columns.length) {
 			this.dataFound();
@@ -135,19 +161,79 @@
 	 */
 	getColumnDistribution: function () {
 		var chartOptions = this.chartOptions,
+			options = this.options,
+			xColumns = [],
 			getValueCount = function (type) {
 				return (Highcharts.seriesTypes[type || 'line'].prototype.pointArrayMap || [0]).length;
 			},
+			getPointArrayMap = function (type) {
+				return Highcharts.seriesTypes[type || 'line'].prototype.pointArrayMap;
+			},
 			globalType = chartOptions && chartOptions.chart && chartOptions.chart.type,
-			individualCounts = [];
+			individualCounts = [],
+			seriesBuilders = [],
+			seriesIndex,
+			i;
 
 		each((chartOptions && chartOptions.series) || [], function (series) {
 			individualCounts.push(getValueCount(series.type || globalType));
 		});
 
+		// Collect the x-column indexes from seriesMapping
+		each((options && options.seriesMapping) || [], function (mapping) {
+			xColumns.push(mapping.x || 0);
+		});
+
+		// If there are no defined series with x-columns, use the first column as x column
+		if (xColumns.length === 0) {
+			xColumns.push(0);
+		}
+
+		// Loop all seriesMappings and constructs SeriesBuilders from
+		// the mapping options.
+		each((options && options.seriesMapping) || [], function (mapping) {
+			var builder = new SeriesBuilder(),
+				name,
+				numberOfValueColumnsNeeded = individualCounts[seriesIndex] || getValueCount(globalType),
+				seriesArr = (chartOptions && chartOptions.series) || [],
+				series = seriesArr[seriesIndex] || {},
+				pointArrayMap = getPointArrayMap(series.type || globalType) || ['y'];
+
+			// Add an x reader from the x property or from an undefined column
+			// if the property is not set. It will then be auto populated later.
+			builder.addColumnReader(mapping.x, 'x');
+
+			// Add all column mappings
+			for (name in mapping) {
+				if (mapping.hasOwnProperty(name) && name !== 'x') {
+					builder.addColumnReader(mapping[name], name);
+				}
+			}
+
+			// Add missing columns
+			for (i = 0; i < numberOfValueColumnsNeeded; i++) {
+				if (!builder.hasReader(pointArrayMap[i])) {
+					//builder.addNextColumnReader(pointArrayMap[i]);
+					// Create and add a column reader for the next free column index
+					builder.addColumnReader(undefined, pointArrayMap[i]);
+				}
+			}
+
+			seriesBuilders.push(builder);
+			seriesIndex++;
+		});
+
+		var globalPointArrayMap = getPointArrayMap(globalType);
+		if (globalPointArrayMap === undefined) {
+			globalPointArrayMap = ['y'];
+		}
+
 		this.valueCount = {
 			global: getValueCount(globalType),
-			individual: individualCounts
+			xColumns: xColumns,
+			individual: individualCounts,
+			seriesBuilders: seriesBuilders,
+			globalPointArrayMap: globalPointArrayMap
 		};
 	},
 
@@ -161,6 +247,9 @@
 			this.columns = this.rowsToColumns(this.columns);
 		}
 
+		// Interpret the info about series and columns
+		this.getColumnDistribution();
+
 		// Interpret the values into right types
 		this.parseTypes();
 		
@@ -168,10 +257,11 @@
 		this.findHeaderRow();
 		
 		// Handle columns if a handleColumns callback is given
-		this.parsed();
+		if (this.parsed() !== false) {
 		
-		// Complete if a complete callback is given
-		this.complete();
+			// Complete if a complete callback is given
+			this.complete();
+		}
 		
 	},
 	
@@ -338,11 +428,11 @@
 	findHeaderRow: function () {
 		var headerRow = 0;
 		each(this.columns, function (column) {
-			if (typeof column[0] !== 'string') {
+			if (column.isNumeric && typeof column[0] !== 'string') {
 				headerRow = null;
 			}
 		});
-		this.headerRow = 0;
+		this.headerRow = headerRow;
 	},
 	
 	/**
@@ -357,22 +447,37 @@
 	 */
 	parseTypes: function () {
 		var columns = this.columns,
+			rawColumns = this.rawColumns, 
 			col = columns.length, 
 			row,
 			val,
 			floatVal,
 			trimVal,
-			dateVal;
-			
+			isXColumn,
+			dateVal,
+			descending,
+			backup = [],
+			diff,
+			hasHeaderRow,
+			forceCategory,
+			chartOptions = this.chartOptions;
+
 		while (col--) {
 			row = columns[col].length;
+			rawColumns[col] = [];
+			isXColumn = inArray(col, this.valueCount.xColumns) !== -1;
+			forceCategory = isXColumn && chartOptions && chartOptions.xAxis && splat(chartOptions.xAxis)[0].type === 'category';
 			while (row--) {
-				val = columns[col][row];
+				val = backup[row] || columns[col][row];
 				floatVal = parseFloat(val);
-				trimVal = this.trim(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*/
-				if (trimVal == floatVal) { // is numeric
+				} else if (trimVal == floatVal) { // is numeric
 				/*jslint eqeq: false*/
 					columns[col][row] = floatVal;
 					
@@ -385,16 +490,56 @@
 				
 				} else { // string, continue to determine if it is a date string or really a string
 					dateVal = this.parseDate(val);
-					
-					if (col === 0 && typeof dateVal === 'number' && !isNaN(dateVal)) { // is date
+					// 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;
+								}
+							}
+							descending = diff;
+						}
 					
 					} else { // string
 						columns[col][row] = trimVal === '' ? null : trimVal;
+						if (row !== 0 && (columns[col].isDatetime || columns[col].isNumeric)) {
+							columns[col].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 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';
+			for (col = 0; col < columns.length; col++) {
+				columns[col].reverse();
+				if (hasHeaderRow) {
+					columns[col].unshift(columns[col].pop());
+				}
 			}
 		}
 	},
@@ -405,10 +550,37 @@
 	 */
 	dateFormats: {
 		'YYYY-mm-dd': {
-			regex: '^([0-9]{4})-([0-9]{2})-([0-9]{2})$',
+			regex: /^([0-9]{4})[\-\/\.]([0-9]{2})[\-\/\.]([0-9]{2})$/,
 			parser: function (match) {
 				return Date.UTC(+match[1], match[2] - 1, +match[3]);
 			}
+		},
+		'dd/mm/YYYY': {
+			regex: /^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{4})$/,
+			parser: function (match) {
+				return Date.UTC(+match[3], match[2] - 1, +match[1]);
+			},
+			alternative: 'mm/dd/YYYY' // different format with the same regex
+		},
+		'mm/dd/YYYY': {
+			regex: /^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{4})$/,
+			parser: function (match) {
+				return Date.UTC(+match[3], match[1] - 1, +match[2]);
+			}
+		},
+		'dd/mm/YY': {
+			regex: /^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{2})$/,
+			parser: function (match) {
+				return Date.UTC(+match[3] + 2000, match[2] - 1, +match[1]);
+			},
+			alternative: 'mm/dd/YY' // different format with the same regex
+		},
+		'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]);
+			}
 		}
 	},
 	
@@ -420,20 +592,47 @@
 			ret,
 			key,
 			format,
+			dateFormat = this.options.dateFormat || this.dateFormat,
 			match;
 
 		if (parseDate) {
 			ret = parseDate(val);
 		}
-			
+		
 		if (typeof val === 'string') {
-			for (key in this.dateFormats) {
-				format = this.dateFormats[key];
+			// Auto-detect the date format the first time
+			if (!dateFormat) {
+				for (key in this.dateFormats) {
+					format = this.dateFormats[key];
+					match = val.match(format.regex);
+					if (match) {
+						this.dateFormat = dateFormat = key;
+						this.alternativeFormat = format.alternative;
+						ret = format.parser(match);
+						break;
+					}
+				}
+			// Next time, use the one previously found
+			} else {
+				format = this.dateFormats[dateFormat];
 				match = val.match(format.regex);
 				if (match) {
 					ret = format.parser(match);
 				}
 			}
+			// Fall back to Date.parse		
+			if (!match) {
+				match = Date.parse(val);
+				// External tools like Date.js and MooTools extend Date object and
+				// returns a date.
+				if (typeof match === 'object' && match !== null && match.getTime) {
+					ret = match.getTime() - match.getTimezoneOffset() * 60000;
+				
+				// Timestamp
+				} else if (typeof match === 'number' && !isNaN(match)) {
+					ret = match - (new Date(match)).getTimezoneOffset() * 60000;
+				}
+			}
 		}
 		return ret;
 	},
@@ -469,9 +668,40 @@
 	 */
 	parsed: function () {
 		if (this.options.parsed) {
-			this.options.parsed.call(this, this.columns);
+			return this.options.parsed.call(this, this.columns);
 		}
 	},
+
+	getFreeIndexes: function (numberOfColumns, seriesBuilders) {
+		var s,
+			i,
+			freeIndexes = [],
+			freeIndexValues = [],
+			referencedIndexes;
+
+		// Add all columns as free
+		for (i = 0; i < numberOfColumns; i = i + 1) {
+			freeIndexes.push(true);
+		}
+
+		// Loop all defined builders and remove their referenced columns
+		for (s = 0; s < seriesBuilders.length; s = s + 1) {
+			referencedIndexes = seriesBuilders[s].getReferencedColumnIndexes();
+
+			for (i = 0; i < referencedIndexes.length; i = i + 1) {
+				freeIndexes[referencedIndexes[i]] = false;
+			}
+		}
+
+		// Collect the values for the free indexes
+		for (i = 0; i < freeIndexes.length; i = i + 1) {
+			if (freeIndexes[i]) {
+				freeIndexValues.push(i);
+			}
+		}
+
+		return freeIndexValues;
+	},
 	
 	/**
 	 * If a complete callback function is provided in the options, interpret the 
@@ -480,36 +710,24 @@
 	complete: function () {
 		
 		var columns = this.columns,
-			firstCol,
+			xColumns = [],
 			type,
 			options = this.options,
-			valueCount,
 			series,
 			data,
 			i,
 			j,
+			r,
 			seriesIndex,
-			chartOptions;
-			
-		
-		if (options.complete || options.afterComplete) {
+			chartOptions,
+			allSeriesBuilders = [],
+			builder,
+			freeIndexes,
+			typeCol,
+			index;
 
-			this.getColumnDistribution();
-			
-			// Use first column for X data or categories?
-			if (columns.length > 1) {
-				firstCol = columns.shift();
-				if (this.headerRow === 0) {
-					firstCol.shift(); // remove the first cell
-				}
-				
-				
-				if (firstCol.isDatetime) {
-					type = 'datetime';
-				} else if (!firstCol.isNumeric) {
-					type = 'category';
-				}
-			}
+		xColumns.length = columns.length;
+		if (options.complete || options.afterComplete) {
 
 			// Get the names and shift the top row
 			for (i = 0; i < columns.length; i++) {
@@ -520,46 +738,84 @@
 			
 			// Use the next columns for series
 			series = [];
-			for (i = 0, seriesIndex = 0; i < columns.length; seriesIndex++) {
+			freeIndexes = this.getFreeIndexes(columns.length, this.valueCount.seriesBuilders);
+
+			// Populate defined series
+			for (seriesIndex = 0; seriesIndex < this.valueCount.seriesBuilders.length; seriesIndex++) {
+				builder = this.valueCount.seriesBuilders[seriesIndex];
 
-				// This series' value count
-				valueCount = Highcharts.pick(this.valueCount.individual[seriesIndex], this.valueCount.global);
+				// If the builder can be populated with remaining columns, then add it to allBuilders
+				if (builder.populateColumns(freeIndexes)) {
+					allSeriesBuilders.push(builder);
+				}
+			}
+
+			// Populate dynamic series
+			while (freeIndexes.length > 0) {
+				builder = new SeriesBuilder();
+				builder.addColumnReader(0, 'x');
 				
-				// Iterate down the cells of each column and add data to the series
-				data = [];
+				// Mark index as used (not free)
+				index = inArray(0, freeIndexes);
+				if (index !== -1) {
+					freeIndexes.splice(index, 1);
+				}
 
-				// Only loop and fill the data series if there are columns available.
-				// We need this check to avoid reading outside the array bounds.
-				if (i + valueCount <= columns.length) {
-					for (j = 0; j < columns[i].length; j++) {
-						data[j] = [
-							firstCol[j],
-							columns[i][j] !== undefined ? columns[i][j] : null
-						];
-						if (valueCount > 1) {
-							data[j].push(columns[i + 1][j] !== undefined ? columns[i + 1][j] : null);
-						}
-						if (valueCount > 2) {
-							data[j].push(columns[i + 2][j] !== undefined ? columns[i + 2][j] : null);
-						}
-						if (valueCount > 3) {
-							data[j].push(columns[i + 3][j] !== undefined ? columns[i + 3][j] : null);
-						}
-						if (valueCount > 4) {
-							data[j].push(columns[i + 4][j] !== undefined ? columns[i + 4][j] : null);
+				for (i = 0; i < this.valueCount.global; i++) {
+					// Create and add a column reader for the next free column index
+					builder.addColumnReader(undefined, this.valueCount.globalPointArrayMap[i]);
+				}
+
+				// If the builder can be populated with remaining columns, then add it to allBuilders
+				if (builder.populateColumns(freeIndexes)) {
+					allSeriesBuilders.push(builder);
+				}
+			}
+
+			// Get the data-type from the first series x column
+			if (allSeriesBuilders.length > 0 && allSeriesBuilders[0].readers.length > 0) {
+				typeCol = columns[allSeriesBuilders[0].readers[0].columnIndex];
+				if (typeCol !== undefined) {
+					if (typeCol.isDatetime) {
+						type = 'datetime';
+					} else if (!typeCol.isNumeric) {
+						type = 'category';
+					}
+				}
+			}
+			// Axis type is category, then the "x" column should be called "name"
+			if (type === 'category') {
+				for (seriesIndex = 0; seriesIndex < allSeriesBuilders.length; seriesIndex++) {
+					builder = allSeriesBuilders[seriesIndex];
+					for (r = 0; r < builder.readers.length; r++) {
+						if (builder.readers[r].configName === 'x') {
+							builder.readers[r].configName = 'name';
 						}
 					}
 				}
+			}
+
+			// Read data for all builders
+			for (seriesIndex = 0; seriesIndex < allSeriesBuilders.length; seriesIndex++) {
+				builder = allSeriesBuilders[seriesIndex];
+
+				// Iterate down the cells of each column and add data to the series
+				data = [];
+				for (j = 0; j < columns[0].length; j++) { // TODO: which column's length should we use here
+					data[j] = builder.read(columns, j);
+				}
 
 				// Add the series
 				series[seriesIndex] = {
-					name: columns[i].name,
 					data: data
 				};
-
-				i += valueCount;
+				if (builder.name) {
+					series[seriesIndex].name = builder.name;
+				}
 			}
-			
+
+
+
 			// Do the callback
 			chartOptions = {
 				xAxis: {
@@ -570,6 +826,7 @@
 			if (options.complete) {
 				options.complete(chartOptions);
 			}
+
 			// The afterComplete hook is used internally to avoid conflict with the externally
 			// available complete option.
 			if (options.afterComplete) {
@@ -592,6 +849,7 @@
 
 		if (userOptions && userOptions.data) {
 			Highcharts.data(Highcharts.extend(userOptions.data, {
+
 				afterComplete: function (dataOptions) {
 					var i, series;
 					
@@ -619,4 +877,149 @@
 		}
 	});
 
+	/**
+	 * Creates a new SeriesBuilder. A SeriesBuilder consists of a number
+	 * of ColumnReaders that reads columns and give them a name.
+	 * Ex: A series builder can be constructed to read column 3 as 'x' and
+	 * column 7 and 8 as 'y1' and 'y2'.
+	 * The output would then be points/rows of the form {x: 11, y1: 22, y2: 33}
+	 * 
+	 * The name of the builder is taken from the second column. In the above
+	 * example it would be the column with index 7.
+	 * @constructor
+	 */
+	SeriesBuilder = function () {
+		this.readers = [];
+		this.pointIsArray = true;
+	};
+
+	/**
+	 * Populates readers with column indexes. A reader can be added without
+	 * a specific index and for those readers the index is taken sequentially
+	 * from the free columns (this is handled by the ColumnCursor instance).
+	 * @returns {boolean}
+	 */
+	SeriesBuilder.prototype.populateColumns = function (freeIndexes) {
+		var builder = this,
+			enoughColumns = true;
+
+		// Loop each reader and give it an index if its missing.
+		// The freeIndexes.shift() will return undefined if there
+		// are no more columns.
+		each(builder.readers, function (reader) {
+			if (reader.columnIndex === undefined) {
+				reader.columnIndex = freeIndexes.shift();
+			}
+		});
+
+		// Now, all readers should have columns mapped. If not
+		// then return false to signal that this series should
+		// not be added.
+		each(builder.readers, function (reader) {
+			if (reader.columnIndex === undefined) {
+				enoughColumns = false;
+			}
+		});
+
+		return enoughColumns;
+	};
+
+	/**
+	 * Reads a row from the dataset and returns a point or array depending
+	 * on the names of the readers.
+	 * @param columns
+	 * @param rowIndex
+	 * @returns {Array | Object}
+	 */
+	SeriesBuilder.prototype.read = function (columns, rowIndex) {
+		var builder = this,
+			pointIsArray = builder.pointIsArray,
+			point = pointIsArray ? [] : {},
+			columnIndexes;
+
+		// Loop each reader and ask it to read its value.
+		// Then, build an array or point based on the readers names.
+		each(builder.readers, function (reader) {
+			var value = columns[reader.columnIndex][rowIndex];
+			if (pointIsArray) {
+				point.push(value);
+			} else {
+				point[reader.configName] = value; 
+			}
+		});
+
+		// The name comes from the first column (excluding the x column)
+		if (this.name === undefined && builder.readers.length >= 2) {
+			columnIndexes = builder.getReferencedColumnIndexes();
+			if (columnIndexes.length >= 2) {
+				// remove the first one (x col)
+				columnIndexes.shift();
+
+				// Sort the remaining
+				columnIndexes.sort();
+
+				// Now use the lowest index as name column
+				this.name = columns[columnIndexes.shift()].name;
+			}
+		}
+
+		return point;
+	};
+
+	/**
+	 * Creates and adds ColumnReader from the given columnIndex and configName.
+	 * ColumnIndex can be undefined and in that case the reader will be given
+	 * an index when columns are populated.
+	 * @param columnIndex {Number | undefined}
+	 * @param configName
+	 */
+	SeriesBuilder.prototype.addColumnReader = function (columnIndex, configName) {
+		this.readers.push({
+			columnIndex: columnIndex, 
+			configName: configName
+		});
+
+		if (!(configName === 'x' || configName === 'y' || configName === undefined)) {
+			this.pointIsArray = false;
+		}
+	};
+
+	/**
+	 * Returns an array of column indexes that the builder will use when
+	 * reading data.
+	 * @returns {Array}
+	 */
+	SeriesBuilder.prototype.getReferencedColumnIndexes = function () {
+		var i,
+			referencedColumnIndexes = [],
+			columnReader;
+		
+		for (i = 0; i < this.readers.length; i = i + 1) {
+			columnReader = this.readers[i];
+			if (columnReader.columnIndex !== undefined) {
+				referencedColumnIndexes.push(columnReader.columnIndex);
+			}
+		}
+
+		return referencedColumnIndexes;
+	};
+
+	/**
+	 * Returns true if the builder has a reader for the given configName.
+	 * @param configName
+	 * @returns {boolean}
+	 */
+	SeriesBuilder.prototype.hasReader = function (configName) {
+		var i, columnReader;
+		for (i = 0; i < this.readers.length; i = i + 1) {
+			columnReader = this.readers[i];
+			if (columnReader.configName === configName) {
+				return true;
+			}
+		}
+		// Else return undefined
+	};
+
+
+
 }(Highcharts));