Team:TU-Munich/Chart.js

From 2013.igem.org

/*!

* Chart.js
* http://chartjs.org/
*
* Copyright 2013 Nick Downie
* Released under the MIT license
* https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
*/

//Define the global Chart Variable as a class. window.Chart = function(context){

var chart = this;

//Easing functions adapted from Robert Penner's easing equations //http://www.robertpenner.com/easing/

//Variables global to the chart var width = context.canvas.width; var height = context.canvas.height;

//High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale. if (window.devicePixelRatio) { context.canvas.style.width = width + "px"; context.canvas.style.height = height + "px"; context.canvas.height = height * window.devicePixelRatio; context.canvas.width = width * window.devicePixelRatio; context.scale(window.devicePixelRatio, window.devicePixelRatio); }

this.PolarArea = function(data,options){

chart.PolarArea.defaults = { scaleOverlay : true, scaleOverride : false, scaleSteps : null, scaleStepWidth : null, scaleStartValue : null, scaleShowLine : true, scaleLineColor : "rgba(0,0,0,.1)", scaleLineWidth : 1, scaleShowLabels : true, scaleLabel : "<%=value%>", scaleFontFamily : "'Arial'", scaleFontSize : 12, scaleFontStyle : "normal", scaleFontColor : "#666", scaleShowLabelBackdrop : true, scaleBackdropColor : "rgba(255,255,255,0.75)", scaleBackdropPaddingY : 2, scaleBackdropPaddingX : 2, segmentShowStroke : true, segmentStrokeColor : "#fff", segmentStrokeWidth : 2, animation : true, animationSteps : 100, animationEasing : "easeOutBounce", animateRotate : true, 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, scaleSteps : null, scaleStepWidth : null, scaleStartValue : null, scaleShowLine : true, scaleLineColor : "rgba(0,0,0,.1)", scaleLineWidth : 1, scaleShowLabels : false, scaleLabel : "<%=value%>", scaleFontFamily : "'Arial'", scaleFontSize : 12, scaleFontStyle : "normal", scaleFontColor : "#666", scaleShowLabelBackdrop : true, scaleBackdropColor : "rgba(255,255,255,0.75)", scaleBackdropPaddingY : 2, scaleBackdropPaddingX : 2, angleShowLineOut : true, angleLineColor : "rgba(0,0,0,.1)", angleLineWidth : 1, pointLabelFontFamily : "'Arial'", pointLabelFontStyle : "normal", pointLabelFontSize : 12, pointLabelFontColor : "#666", pointDot : true, pointDotRadius : 3, pointDotStrokeWidth : 1, datasetStroke : true, datasetStrokeWidth : 2, datasetFill : true, animation : true, animationSteps : 60, 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, segmentStrokeColor : "#fff", segmentStrokeWidth : 2, animation : true, animationSteps : 100, animationEasing : "easeOutBounce", animateRotate : true, animateScale : false, onAnimationComplete : null };

var config = (options)? mergeChartConfig(chart.Pie.defaults,options) : chart.Pie.defaults;

return new Pie(data,config,context); };

this.Doughnut = function(data,options){

chart.Doughnut.defaults = { segmentShowStroke : true, segmentStrokeColor : "#fff", segmentStrokeWidth : 2, percentageInnerCutout : 50, animation : true, animationSteps : 100, animationEasing : "easeOutBounce", animateRotate : true, animateScale : false, onAnimationComplete : null };

var config = (options)? mergeChartConfig(chart.Doughnut.defaults,options) : chart.Doughnut.defaults;

return new Doughnut(data,config,context);

};

this.Line = function(data,options){

chart.Line.defaults = { scaleOverlay : false, scaleOverride : false, scaleSteps : null, scaleStepWidth : null, scaleStartValue : null, scaleLineColor : "rgba(0,0,0,.1)", scaleLineWidth : 1, scaleShowLabels : true, scaleLabel : "<%=value%>", scaleFontFamily : "'Arial'", scaleFontSize : 12, scaleFontStyle : "normal", scaleFontColor : "#666", scaleShowGridLines : true, scaleGridLineColor : "rgba(0,0,0,.05)", scaleGridLineWidth : 1, bezierCurve : true, pointDot : true, pointDotRadius : 4, pointDotStrokeWidth : 2, datasetStroke : true, datasetStrokeWidth : 2, datasetFill : true, animation : true, 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, scaleOverride : false, scaleSteps : null, scaleStepWidth : null, scaleStartValue : null, scaleLineColor : "rgba(0,0,0,.1)", scaleLineWidth : 1, scaleShowLabels : true, scaleLabel : "<%=value%>", scaleFontFamily : "'Arial'", scaleFontSize : 12, scaleFontStyle : "normal", scaleFontColor : "#666", scaleShowGridLines : true, scaleGridLineColor : "rgba(0,0,0,.05)", scaleGridLineWidth : 1, barShowStroke : true, barStrokeWidth : 2, barValueSpacing : 5, barDatasetSpacing : 1, animation : true, animationSteps : 60, animationEasing : "easeOutQuart", onAnimationComplete : null }; var config = (options) ? mergeChartConfig(chart.Bar.defaults,options) : chart.Bar.defaults;

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;

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 { calculatedScale = { steps : config.scaleSteps, stepValue : config.scaleStepWidth, graphMin : config.scaleStartValue, labels : [] } populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); }

