chart-js-rails 0.0.3 → 0.0.4

data/lib/chart-js-rails/version.rb

@@ -1,7 +1,7 @@
 module Chart
   module Js
     module Rails
-      VERSION = "0.0.3"
+      VERSION = "0.0.4"
     end
   end
 end

data/vendor/assets/javascripts/chart.js

@@ -8,14 +8,14 @@
  */
 
 //Define the global Chart Variable as a class.
-var Chart = function(context){
+window.Chart = function(context){
 
 	var chart = this;
-	
-	
+
+
 	//Easing functions adapted from Robert Penner's easing equations
 	//http://www.robertpenner.com/easing/
-	
+
 	var animationOptions = {
 		linear : function (t){
 			return t;
@@ -123,7 +123,7 @@ var Chart = function(context){
 			return 1*((t=t/1-1)*t*((s+1)*t + s) + 1);
 		},
 		easeInOutBack: function (t) {
-			var s = 1.70158; 
+			var s = 1.70158;
 			if ((t/=1/2) < 1) return 1/2*(t*t*(((s*=(1.525))+1)*t - s));
 			return 1/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2);
 		},
@@ -162,7 +162,7 @@ var Chart = function(context){
 	}
 
 	this.PolarArea = function(data,options){
-	
+
 		chart.PolarArea.defaults = {
 			scaleOverlay : true,
 			scaleOverride : false,
@@ -192,14 +192,14 @@ var Chart = function(context){
 			animateScale : false,
 			onAnimationComplete : null
 		};
-		
+
 		var config = (options)? mergeChartConfig(chart.PolarArea.defaults,options) : chart.PolarArea.defaults;
-		
+
 		return new PolarArea(data,config,context);
 	};
 
 	this.Radar = function(data,options){
-	
+
 		chart.Radar.defaults = {
 			scaleOverlay : false,
 			scaleOverride : false,
@@ -221,7 +221,7 @@ var Chart = function(context){
 			scaleBackdropPaddingX : 2,
 			angleShowLineOut : true,
 			angleLineColor : "rgba(0,0,0,.1)",
-			angleLineWidth : 1,			
+			angleLineWidth : 1,
 			pointLabelFontFamily : "'Arial'",
 			pointLabelFontStyle : "normal",
 			pointLabelFontSize : 12,
@@ -237,12 +237,12 @@ var Chart = function(context){
 			animationEasing : "easeOutQuart",
 			onAnimationComplete : null
 		};
-		
+
 		var config = (options)? mergeChartConfig(chart.Radar.defaults,options) : chart.Radar.defaults;
 
 		return new Radar(data,config,context);
 	};
-	
+
 	this.Pie = function(data,options){
 		chart.Pie.defaults = {
 			segmentShowStroke : true,
@@ -254,15 +254,15 @@ var Chart = function(context){
 			animateRotate : true,
 			animateScale : false,
 			onAnimationComplete : null
-		};		
+		};
 
 		var config = (options)? mergeChartConfig(chart.Pie.defaults,options) : chart.Pie.defaults;
-		
-		return new Pie(data,config,context);				
+
+		return new Pie(data,config,context);
 	};
-	
+
 	this.Doughnut = function(data,options){
-	
+
 		chart.Doughnut.defaults = {
 			segmentShowStroke : true,
 			segmentStrokeColor : "#fff",
@@ -274,16 +274,16 @@ var Chart = function(context){
 			animateRotate : true,
 			animateScale : false,
 			onAnimationComplete : null
-		};		
+		};
 
 		var config = (options)? mergeChartConfig(chart.Doughnut.defaults,options) : chart.Doughnut.defaults;
-		
-		return new Doughnut(data,config,context);			
-		
+
+		return new Doughnut(data,config,context);
+
 	};
 
 	this.Line = function(data,options){
-	
+
 		chart.Line.defaults = {
 			scaleOverlay : false,
 			scaleOverride : false,
@@ -312,12 +312,12 @@ var Chart = function(context){
 			animationSteps : 60,
 			animationEasing : "easeOutQuart",
 			onAnimationComplete : null
-		};		
+		};
 		var config = (options) ? mergeChartConfig(chart.Line.defaults,options) : chart.Line.defaults;
-		
+
 		return new Line(data,config,context);
 	}
-	
+
 	this.Bar = function(data,options){
 		chart.Bar.defaults = {
 			scaleOverlay : false,
@@ -344,29 +344,29 @@ var Chart = function(context){
 			animationSteps : 60,
 			animationEasing : "easeOutQuart",
 			onAnimationComplete : null
-		};		
+		};
 		var config = (options) ? mergeChartConfig(chart.Bar.defaults,options) : chart.Bar.defaults;
-		
-		return new Bar(data,config,context);		
+
+		return new Bar(data,config,context);
 	}
-	
+
 	var clear = function(c){
 		c.clearRect(0, 0, width, height);
 	};
 
 	var PolarArea = function(data,config,ctx){
-		var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString;		
-		
-		
+		var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString;
+
+
 		calculateDrawingSizes();
-		
+
 		valueBounds = getValueBounds();
 
 		labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : null;
 
 		//Check and set the scale
 		if (!config.scaleOverride){
-			
+
 			calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
 		}
 		else {
@@ -376,13 +376,9 @@ var Chart = function(context){
 				graphMin : config.scaleStartValue,
 				labels : []
 			}
-			for (var i=0; i<calculatedScale.steps; i++){
-				if(labelTemplateString){
-				calculatedScale.labels.push(tmpl(labelTemplateString,{value:(config.scaleStartValue + (config.scaleStepWidth * i)).toFixed(getDecimalPlaces (config.scaleStepWidth))}));
-				}
-			}
+			populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth);
 		}
-		
+
 		scaleHop = maxSize/(calculatedScale.steps);
 
 		//Wrap in an animation loop wrapper
@@ -391,16 +387,16 @@ var Chart = function(context){
 		function calculateDrawingSizes(){
 			maxSize = (Min([width,height])/2);
 			//Remove whatever is larger - the font size or line width.
-			
+
 			maxSize -= Max([config.scaleFontSize*0.5,config.scaleLineWidth*0.5]);
-			
+
 			labelHeight = config.scaleFontSize*2;
 			//If we're drawing the backdrop - add the Y padding to the label height and remove from drawing region.
 			if (config.scaleShowLabelBackdrop){
 				labelHeight += (2 * config.scaleBackdropPaddingY);
 				maxSize -= config.scaleBackdropPaddingY*1.5;
 			}
-			
+
 			scaleHeight = maxSize;
 			//If the label height is less than 5, set it to 5 so we don't have lines on top of each other.
 			labelHeight = Default(labelHeight,5);
@@ -480,24 +476,24 @@ var Chart = function(context){
 
 			var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66)));
 			var minSteps = Math.floor((scaleHeight / labelHeight*0.5));
-			
+
 			return {
 				maxValue : upperValue,
 				minValue : lowerValue,
 				maxSteps : maxSteps,
 				minSteps : minSteps
 			};
-			
+
 
 		}
 	}
 
 	var Radar = function (data,config,ctx) {
-		var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString;	
-			
+		var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString;
+
 		//If no labels are defined set to an empty array, so referencing length for looping doesn't blow up.
 		if (!data.labels) data.labels = [];
-		
+
 		calculateDrawingSizes();
 
 		var valueBounds = getValueBounds();
@@ -506,7 +502,7 @@ var Chart = function(context){
 
 		//Check and set the scale
 		if (!config.scaleOverride){
-			
+
 			calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
 		}
 		else {
@@ -516,17 +512,13 @@ var Chart = function(context){
 				graphMin : config.scaleStartValue,
 				labels : []
 			}
-			for (var i=0; i<calculatedScale.steps; i++){
-				if(labelTemplateString){
-				calculatedScale.labels.push(tmpl(labelTemplateString,{value:(config.scaleStartValue + (config.scaleStepWidth * i)).toFixed(getDecimalPlaces (config.scaleStepWidth))}));
-				}
-			}
+			populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth);
 		}
-		
+
 		scaleHop = maxSize/(calculatedScale.steps);
-		
+
 		animationLoop(config,drawScale,drawAllDataPoints,ctx);
-		
+
 		//Radar specific functions.
 		function drawAllDataPoints(animationDecimal){
 			var rotationDegree = (2*Math.PI)/data.datasets[0].data.length;
@@ -534,27 +526,27 @@ var Chart = function(context){
 			ctx.save();
 			//translate to the centre of the canvas.
 			ctx.translate(width/2,height/2);
-			
+
 			//We accept multiple data sets for radar charts, so show loop through each set
 			for (var i=0; i<data.datasets.length; i++){
 				ctx.beginPath();
 
 				ctx.moveTo(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[0],calculatedScale,scaleHop)));
 				for (var j=1; j<data.datasets[i].data.length; j++){
-					ctx.rotate(rotationDegree);	
+					ctx.rotate(rotationDegree);
 					ctx.lineTo(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop)));
-			
+
 				}
 				ctx.closePath();
-				
-				
+
+
 				ctx.fillStyle = data.datasets[i].fillColor;
 				ctx.strokeStyle = data.datasets[i].strokeColor;
 				ctx.lineWidth = config.datasetStrokeWidth;
 				ctx.fill();
 				ctx.stroke();
-				
-								
+
+
 				if (config.pointDot){
 					ctx.fillStyle = data.datasets[i].pointColor;
 					ctx.strokeStyle = data.datasets[i].pointStrokeColor;
@@ -565,26 +557,26 @@ var Chart = function(context){
 						ctx.arc(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[k],calculatedScale,scaleHop)),config.pointDotRadius,2*Math.PI,false);
 						ctx.fill();
 						ctx.stroke();
-					}					
-					
+					}
+
 				}
 				ctx.rotate(rotationDegree);
-				
+
 			}
 			ctx.restore();
