Bar Attempt # 4

samples/bar.html

@@ -50,6 +50,8 @@
     	barChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
 
     	window.myBar.update();
+
+    	console.log(window.barChartData);
     });
 
 	</script>

src/Chart.Bar.js

@@ -75,8 +75,6 @@
 				}
 			});
 
-			this.datasets = [];
-
 			//Set up tooltip events on the chart
 			if (this.options.showTooltips){
 				helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
@@ -100,86 +98,68 @@
 				ctx : this.chart.ctx
 			});
 
-			//Iterate through each of the datasets, and build this into a property of the chart
-			helpers.each(data.datasets,function(dataset,datasetIndex){
-
-				var datasetObject = {
-					label : dataset.label || null,
-					fillColor : dataset.fillColor,
-					strokeColor : dataset.strokeColor,
-					bars : []
-				};
-
-				this.datasets.push(datasetObject);
-
+			//Create a new point for each piece of data
+			helpers.each(this.data.datasets,function(dataset,datasetIndex){
+				dataset.metaData = [];
 				helpers.each(dataset.data,function(dataPoint,index){
-					//Add a new point for each piece of data, passing any required data to draw.
-					datasetObject.bars.push(new this.BarClass({
-						value : dataPoint,
-						label : data.labels[index],
-						datasetLabel: dataset.label,
-						strokeColor : dataset.strokeColor,
-						fillColor : dataset.fillColor,
-						highlightFill : dataset.highlightFill || dataset.fillColor,
-						highlightStroke : dataset.highlightStroke || dataset.strokeColor
-					}));
+					dataset.metaData.push(new this.BarClass());
 				},this);
-
 			},this);
 
-			this.buildScale(data.labels);
-
-			this.BarClass.prototype.base = this.scale.endPoint;
 
 			this.eachBars(function(bar, index, datasetIndex){
 				helpers.extend(bar, {
-					width : this.scale.calculateBarWidth(this.datasets.length),
-					x: this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
-					y: this.scale.endPoint
+					value : this.data.datasets[datasetIndex].data[index],
+					label : this.data.labels[index],
+					datasetLabel: this.data.datasets[datasetIndex].label,
+					strokeColor : this.data.datasets[datasetIndex].strokeColor,
+					fillColor : this.data.datasets[datasetIndex].fillColor,
+					highlightFill : this.data.datasets[datasetIndex].highlightFill || this.data.datasets[datasetIndex].fillColor,
+					highlightStroke : this.data.datasets[datasetIndex].highlightStroke || this.data.datasets[datasetIndex].strokeColor
 				});
 				bar.save();
 			}, this);
 
+			this.buildScale(data.labels);
+			this.BarClass.prototype.base = this.scale.endPoint;
+
+			this.update();
+
 			this.render();
 		},
 		update : function(){
-			//Iterate through each of the datasets, and build this into a property of the chart
+
+			//Create a new point for each piece of data
 			helpers.each(this.data.datasets,function(dataset,datasetIndex){
-
-				helpers.extend(this.datasets[datasetIndex], {
-					label : dataset.label || null,
-					fillColor : dataset.fillColor,
-					strokeColor : dataset.strokeColor,
-				});
-
+				dataset.metaData = dataset.metaData || [];
 				helpers.each(dataset.data,function(dataPoint,index){
-					helpers.extend(this.datasets[datasetIndex].bars[index], {
-						value : dataPoint,
-						label : this.data.labels[index],
-						datasetLabel: dataset.label,
-						strokeColor : dataset.strokeColor,
-						fillColor : dataset.fillColor,
-						highlightFill : dataset.highlightFill || dataset.fillColor,
-						highlightStroke : dataset.highlightStroke || dataset.strokeColor
-					});
+					dataset.metaData[index] = dataset.metaData[index] || new this.BarClass();
 				},this);
-
 			},this);
 
-			this.scale.update();
-			// Reset any highlight colours before updating.
-			helpers.each(this.activeElements, function(activeElement){
-				activeElement.restore(['fillColor', 'strokeColor']);
-			});
-
-			this.eachBars(function(bar){
+			this.eachBars(function(bar, index, datasetIndex){
+				helpers.extend(bar, {
+					width : this.scale.calculateBarWidth(this.data.datasets.length),
+					x: this.scale.calculateBarX(this.data.datasets.length, datasetIndex, index),
+					y: this.scale.endPoint,
+					value : this.data.datasets[datasetIndex].data[index],
+					label : this.data.labels[index],
+					datasetLabel: this.data.datasets[datasetIndex].label,
+					strokeColor : this.data.datasets[datasetIndex].strokeColor,
+					fillColor : this.data.datasets[datasetIndex].fillColor,
+					highlightFill : this.data.datasets[datasetIndex].highlightFill || this.data.datasets[datasetIndex].fillColor,
+					highlightStroke : this.data.datasets[datasetIndex].highlightStroke || this.data.datasets[datasetIndex].strokeColor
+				});
 				bar.save();
-			});
+			}, this);
+
+			this.scale.update();
+
 			this.render();
 		},
 		eachBars : function(callback){
-			helpers.each(this.datasets,function(dataset, datasetIndex){
-				helpers.each(dataset.bars, callback, this, datasetIndex);
+			helpers.each(this.data.datasets,function(dataset, datasetIndex){
+				helpers.each(dataset.metaData, callback, this, datasetIndex);
 			},this);
 		},
 		getBarsAtEvent : function(e){
@@ -190,10 +170,10 @@
 				},
 				barIndex;
 
-			for (var datasetIndex = 0; datasetIndex < this.datasets.length; datasetIndex++) {
-				for (barIndex = 0; barIndex < this.datasets[datasetIndex].bars.length; barIndex++) {
-					if (this.datasets[datasetIndex].bars[barIndex].inRange(eventPosition.x,eventPosition.y)){
-						helpers.each(this.datasets, datasetIterator);
+			for (var datasetIndex = 0; datasetIndex < this.data.datasets.length; datasetIndex++) {
+				for (barIndex = 0; barIndex < this.data.datasets[datasetIndex].bars.length; barIndex++) {
+					if (this.data.datasets[datasetIndex].bars[barIndex].inRange(eventPosition.x,eventPosition.y)){
+						helpers.each(this.data.datasets, datasetIterator);
 						return barsArray;
 					}
 				}
@@ -263,16 +243,16 @@
 			//Map the values array for each of the datasets
 			helpers.each(valuesArray,function(value,datasetIndex){
 				//Add a new point for each piece of data, passing any required data to draw.
-				this.datasets[datasetIndex].bars.push(new this.BarClass({
+				this.data.datasets[datasetIndex].bars.push(new this.BarClass({
 					value : value,
 					label : label,
-					datasetLabel: this.datasets[datasetIndex].label,
-					x: this.scale.calculateBarX(this.datasets.length, datasetIndex, this.scale.valuesCount+1),
+					datasetLabel: this.data.datasets[datasetIndex].label,
+					x: this.scale.calculateBarX(this.data.datasets.length, datasetIndex, this.scale.valuesCount+1),
 					y: this.scale.endPoint,
-					width : this.scale.calculateBarWidth(this.datasets.length),
+					width : this.scale.calculateBarWidth(this.data.datasets.length),
 					base : this.scale.endPoint,
-					strokeColor : this.datasets[datasetIndex].strokeColor,
-					fillColor : this.datasets[datasetIndex].fillColor
+					strokeColor : this.data.datasets[datasetIndex].strokeColor,
+					fillColor : this.data.datasets[datasetIndex].fillColor
 				}));
 			},this);
 
@@ -283,7 +263,7 @@
 		removeData : function(){
 			this.scale.removeXLabel();
 			//Then re-render the chart.
-			helpers.each(this.datasets,function(dataset){
+			helpers.each(this.data.datasets,function(dataset){
 				dataset.bars.shift();
 			},this);
 			this.update();
@@ -308,20 +288,18 @@
 			this.scale.draw(easingDecimal);
 
 			//Draw all the bars for each dataset
-			helpers.each(this.datasets,function(dataset,datasetIndex){
-				helpers.each(dataset.bars,function(bar,index){
-					if (bar.hasValue()){
-						bar.base = this.scale.endPoint;
-						//Transition then draw
-						bar.transition({
-							x : this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
-							y : this.scale.calculateY(bar.value),
-							width : this.scale.calculateBarWidth(this.datasets.length)
-						}, easingDecimal).draw();
-					}
-				},this);
-
-			},this);
+			this.eachBars(function(bar, index, datasetIndex){
+				if (bar.hasValue()){
+					bar.base = this.scale.endPoint;
+					//Transition then draw
+					bar.transition({
+						x : this.scale.calculateBarX(this.data.datasets.length, datasetIndex, index),
+						y : this.scale.calculateY(bar.value),
+						width : this.scale.calculateBarWidth(this.data.datasets.length)
+					}, easingDecimal).draw();
+					bar.save();
+				}
+			}, this);
 		}
 	});
 

src/Chart.Core.js

@@ -466,7 +466,6 @@
 				numberOfSteps = minSteps;
 				stepValue = graphRange / numberOfSteps;
 			}
-
 			return {
 				steps : numberOfSteps,
 				stepValue : stepValue,
@@ -1021,12 +1020,12 @@
 			}
 			if (ChartElements.length > 0){
 				// If we have multiple datasets, show a MultiTooltip for all of the data points at that index
-				if (this.datasets && this.datasets.length > 1) {
+				if (this.data.datasets && this.data.datasets.length > 1) {
 					var dataArray,
 						dataIndex;
 
-					for (var i = this.datasets.length - 1; i >= 0; i--) {
-						dataArray = this.datasets[i].points || this.datasets[i].bars || this.datasets[i].segments;
+					for (var i = this.data.datasets.length - 1; i >= 0; i--) {
+						dataArray = this.data.datasets[i].points || this.data.datasets[i].bars || this.data.datasets[i].segments;
 						dataIndex = indexOf(dataArray, ChartElements[0]);
 						if (dataIndex !== -1){
 							break;
@@ -1045,7 +1044,7 @@
 								yMax,
 								xMin,
 								yMin;
-							helpers.each(this.datasets, function(dataset){
+							helpers.each(this.data.datasets, function(dataset){
 								dataCollection = dataset.points || dataset.bars || dataset.segments;
 								if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue()){
 									Elements.push(dataCollection[dataIndex]);
@@ -1060,8 +1059,8 @@
 								//Include any colour information about the element
 								tooltipLabels.push(helpers.template(this.options.multiTooltipTemplate, element));
 								tooltipColors.push({
-									fill: element._saved.fillColor || element.fillColor,
-									stroke: element._saved.strokeColor || element.strokeColor
+									fill: element._vm.fillColor || element.fillColor,
+									stroke: element._vm.strokeColor || element.strokeColor
 								});
 
 							}, this);
@@ -1182,29 +1181,29 @@
 		initialize : function(){},
 		restore : function(props){
 			if (!props){
-				extend(this,this._saved);
+				extend(this,this._vm);
 			} else {
 				each(props,function(key){
-					this[key] = this._saved[key];
+					this[key] = this._vm[key];
 				},this);
 			}
 			return this;
 		},
 		save : function(){
-			this._saved = clone(this);
-			delete this._saved._saved;
+			this._vm = clone(this);
+			delete this._vm._vm;
 			return this;
 		},
 		update : function(newProps){
 			each(newProps,function(value,key){
-				this._saved[key] = this[key];
+				this._vm[key] = this[key];
 				this[key] = value;
 			},this);
 			return this;
 		},
 		transition : function(props,ease){
 			each(props,function(value,key){
-				this[key] = ((value - this._saved[key]) * ease) + this._saved[key];
+				this._vm[key] = ((value - this._vm[key]) * ease) + this._vm[key];
 			},this);
 			return this;
 		},
@@ -1325,16 +1324,19 @@
 
 	Chart.Rectangle = Chart.Element.extend({
 		draw : function(){
+
+			var vm = this._vm;
+
 			var ctx = this.ctx,
-				halfWidth = this.width/2,
-				leftX = this.x - halfWidth,
-				rightX = this.x + halfWidth,
-				top = this.base - (this.base - this.y),
-				halfStroke = this.strokeWidth / 2;
+				halfWidth = vm.width/2,
+				leftX = vm.x - halfWidth,
+				rightX = vm.x + halfWidth,
+				top = this.base - (this.base - vm.y),
+				halfStroke = vm.strokeWidth / 2;
 
 			// Canvas doesn't allow us to stroke inside the width so we can
 			// adjust the sizes to fit if we're setting a stroke on the line
-			if (this.showStroke){
+			if (vm.showStroke){
 				leftX += halfStroke;
 				rightX -= halfStroke;
 				top += halfStroke;
@@ -1342,9 +1344,9 @@
 
 			ctx.beginPath();
 
-			ctx.fillStyle = this.fillColor;
-			ctx.strokeStyle = this.strokeColor;
-			ctx.lineWidth = this.strokeWidth;
+			ctx.fillStyle = vm.fillColor;
+			ctx.strokeStyle = vm.strokeColor;
+			ctx.lineWidth = vm.strokeWidth;
 
 			// It'd be nice to keep this class totally generic to any rectangle
 			// and simply specify which border to miss out.
@@ -1353,15 +1355,15 @@
 			ctx.lineTo(rightX, top);
 			ctx.lineTo(rightX, this.base);
 			ctx.fill();
-			if (this.showStroke){
+			if (vm.showStroke){
 				ctx.stroke();
 			}
 		},
 		height : function(){
-			return this.base - this.y;
+			return this.base - vm.y;
 		},
 		inRange : function(chartX,chartY){
-			return (chartX >= this.x - this.width/2 && chartX <= this.x + this.width/2) && (chartY >= this.y && chartY <= this.base);
+			return (chartX >= vm.x - vm.width/2 && chartX <= vm.x + vm.width/2) && (chartY >= vm.y && chartY <= this.base);
 		}
 	});