scaleHop = maxSize/(calculatedScale.steps);

//Wrap in an animation loop wrapper animationLoop(config,drawScale,drawAllSegments,ctx);

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); } function drawScale(){ for (var i=0; i<calculatedScale.steps; i++){ //If the line object is there if (config.scaleShowLine){ ctx.beginPath(); ctx.arc(width/2, height/2, scaleHop * (i + 1), 0, (Math.PI * 2), true); ctx.strokeStyle = config.scaleLineColor; ctx.lineWidth = config.scaleLineWidth; ctx.stroke(); }

if (config.scaleShowLabels){ ctx.textAlign = "center"; ctx.font = config.scaleFontStyle + " " + config.scaleFontSize + "px " + config.scaleFontFamily;

					var label =  calculatedScale.labels[i];

//If the backdrop object is within the font object if (config.scaleShowLabelBackdrop){ var textWidth = ctx.measureText(label).width; ctx.fillStyle = config.scaleBackdropColor; ctx.beginPath(); ctx.rect( Math.round(width/2 - textWidth/2 - config.scaleBackdropPaddingX), //X Math.round(height/2 - (scaleHop * (i + 1)) - config.scaleFontSize*0.5 - config.scaleBackdropPaddingY),//Y Math.round(textWidth + (config.scaleBackdropPaddingX*2)), //Width Math.round(config.scaleFontSize + (config.scaleBackdropPaddingY*2)) //Height ); ctx.fill(); } ctx.textBaseline = "middle"; ctx.fillStyle = config.scaleFontColor; ctx.fillText(label,width/2,height/2 - (scaleHop * (i + 1))); } } } function drawAllSegments(animationDecimal){ var startAngle = -Math.PI/2, angleStep = (Math.PI*2)/data.length, scaleAnimation = 1, rotateAnimation = 1; if (config.animation) { if (config.animateScale) { scaleAnimation = animationDecimal; } if (config.animateRotate){ rotateAnimation = animationDecimal; } }

for (var i=0; i<data.length; i++){

ctx.beginPath(); ctx.arc(width/2,height/2,scaleAnimation * calculateOffset(data[i].value,calculatedScale,scaleHop),startAngle, startAngle + rotateAnimation*angleStep, false); ctx.lineTo(width/2,height/2); ctx.closePath(); ctx.fillStyle = data[i].color; ctx.fill();

if(config.segmentShowStroke){ ctx.strokeStyle = config.segmentStrokeColor; ctx.lineWidth = config.segmentStrokeWidth; ctx.stroke(); } startAngle += rotateAnimation*angleStep; } } function getValueBounds() { var upperValue = Number.MIN_VALUE; var lowerValue = Number.MAX_VALUE; for (var i=0; i<data.length; i++){ if (data[i].value > upperValue) {upperValue = data[i].value;} if (data[i].value < lowerValue) {lowerValue = data[i].value;} };

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;

//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();

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 { calculatedScale = { steps : config.scaleSteps, stepValue : config.scaleStepWidth, graphMin : config.scaleStartValue, labels : [] } 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;

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.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; ctx.lineWidth = config.pointDotStrokeWidth; for (var k=0; k<data.datasets[i].data.length; k++){ ctx.rotate(rotationDegree); ctx.beginPath(); 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);

if (config.angleShowLineOut){ 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); ctx.lineTo(0,-maxSize); ctx.stroke(); } }

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)); for (var j=0; j<data.datasets[0].data.length; j++){ ctx.rotate(rotationDegree); ctx.lineTo(0,-scaleHop * (i+1)); } ctx.closePath(); ctx.stroke();

}