-			
-			
+
+
 		}
 		function drawScale(){
 			var rotationDegree = (2*Math.PI)/data.datasets[0].data.length;
 			ctx.save();
-		    ctx.translate(width / 2, height / 2);	
-			
+		    ctx.translate(width / 2, height / 2);
+
 			if (config.angleShowLineOut){
-				ctx.strokeStyle = config.angleLineColor;		    	    
+				ctx.strokeStyle = config.angleLineColor;
 				ctx.lineWidth = config.angleLineWidth;
 				for (var h=0; h<data.datasets[0].data.length; h++){
-					
+
 				    ctx.rotate(rotationDegree);
 					ctx.beginPath();
 					ctx.moveTo(0,0);
@@ -595,25 +587,25 @@ var Chart = function(context){
 
 			for (var i=0; i<calculatedScale.steps; i++){
 				ctx.beginPath();
-				
+
 				if(config.scaleShowLine){
 					ctx.strokeStyle = config.scaleLineColor;
 					ctx.lineWidth = config.scaleLineWidth;
-					ctx.moveTo(0,-scaleHop * (i+1));					
+					ctx.moveTo(0,-scaleHop * (i+1));
 					for (var j=0; j<data.datasets[0].data.length; j++){
 					    ctx.rotate(rotationDegree);
 						ctx.lineTo(0,-scaleHop * (i+1));
 					}
 					ctx.closePath();
-					ctx.stroke();			
-							
+					ctx.stroke();
+
 				}
-				
-				if (config.scaleShowLabels){				
+
+				if (config.scaleShowLabels){
 					ctx.textAlign = 'center';
-					ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily; 
+					ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily;
 					ctx.textBaseline = "middle";
-					
+
 					if (config.scaleShowLabelBackdrop){
 						var textWidth = ctx.measureText(calculatedScale.labels[i]).width;
 						ctx.fillStyle = config.scaleBackdropColor;
@@ -625,18 +617,18 @@ var Chart = function(context){
 							Math.round(config.scaleFontSize + (config.scaleBackdropPaddingY*2)) //Height
 						);
 						ctx.fill();
-					}						
+					}
 					ctx.fillStyle = config.scaleFontColor;
 					ctx.fillText(calculatedScale.labels[i],0,-scaleHop*(i+1));
 				}
 
 			}
-			for (var k=0; k<data.labels.length; k++){				
+			for (var k=0; k<data.labels.length; k++){
 			ctx.font = config.pointLabelFontStyle + " " + config.pointLabelFontSize+"px " + config.pointLabelFontFamily;
 			ctx.fillStyle = config.pointLabelFontColor;
 				var opposite = Math.sin(rotationDegree*k) * (maxSize + config.pointLabelFontSize);
 				var adjacent = Math.cos(rotationDegree*k) * (maxSize + config.pointLabelFontSize);
-				
+
 				if(rotationDegree*k == Math.PI || rotationDegree*k == 0){
 					ctx.textAlign = "center";
 				}
@@ -646,11 +638,11 @@ var Chart = function(context){
 				else{
 					ctx.textAlign = "left";
 				}
-				
+
 				ctx.textBaseline = "middle";
-				
+
 				ctx.fillText(data.labels[k],opposite,-adjacent);
-				
+
 			}
 			ctx.restore();
 		};
@@ -658,17 +650,17 @@ var Chart = function(context){
 			maxSize = (Min([width,height])/2);
 
 			labelHeight = config.scaleFontSize*2;
-			
+
 			var labelLength = 0;
 			for (var i=0; i<data.labels.length; i++){
 				ctx.font = config.pointLabelFontStyle + " " + config.pointLabelFontSize+"px " + config.pointLabelFontFamily;
 				var textMeasurement = ctx.measureText(data.labels[i]).width;
 				if(textMeasurement>labelLength) labelLength = textMeasurement;
 			}
-			
+
 			//Figure out whats the largest - the height of the text or the width of what's there, and minus it from the maximum usable size.
-			maxSize -= Max([labelLength,((config.pointLabelFontSize/2)*1.5)]);				
-			
+			maxSize -= Max([labelLength,((config.pointLabelFontSize/2)*1.5)]);
+
 			maxSize -= config.pointLabelFontSize;
 			maxSize = CapValue(maxSize, null, 0);
 			scaleHeight = maxSize;
@@ -678,7 +670,7 @@ var Chart = function(context){
 		function getValueBounds() {
 			var upperValue = Number.MIN_VALUE;
 			var lowerValue = Number.MAX_VALUE;
-			
+
 			for (var i=0; i<data.datasets.length; i++){
 				for (var j=0; j<data.datasets[i].data.length; j++){
 					if (data.datasets[i].data[j] > upperValue){upperValue = data.datasets[i].data[j]}
@@ -688,31 +680,31 @@ var Chart = function(context){
 
 			var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66)));
 			var minSteps = Math.floor((scaleHeight / labelHeight*0.5));
-			
+
 			return {
 				maxValue : upperValue,
 				minValue : lowerValue,
 				maxSteps : maxSteps,
 				minSteps : minSteps
 			};
-			
+
 
 		}
 	}
 
 	var Pie = function(data,config,ctx){
 		var segmentTotal = 0;
-		
+
 		//In case we have a canvas that is not a square. Minus 5 pixels as padding round the edge.
 		var pieRadius = Min([height/2,width/2]) - 5;
-		
+
 		for (var i=0; i<data.length; i++){
 			segmentTotal += data[i].value;
 		}
-		
-		
+
+
 		animationLoop(config,null,drawPieSegments,ctx);
-				
+
 		function drawPieSegments (animationDecimal){
 			var cumulativeAngle = -Math.PI/2,
 			scaleAnimation = 1,
@@ -733,33 +725,33 @@ var Chart = function(context){
 				ctx.closePath();
 				ctx.fillStyle = data[i].color;
 				ctx.fill();
-				
+
 				if(config.segmentShowStroke){
 					ctx.lineWidth = config.segmentStrokeWidth;
 					ctx.strokeStyle = config.segmentStrokeColor;
 					ctx.stroke();
 				}
 				cumulativeAngle += segmentAngle;
-			}			
-		}		
+			}
+		}
 	}
 
 	var Doughnut = function(data,config,ctx){
 		var segmentTotal = 0;
-		
+
 		//In case we have a canvas that is not a square. Minus 5 pixels as padding round the edge.
 		var doughnutRadius = Min([height/2,width/2]) - 5;
-		
+
 		var cutoutRadius = doughnutRadius * (config.percentageInnerCutout/100);
-		
+
 		for (var i=0; i<data.length; i++){
 			segmentTotal += data[i].value;
 		}
-		
-		
+
+
 		animationLoop(config,null,drawPieSegments,ctx);
-		
-		
+
+
 		function drawPieSegments (animationDecimal){
 			var cumulativeAngle = -Math.PI/2,
 			scaleAnimation = 1,
@@ -780,30 +772,30 @@ var Chart = function(context){
 				ctx.closePath();
 				ctx.fillStyle = data[i].color;
 				ctx.fill();
-				
+
 				if(config.segmentShowStroke){
 					ctx.lineWidth = config.segmentStrokeWidth;
 					ctx.strokeStyle = config.segmentStrokeColor;
 					ctx.stroke();
 				}
 				cumulativeAngle += segmentAngle;
-			}			
-		}			
-		
-		
-		
+			}
+		}
+
+
+
 	}
 
 	var Line = function(data,config,ctx){
 		var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString, valueHop,widestXLabel, xAxisLength,yAxisPosX,xAxisPosY, rotateLabels = 0;
-			
+
 		calculateDrawingSizes();
-		
+
 		valueBounds = getValueBounds();
 		//Check and set the scale
 		labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : "";
 		if (!config.scaleOverride){
-			
+
 			calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
 		}
 		else {
@@ -813,17 +805,13 @@ var Chart = function(context){
 				graphMin : config.scaleStartValue,
 				labels : []
 			}
-			for (var i=0; i<calculatedScale.steps; i++){
-				if(labelTemplateString){
-				calculatedScale.labels.push(tmpl(labelTemplateString,{value:(config.scaleStartValue + (config.scaleStepWidth * i)).toFixed(getDecimalPlaces (config.scaleStepWidth))}));
-				}
-			}
+			populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth);
 		}
-		
+
 		scaleHop = Math.floor(scaleHeight/calculatedScale.steps);
 		calculateXAxisSize();
-		animationLoop(config,drawScale,drawLines,ctx);		
-		
+		animationLoop(config,drawScale,drawLines,ctx);
+
 		function drawLines(animPc){
 			for (var i=0; i<data.datasets.length; i++){
 				ctx.strokeStyle = data.datasets[i].strokeColor;
@@ -862,9 +850,9 @@ var Chart = function(context){
 					}
 				}
 			}
-			
+
 			function yPos(dataSet,iteration){
-				return xAxisPosY - animPc*(calculateOffset(data.datasets[dataSet].data[iteration],calculatedScale,scaleHop));			
+				return xAxisPosY - animPc*(calculateOffset(data.datasets[dataSet].data[iteration],calculatedScale,scaleHop));
 			}
 			function xPos(iteration){
 				return yAxisPosX + (valueHop * iteration);
@@ -878,8 +866,8 @@ var Chart = function(context){
 			ctx.moveTo(width-widestXLabel/2+5,xAxisPosY);
 			ctx.lineTo(width-(widestXLabel/2)-xAxisLength-5,xAxisPosY);
 			ctx.stroke();
-			
-			
+
+
 			if (rotateLabels > 0){
 				ctx.save();
 				ctx.textAlign = "right";
@@ -896,26 +884,26 @@ var Chart = function(context){
 					ctx.fillText(data.labels[i], 0,0);
 					ctx.restore();
 				}
-				
+
 				else{
-					ctx.fillText(data.labels[i], yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize+3);					
+					ctx.fillText(data.labels[i], yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize+3);
 				}
 
 				ctx.beginPath();
 				ctx.moveTo(yAxisPosX + i * valueHop, xAxisPosY+3);
-				
+
 				//Check i isnt 0, so we dont go over the Y axis twice.
 				if(config.scaleShowGridLines && i>0){
 					ctx.lineWidth = config.scaleGridLineWidth;
-					ctx.strokeStyle = config.scaleGridLineColor;					
+					ctx.strokeStyle = config.scaleGridLineColor;
 					ctx.lineTo(yAxisPosX + i * valueHop, 5);
 				}
 				else{
-					ctx.lineTo(yAxisPosX + i * valueHop, xAxisPosY+3);				
+					ctx.lineTo(yAxisPosX + i * valueHop, xAxisPosY+3);
 				}
 				ctx.stroke();
 			}
-			
+
 			//Y axis
 			ctx.lineWidth = config.scaleLineWidth;
 			ctx.strokeStyle = config.scaleLineColor;
@@ -923,7 +911,7 @@ var Chart = function(context){
 			ctx.moveTo(yAxisPosX,xAxisPosY+5);
 			ctx.lineTo(yAxisPosX,5);
 			ctx.stroke();
-			
+
 			ctx.textAlign = "right";
 			ctx.textBaseline = "middle";
 			for (var j=0; j<calculatedScale.steps; j++){
@@ -932,20 +920,20 @@ var Chart = function(context){
 				if (config.scaleShowGridLines){
 					ctx.lineWidth = config.scaleGridLineWidth;
 					ctx.strokeStyle = config.scaleGridLineColor;
-					ctx.lineTo(yAxisPosX + xAxisLength + 5,xAxisPosY - ((j+1) * scaleHop));					
+					ctx.lineTo(yAxisPosX + xAxisLength + 5,xAxisPosY - ((j+1) * scaleHop));
 				}
 				else{
 					ctx.lineTo(yAxisPosX-0.5,xAxisPosY - ((j+1) * scaleHop));
 				}
-				
+
 				ctx.stroke();
-				
+
 				if (config.scaleShowLabels){
 					ctx.fillText(calculatedScale.labels[j],yAxisPosX-8,xAxisPosY - ((j+1) * scaleHop));
 				}
 			}
-			
-			
+
+
 		}
 		function calculateXAxisSize(){
 			var longestText = 1;
@@ -960,11 +948,11 @@ var Chart = function(context){
 				longestText +=10;
 			}
 			xAxisLength = width - longestText - widestXLabel;
-			valueHop = Math.floor(xAxisLength/(data.labels.length-1));	
-				
+			valueHop = Math.floor(xAxisLength/(data.labels.length-1));
+
 			yAxisPosX = width-widestXLabel/2-xAxisLength;
-			xAxisPosY = scaleHeight + config.scaleFontSize/2;				
-		}		
+			xAxisPosY = scaleHeight + config.scaleFontSize/2;
+		}
 		function calculateDrawingSizes(){
 			maxSize = height;
 
@@ -980,7 +968,7 @@ var Chart = function(context){
 				rotateLabels = 45;
 				if (width/data.labels.length < Math.cos(rotateLabels) * widestXLabel){
 					rotateLabels = 90;
-					maxSize -= widestXLabel; 
+					maxSize -= widestXLabel;
 				}
 				else{
 					maxSize -= Math.sin(rotateLabels) * widestXLabel;
@@ -989,21 +977,21 @@ var Chart = function(context){
 			else{
 				maxSize -= config.scaleFontSize;
 			}
-			
+
 			//Add a little padding between the x line and the text
 			maxSize -= 5;
-			
-			
+
+
 			labelHeight = config.scaleFontSize;
-			
+
 			maxSize -= labelHeight;
 			//Set 5 pixels greater than the font size to allow for a little padding from the X axis.
-			
+
 			scaleHeight = maxSize;
-			
+
 			//Then get the area above we can safely draw on.
-			
-		}		
+
+		}
 		function getValueBounds() {
 			var upperValue = Number.MIN_VALUE;
 			var lowerValue = Number.MAX_VALUE;
@@ -1013,33 +1001,33 @@ var Chart = function(context){
 					if ( data.datasets[i].data[j] < lowerValue) { lowerValue = data.datasets[i].data[j] };
 				}
 			};
-	
+
 			var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66)));
 			var minSteps = Math.floor((scaleHeight / labelHeight*0.5));
-			
+
 			return {
 				maxValue : upperValue,
 				minValue : lowerValue,
 				maxSteps : maxSteps,
 				minSteps : minSteps
 			};
-			
-	
+
+
 		}
 
-		
+
 	}
-	
+
 	var Bar = function(data,config,ctx){
 		var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString, valueHop,widestXLabel, xAxisLength,yAxisPosX,xAxisPosY,barWidth, rotateLabels = 0;
-			
+
 		calculateDrawingSizes();
-		
+
 		valueBounds = getValueBounds();
 		//Check and set the scale
 		labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : "";
 		if (!config.scaleOverride){
-			
+
 			calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
 		}
 		else {
@@ -1049,17 +1037,13 @@ var Chart = function(context){
 				graphMin : config.scaleStartValue,
 				labels : []
 			}
-			for (var i=0; i<calculatedScale.steps; i++){
-				if(labelTemplateString){
-				calculatedScale.labels.push(tmpl(labelTemplateString,{value:(config.scaleStartValue + (config.scaleStepWidth * i)).toFixed(getDecimalPlaces (config.scaleStepWidth))}));
-				}
-			}
+			populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth);
 		}
-		
+
 		scaleHop = Math.floor(scaleHeight/calculatedScale.steps);
 		calculateXAxisSize();
-		animationLoop(config,drawScale,drawBars,ctx);		
-		
+		animationLoop(config,drawScale,drawBars,ctx);
+
 		function drawBars(animPc){
 			ctx.lineWidth = config.barStrokeWidth;
 			for (var i=0; i<data.datasets.length; i++){
@@ -1067,7 +1051,7 @@ var Chart = function(context){
 					ctx.strokeStyle = data.datasets[i].strokeColor;
 				for (var j=0; j<data.datasets[i].data.length; j++){
 					var barOffset = yAxisPosX + config.barValueSpacing + valueHop*j + barWidth*i + config.barDatasetSpacing*i + config.barStrokeWidth*i;
-					
+
 					ctx.beginPath();
 					ctx.moveTo(barOffset, xAxisPosY);
 					ctx.lineTo(barOffset, xAxisPosY - animPc*calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop)+(config.barStrokeWidth/2));
@@ -1080,7 +1064,7 @@ var Chart = function(context){
 					ctx.fill();
 				}
 			}
-			
+
 		}
 		function drawScale(){
 			//X axis line
@@ -1090,8 +1074,8 @@ var Chart = function(context){
 			ctx.moveTo(width-widestXLabel/2+5,xAxisPosY);
 			ctx.lineTo(width-(widestXLabel/2)-xAxisLength-5,xAxisPosY);
 			ctx.stroke();
-			
-			
+
+
 			if (rotateLabels > 0){
 				ctx.save();
 				ctx.textAlign = "right";
@@ -1108,21 +1092,21 @@ var Chart = function(context){
 					ctx.fillText(data.labels[i], 0,0);
 					ctx.restore();
 				}
-				
+
 				else{
-					ctx.fillText(data.labels[i], yAxisPosX + i*valueHop + valueHop/2,xAxisPosY + config.scaleFontSize+3);					
+					ctx.fillText(data.labels[i], yAxisPosX + i*valueHop + valueHop/2,xAxisPosY + config.scaleFontSize+3);
 				}
 
 				ctx.beginPath();
 				ctx.moveTo(yAxisPosX + (i+1) * valueHop, xAxisPosY+3);
-				
+
 				//Check i isnt 0, so we dont go over the Y axis twice.
 					ctx.lineWidth = config.scaleGridLineWidth;
-					ctx.strokeStyle = config.scaleGridLineColor;					
+					ctx.strokeStyle = config.scaleGridLineColor;
 					ctx.lineTo(yAxisPosX + (i+1) * valueHop, 5);
 				ctx.stroke();
 			}
-			
+
 			//Y axis
 			ctx.lineWidth = config.scaleLineWidth;
 			ctx.strokeStyle = config.scaleLineColor;
@@ -1130,7 +1114,7 @@ var Chart = function(context){
 			ctx.moveTo(yAxisPosX,xAxisPosY+5);
 			ctx.lineTo(yAxisPosX,5);
 			ctx.stroke();
-			
+
 			ctx.textAlign = "right";
 			ctx.textBaseline = "middle";
 			for (var j=0; j<calculatedScale.steps; j++){
@@ -1139,19 +1123,19 @@ var Chart = function(context){
 				if (config.scaleShowGridLines){
 					ctx.lineWidth = config.scaleGridLineWidth;
 					ctx.strokeStyle = config.scaleGridLineColor;
-					ctx.lineTo(yAxisPosX + xAxisLength + 5,xAxisPosY - ((j+1) * scaleHop));					
+					ctx.lineTo(yAxisPosX + xAxisLength + 5,xAxisPosY - ((j+1) * scaleHop));
 				}
 				else{
 					ctx.lineTo(yAxisPosX-0.5,xAxisPosY - ((j+1) * scaleHop));
 				}
-				
+
 				ctx.stroke();
 				if (config.scaleShowLabels){
 					ctx.fillText(calculatedScale.labels[j],yAxisPosX-8,xAxisPosY - ((j+1) * scaleHop));
 				}
 			}
-			
-			
+
+
 		}
 		function calculateXAxisSize(){
 			var longestText = 1;
@@ -1166,13 +1150,13 @@ var Chart = function(context){
 				longestText +=10;
 			}
 			xAxisLength = width - longestText - widestXLabel;
-			valueHop = Math.floor(xAxisLength/(data.labels.length));	
-			
+			valueHop = Math.floor(xAxisLength/(data.labels.length));
+
 			barWidth = (valueHop - config.scaleGridLineWidth*2 - (config.barValueSpacing*2) - (config.barDatasetSpacing*data.datasets.length-1) - ((config.barStrokeWidth/2)*data.datasets.length-1))/data.datasets.length;
-			
+
 			yAxisPosX = width-widestXLabel/2-xAxisLength;
-			xAxisPosY = scaleHeight + config.scaleFontSize/2;				
-		}		
+			xAxisPosY = scaleHeight + config.scaleFontSize/2;
+		}
 		function calculateDrawingSizes(){
 			maxSize = height;
 
@@ -1188,7 +1172,7 @@ var Chart = function(context){
 				rotateLabels = 45;
 				if (width/data.labels.length < Math.cos(rotateLabels) * widestXLabel){
 					rotateLabels = 90;
-					maxSize -= widestXLabel; 
+					maxSize -= widestXLabel;
 				}
 				else{
 					maxSize -= Math.sin(rotateLabels) * widestXLabel;
@@ -1197,21 +1181,21 @@ var Chart = function(context){
 			else{
 				maxSize -= config.scaleFontSize;
 			}
-			
+
 			//Add a little padding between the x line and the text
 			maxSize -= 5;
-			
-			
+
+
 			labelHeight = config.scaleFontSize;
-			
+
 			maxSize -= labelHeight;
 			//Set 5 pixels greater than the font size to allow for a little padding from the X axis.
-			
+
 			scaleHeight = maxSize;
-			
+
 			//Then get the area above we can safely draw on.
-			
-		}		
+
+		}
 		function getValueBounds() {
 			var upperValue = Number.MIN_VALUE;
 			var lowerValue = Number.MAX_VALUE;
@@ -1221,39 +1205,39 @@ var Chart = function(context){
 					if ( data.datasets[i].data[j] < lowerValue) { lowerValue = data.datasets[i].data[j] };
 				}
 			};
-	
+
 			var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66)));
 			var minSteps = Math.floor((scaleHeight / labelHeight*0.5));
-			
+
 			return {
 				maxValue : upperValue,
 				minValue : lowerValue,
 				maxSteps : maxSteps,
 				minSteps : minSteps
 			};
-			
-	
+
+
 		}
 	}
-	
+
 	function calculateOffset(val,calculatedScale,scaleHop){
 		var outerValue = calculatedScale.steps * calculatedScale.stepValue;
 		var adjustedValue = val - calculatedScale.graphMin;
 		var scalingFactor = CapValue(adjustedValue/outerValue,1,0);
 		return (scaleHop*calculatedScale.steps) * scalingFactor;
 	}
-	
+
 	function animationLoop(config,drawScale,drawData,ctx){
 		var animFrameAmount = (config.animation)? 1/CapValue(config.animationSteps,Number.MAX_VALUE,1) : 1,
 			easingFunction = animationOptions[config.animationEasing],
 			percentAnimComplete =(config.animation)? 0 : 1;
-		
-	
-		
+
+
+
 		if (typeof drawScale !== "function") drawScale = function(){};
-		
+
 		requestAnimFrame(animLoop);
-		
+
 		function animateFrame(){
 			var easeAdjustedAnimationPercent =(config.animation)? CapValue(easingFunction(percentAnimComplete),null,0) : 1;
 			clear(ctx);
@@ -1263,12 +1247,12 @@ var Chart = function(context){
 			} else {
 				drawScale();
 				drawData(easeAdjustedAnimationPercent);
-			}				
+			}
 		}
 		function animLoop(){
 			//We need to check if the animation is incomplete (less than 1), or complete (1).
 				percentAnimComplete += animFrameAmount;
-				animateFrame();	
+				animateFrame();
 				//Stop the loop continuing forever
 				if (percentAnimComplete <= 1){
 					requestAnimFrame(animLoop);
@@ -1276,14 +1260,14 @@ var Chart = function(context){
 				else{
 					if (typeof config.onAnimationComplete == "function") config.onAnimationComplete();
 				}
-			
-		}		
-		
+
+		}
+
 	}
 
 	//Declare global functions to be called within this namespace here.
-	
-	
+
+
 	// shim layer with setTimeout fallback
 	var requestAnimFrame = (function(){
 		return window.requestAnimationFrame ||
@@ -1298,22 +1282,22 @@ var Chart = function(context){
 
 	function calculateScale(drawingHeight,maxSteps,minSteps,maxValue,minValue,labelTemplateString){
 			var graphMin,graphMax,graphRange,stepValue,numberOfSteps,valueRange,rangeOrderOfMagnitude,decimalNum;
-			
+
 			valueRange = maxValue - minValue;
-			
+
 			rangeOrderOfMagnitude = calculateOrderOfMagnitude(valueRange);
 
         	graphMin = Math.floor(minValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude);
-            
+
             graphMax = Math.ceil(maxValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude);
-            
+
             graphRange = graphMax - graphMin;
-            
+
             stepValue = Math.pow(10, rangeOrderOfMagnitude);
-            
+
 	        numberOfSteps = Math.round(graphRange / stepValue);
-	        
-	        //Compare number of steps to the max and min for that size graph, and add in half steps if need be.	        
+
+	        //Compare number of steps to the max and min for that size graph, and add in half steps if need be.
 	        while(numberOfSteps < minSteps || numberOfSteps > maxSteps) {
 	        	if (numberOfSteps < minSteps){
 			        stepValue /= 2;
@@ -1324,35 +1308,35 @@ var Chart = function(context){
 			        numberOfSteps = Math.round(graphRange/stepValue);
 		        }
 	        };
-	        
 
-	        
-	        //Create an array of all the labels by interpolating the string.
-	        
 	        var labels = [];
-	        
-	        if(labelTemplateString){
-		        //Fix floating point errors by setting to fixed the on the same decimal as the stepValue.
-		        for (var i=1; i<numberOfSteps+1; i++){
-		        	labels.push(tmpl(labelTemplateString,{value:(graphMin + (stepValue*i)).toFixed(getDecimalPlaces (stepValue))}));
-		        }
-	        }
-		
+	        populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue);
+
 	        return {
 		        steps : numberOfSteps,
 				stepValue : stepValue,
 				graphMin : graphMin,
-				labels : labels		        
-		        
+				labels : labels
+
 	        }
-		
+
 			function calculateOrderOfMagnitude(val){
 			  return Math.floor(Math.log(val) / Math.LN10);
-			}		
+			}
 
 
 	}
-	
+
+    //Populate an array of all the labels by interpolating the string.
+    function populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue) {
+        if (labelTemplateString) {
+            //Fix floating point errors by setting to fixed the on the same decimal as the stepValue.
+            for (var i = 1; i < numberOfSteps + 1; i++) {
+                labels.push(tmpl(labelTemplateString, {value: (graphMin + (stepValue * i)).toFixed(getDecimalPlaces(stepValue))}));
+            }
+        }
+    }
+
 	//Max value from array
 	function Max( array ){
 		return Math.max.apply( Math, array );
@@ -1395,34 +1379,34 @@ var Chart = function(context){
 		else{
 			return 0;
 		}
-		
-	} 
-	
+
+	}
+
 	function mergeChartConfig(defaults,userDefined){
 		var returnObj = {};
 	    for (var attrname in defaults) { returnObj[attrname] = defaults[attrname]; }
 	    for (var attrname in userDefined) { returnObj[attrname] = userDefined[attrname]; }
 	    return returnObj;
 	}
-	
+
 	//Javascript micro templating by John Resig - source at http://ejohn.org/blog/javascript-micro-templating/
 	  var cache = {};
-	 
+
 	  function tmpl(str, data){
 	    // Figure out if we're getting a template, or if we need to
 	    // load the template - and be sure to cache the result.
 	    var fn = !/\W/.test(str) ?
 	      cache[str] = cache[str] ||
 	        tmpl(document.getElementById(str).innerHTML) :
-	     
+
 	      // Generate a reusable function that will serve as a template
 	      // generator (and which will be cached).
 	      new Function("obj",
 	        "var p=[],print=function(){p.push.apply(p,arguments);};" +
-	       
+
 	        // Introduce the data as local variables using with(){}
 	        "with(obj){p.push('" +
-	       
+
 	        // Convert the template into pure JavaScript
 	        str
 	          .replace(/[\r\t\n]/g, " ")
@@ -1433,10 +1417,9 @@ var Chart = function(context){
 	          .split("%>").join("p.push('")
 	          .split("\r").join("\\'")
 	      + "');}return p.join('');");
-	   
+
 	    // Provide some basic currying to the user
 	    return data ? fn( data ) : fn;
 	  };
 }
 
-

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: chart-js-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
   prerelease: 
 platform: ruby
 authors:
@@ -9,12 +9,12 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-03-26 00:00:00.000000000 -04:00
+date: 2013-04-15 00:00:00.000000000 -04:00
 default_executable: 
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
-  requirement: &70111345020200 !ruby/object:Gem::Requirement
+  requirement: &70272322155920 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -22,7 +22,7 @@ dependencies:
         version: '3.1'
   type: :runtime
   prerelease: false
-  version_requirements: *70111345020200
+  version_requirements: *70272322155920
 description: Chart.js for use in Rails asset pipeline
 email:
 - walsh1kt@gmail.com