if (config.scaleShowLabels){ ctx.textAlign = 'center'; 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; ctx.beginPath(); ctx.rect( Math.round(- textWidth/2 - config.scaleBackdropPaddingX), //X Math.round((-scaleHop * (i + 1)) - config.scaleFontSize*0.5 - config.scaleBackdropPaddingY),//Y Math.round(textWidth + (config.scaleBackdropPaddingX*2)), //Width 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++){ 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"; } else if(rotationDegree*k > Math.PI){ ctx.textAlign = "right"; } else{ ctx.textAlign = "left"; }

ctx.textBaseline = "middle";

ctx.fillText(data.labels[k],opposite,-adjacent);

} ctx.restore(); }; function calculateDrawingSizes(){ 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 -= config.pointLabelFontSize; maxSize = CapValue(maxSize, null, 0); 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); }; 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]} 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 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);

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);

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 { calculatedScale = { steps : config.scaleSteps, stepValue : config.scaleStepWidth, graphMin : config.scaleStartValue, labels : [] } populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); }

scaleHop = Math.floor(scaleHeight/calculatedScale.steps); calculateXAxisSize(); animationLoop(config,drawScale,drawLines,ctx);

function drawLines(animPc){ for (var i=0; i<data.datasets.length; i++){ ctx.strokeStyle = data.datasets[i].strokeColor; ctx.lineWidth = config.datasetStrokeWidth; ctx.beginPath(); ctx.moveTo(yAxisPosX, xAxisPosY - animPc*(calculateOffset(data.datasets[i].data[0],calculatedScale,scaleHop)))

for (var j=1; j<data.datasets[i].data.length; j++){ if (config.bezierCurve){ ctx.bezierCurveTo(xPos(j-0.5),yPos(i,j-1),xPos(j-0.5),yPos(i,j),xPos(j),yPos(i,j)); } else{ ctx.lineTo(xPos(j),yPos(i,j)); } } ctx.stroke(); if (config.datasetFill){ ctx.lineTo(yAxisPosX + (valueHop*(data.datasets[i].data.length-1)),xAxisPosY); ctx.lineTo(yAxisPosX,xAxisPosY); ctx.closePath(); ctx.fillStyle = data.datasets[i].fillColor; ctx.fill(); } else{ ctx.closePath(); } if(config.pointDot){ ctx.fillStyle = data.datasets[i].pointColor; ctx.strokeStyle = data.datasets[i].pointStrokeColor; ctx.lineWidth = config.pointDotStrokeWidth; for (var k=0; k<data.datasets[i].data.length; k++){ ctx.beginPath(); ctx.arc(yAxisPosX + (valueHop *k),xAxisPosY - animPc*(calculateOffset(data.datasets[i].data[k],calculatedScale,scaleHop)),config.pointDotRadius,0,Math.PI*2,true); ctx.fill(); ctx.stroke(); } } }

if (rotateLabels > 0){ ctx.save(); ctx.textAlign = "right"; } else{ ctx.textAlign = "center"; } ctx.fillStyle = config.scaleFontColor; for (var i=0; i<data.labels.length; i++){ ctx.save(); if (rotateLabels > 0){ ctx.translate(yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize); ctx.rotate(-(rotateLabels * (Math.PI/180))); ctx.fillText(data.labels[i], 0,0); ctx.restore(); }

else{ 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.lineTo(yAxisPosX + i * valueHop, 5); } else{ ctx.lineTo(yAxisPosX + i * valueHop, xAxisPosY+3); } ctx.stroke(); }

//Y axis ctx.lineWidth = config.scaleLineWidth; ctx.strokeStyle = config.scaleLineColor; ctx.beginPath(); 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++){ ctx.beginPath(); ctx.moveTo(yAxisPosX-3,xAxisPosY - ((j+1) * scaleHop)); if (config.scaleShowGridLines){ ctx.lineWidth = config.scaleGridLineWidth; ctx.strokeStyle = config.scaleGridLineColor; 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; //if we are showing the labels if (config.scaleShowLabels){ ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily; for (var i=0; i<calculatedScale.labels.length; i++){ var measuredText = ctx.measureText(calculatedScale.labels[i]).width; longestText = (measuredText > longestText)? measuredText : longestText; } //Add a little extra padding from the y axis longestText +=10; } xAxisLength = width - longestText - widestXLabel; valueHop = Math.floor(xAxisLength/(data.labels.length-1));

yAxisPosX = width-widestXLabel/2-xAxisLength; xAxisPosY = scaleHeight + config.scaleFontSize/2; } function calculateDrawingSizes(){ maxSize = height;

//Need to check the X axis first - measure the length of each text metric, and figure out if we need to rotate by 45 degrees. ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily; widestXLabel = 1; for (var i=0; i<data.labels.length; i++){ var textLength = ctx.measureText(data.labels[i]).width; //If the text length is longer - make that equal to longest text! widestXLabel = (textLength > widestXLabel)? textLength : widestXLabel; } if (width/data.labels.length < widestXLabel){ rotateLabels = 45; if (width/data.labels.length < Math.cos(rotateLabels) * widestXLabel){ rotateLabels = 90; maxSize -= widestXLabel; } else{ maxSize -= Math.sin(rotateLabels) * widestXLabel; } } 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; 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] }; 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 { calculatedScale = { steps : config.scaleSteps, stepValue : config.scaleStepWidth, graphMin : config.scaleStartValue, labels : [] } populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); }

scaleHop = Math.floor(scaleHeight/calculatedScale.steps); calculateXAxisSize(); animationLoop(config,drawScale,drawBars,ctx);

function drawBars(animPc){ ctx.lineWidth = config.barStrokeWidth; for (var i=0; i<data.datasets.length; i++){ ctx.fillStyle = data.datasets[i].fillColor; 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)); ctx.lineTo(barOffset + barWidth, xAxisPosY - animPc*calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop)+(config.barStrokeWidth/2)); ctx.lineTo(barOffset + barWidth, xAxisPosY); if(config.barShowStroke){ ctx.stroke(); } ctx.closePath(); ctx.fill(); } }

} function drawScale(){ //X axis line ctx.lineWidth = config.scaleLineWidth; ctx.strokeStyle = config.scaleLineColor; ctx.beginPath(); 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"; } else{ ctx.textAlign = "center"; } ctx.fillStyle = config.scaleFontColor; for (var i=0; i<data.labels.length; i++){ ctx.save(); if (rotateLabels > 0){ ctx.translate(yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize); ctx.rotate(-(rotateLabels * (Math.PI/180))); 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.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.lineTo(yAxisPosX + (i+1) * valueHop, 5); ctx.stroke(); }

//Y axis ctx.lineWidth = config.scaleLineWidth; ctx.strokeStyle = config.scaleLineColor; ctx.beginPath(); 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++){ ctx.beginPath(); ctx.moveTo(yAxisPosX-3,xAxisPosY - ((j+1) * scaleHop)); if (config.scaleShowGridLines){ ctx.lineWidth = config.scaleGridLineWidth; ctx.strokeStyle = config.scaleGridLineColor; 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; //if we are showing the labels if (config.scaleShowLabels){ ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily; for (var i=0; i<calculatedScale.labels.length; i++){ var measuredText = ctx.measureText(calculatedScale.labels[i]).width; longestText = (measuredText > longestText)? measuredText : longestText; } //Add a little extra padding from the y axis longestText +=10; } xAxisLength = width - longestText - widestXLabel; 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; } function calculateDrawingSizes(){ maxSize = height;

//Need to check the X axis first - measure the length of each text metric, and figure out if we need to rotate by 45 degrees. ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily; widestXLabel = 1; for (var i=0; i<data.labels.length; i++){ var textLength = ctx.measureText(data.labels[i]).width; //If the text length is longer - make that equal to longest text! widestXLabel = (textLength > widestXLabel)? textLength : widestXLabel; } if (width/data.labels.length < widestXLabel){ rotateLabels = 45; if (width/data.labels.length < Math.cos(rotateLabels) * widestXLabel){ rotateLabels = 90; maxSize -= widestXLabel; } else{ maxSize -= Math.sin(rotateLabels) * widestXLabel; } } 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; 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] }; 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);

}

//Declare global functions to be called within this namespace here.

// shim layer with setTimeout fallback var requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })();

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. while(numberOfSteps < minSteps || numberOfSteps > maxSteps) { if (numberOfSteps < minSteps){ stepValue /= 2; numberOfSteps = Math.round(graphRange/stepValue); } else{ stepValue *=2; numberOfSteps = Math.round(graphRange/stepValue); } };

var labels = []; populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue);

return { steps : numberOfSteps, stepValue : stepValue, graphMin : graphMin, 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 ); }; //Min value from array function Min( array ){ return Math.min.apply( Math, array ); }; //Default if undefined function Default(userDeclared,valueIfFalse){ if(!userDeclared){ return valueIfFalse; } else { return userDeclared; } }; //Is a number function function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } //Apply cap a value at a high or low number function CapValue(valueToCap, maxValue, minValue){ if(isNumber(maxValue)) { if( valueToCap > maxValue ) { return maxValue; } } if(isNumber(minValue)){ if ( valueToCap < minValue ){ return minValue; } } return valueToCap; } function getDecimalPlaces (num){ var numberOfDecimalPlaces; if (num%1!=0){ return num.toString().split(".")[1].length } else{ return 0; }

}

//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, " ") .split("<%").join("\t") .replace(/((^|%>)[^\t]*)'/g, "$1\r") .replace(/\t=(.*?)%>/g, "',$1,'") .split("\t").join("');") .split("%>").join("p.push('") .split("\r").join("\\'") + "');}return p.join();");

// Provide some basic currying to the user return data ? fn( data ) : fn; }; }