--- /dev/null
+//Define the global Chart Variable as a class.
+var 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;
+ },
+ easeInQuad: function (t) {
+ return t*t;
+ },
+ easeOutQuad: function (t) {
+ return -1 *t*(t-2);
+ },
+ easeInOutQuad: function (t) {
+ if ((t/=1/2) < 1) return 1/2*t*t;
+ return -1/2 * ((--t)*(t-2) - 1);
+ },
+ easeInCubic: function (t) {
+ return t*t*t;
+ },
+ easeOutCubic: function (t) {
+ return 1*((t=t/1-1)*t*t + 1);
+ },
+ easeInOutCubic: function (t) {
+ if ((t/=1/2) < 1) return 1/2*t*t*t;
+ return 1/2*((t-=2)*t*t + 2);
+ },
+ easeInQuart: function (t) {
+ return t*t*t*t;
+ },
+ easeOutQuart: function (t) {
+ return -1 * ((t=t/1-1)*t*t*t - 1);
+ },
+ easeInOutQuart: function (t) {
+ if ((t/=1/2) < 1) return 1/2*t*t*t*t;
+ return -1/2 * ((t-=2)*t*t*t - 2);
+ },
+ easeInQuint: function (t) {
+ return 1*(t/=1)*t*t*t*t;
+ },
+ easeOutQuint: function (t) {
+ return 1*((t=t/1-1)*t*t*t*t + 1);
+ },
+ easeInOutQuint: function (t) {
+ if ((t/=1/2) < 1) return 1/2*t*t*t*t*t;
+ return 1/2*((t-=2)*t*t*t*t + 2);
+ },
+ easeInSine: function (t) {
+ return -1 * Math.cos(t/1 * (Math.PI/2)) + 1;
+ },
+ easeOutSine: function (t) {
+ return 1 * Math.sin(t/1 * (Math.PI/2));
+ },
+ easeInOutSine: function (t) {
+ return -1/2 * (Math.cos(Math.PI*t/1) - 1);
+ },
+ easeInExpo: function (t) {
+ return (t==0) ? 1 : 1 * Math.pow(2, 10 * (t/1 - 1));
+ },
+ easeOutExpo: function (t) {
+ return (t==1) ? 1 : 1 * (-Math.pow(2, -10 * t/1) + 1);
+ },
+ easeInOutExpo: function (t) {
+ if (t==0) return 0;
+ if (t==1) return 1;
+ if ((t/=1/2) < 1) return 1/2 * Math.pow(2, 10 * (t - 1));
+ return 1/2 * (-Math.pow(2, -10 * --t) + 2);
+ },
+ easeInCirc: function (t) {
+ if (t>=1) return t;
+ return -1 * (Math.sqrt(1 - (t/=1)*t) - 1);
+ },
+ easeOutCirc: function (t) {
+ return 1 * Math.sqrt(1 - (t=t/1-1)*t);
+ },
+ easeInOutCirc: function (t) {
+ if ((t/=1/2) < 1) return -1/2 * (Math.sqrt(1 - t*t) - 1);
+ return 1/2 * (Math.sqrt(1 - (t-=2)*t) + 1);
+ },
+ easeInElastic: function (t) {
+ var s=1.70158;var p=0;var a=1;
+ if (t==0) return 0; if ((t/=1)==1) return 1; if (!p) p=1*.3;
+ if (a < Math.abs(1)) { a=1; var s=p/4; }
+ else var s = p/(2*Math.PI) * Math.asin (1/a);
+ return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*1-s)*(2*Math.PI)/p ));
+ },
+ easeOutElastic: function (t) {
+ var s=1.70158;var p=0;var a=1;
+ if (t==0) return 0; if ((t/=1)==1) return 1; if (!p) p=1*.3;
+ if (a < Math.abs(1)) { a=1; var s=p/4; }
+ else var s = p/(2*Math.PI) * Math.asin (1/a);
+ return a*Math.pow(2,-10*t) * Math.sin( (t*1-s)*(2*Math.PI)/p ) + 1;
+ },
+ easeInOutElastic: function (t) {
+ var s=1.70158;var p=0;var a=1;
+ if (t==0) return 0; if ((t/=1/2)==2) return 1; if (!p) p=1*(.3*1.5);
+ if (a < Math.abs(1)) { a=1; var s=p/4; }
+ else var s = p/(2*Math.PI) * Math.asin (1/a);
+ if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*1-s)*(2*Math.PI)/p ));
+ return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*1-s)*(2*Math.PI)/p )*.5 + 1;
+ },
+ easeInBack: function (t) {
+ var s = 1.70158;
+ return 1*(t/=1)*t*((s+1)*t - s);
+ },
+ easeOutBack: function (t) {
+ var s = 1.70158;
+ return 1*((t=t/1-1)*t*((s+1)*t + s) + 1);
+ },
+ easeInOutBack: function (t) {
+ 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);
+ },
+ easeInBounce: function (t) {
+ return 1 - animationOptions.easeOutBounce (1-t);
+ },
+ easeOutBounce: function (t) {
+ if ((t/=1) < (1/2.75)) {
+ return 1*(7.5625*t*t);
+ } else if (t < (2/2.75)) {
+ return 1*(7.5625*(t-=(1.5/2.75))*t + .75);
+ } else if (t < (2.5/2.75)) {
+ return 1*(7.5625*(t-=(2.25/2.75))*t + .9375);
+ } else {
+ return 1*(7.5625*(t-=(2.625/2.75))*t + .984375);
+ }
+ },
+ easeInOutBounce: function (t) {
+ if (t < 1/2) return animationOptions.easeInBounce (t*2) * .5;
+ return animationOptions.easeOutBounce (t*2-1) * .5 + 1*.5;
+ }
+ };
+
+ //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 : []
+ }
+ 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))}));
+ }
+ }
+ }
+
+ 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 : []
+ }
+ 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))}));
+ }
+ }
+ }
+
+ 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);
+ ctx.rotate(rotationDegree);
+ //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.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);
+
+ function drawPieSegments (animationDecimal){
+ var cumulativeAngle = -Math.PI/2,
+ 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++){
+ var segmentAngle = rotateAnimation * ((data[i].value/segmentTotal) * (Math.PI*2));
+ ctx.beginPath();
+ ctx.arc(width/2,height/2,scaleAnimation * pieRadius,cumulativeAngle,cumulativeAngle + segmentAngle);
+ ctx.lineTo(width/2,height/2);
+ 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,
+ rotateAnimation = 1;
+ if (config.animation) {
+ if (config.animateScale) {
+ scaleAnimation = animationDecimal;
+ }
+ if (config.animateRotate){
+ rotateAnimation = animationDecimal;
+ }
+ }
+ for (var i=0; i<data.length; i++){
+ var segmentAngle = rotateAnimation * ((data[i].value/segmentTotal) * (Math.PI*2));
+ ctx.beginPath();
+ ctx.arc(width/2,height/2,scaleAnimation * doughnutRadius,cumulativeAngle,cumulativeAngle + segmentAngle,false);
+ ctx.arc(width/2,height/2,scaleAnimation * cutoutRadius,cumulativeAngle + segmentAngle,cumulativeAngle,true);
+ 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 {
+ calculatedScale = {
+ steps : config.scaleSteps,
+ stepValue : config.scaleStepWidth,
+ 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))}));
+ }
+ }
+ }
+
+ 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();
+ }
+ }
+ }
+
+ function yPos(dataSet,iteration){
+ return xAxisPosY - animPc*(calculateOffset(data.datasets[dataSet].data[iteration],calculatedScale,scaleHop));
+ }
+ function xPos(iteration){
+ return yAxisPosX + (valueHop * iteration);
+ }
+ }
+ 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,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 : []
+ }
+ 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))}));
+ }
+ }
+ }
+
+ 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);
+
+ function animateFrame(){
+ var easeAdjustedAnimationPercent =(config.animation)? CapValue(easingFunction(percentAnimComplete),null,0) : 1;
+ clear(ctx);
+ if(config.scaleOverlay){
+ drawData(easeAdjustedAnimationPercent);
+ drawScale();
+ } else {
+ drawScale();
+ drawData(easeAdjustedAnimationPercent);
+ }
+ }
+ function animLoop(){
+ //We need to check if the animation is incomplete (less than 1), or complete (1).
+ percentAnimComplete += animFrameAmount;
+ animateFrame();
+ //Stop the loop continuing forever
+ if (percentAnimComplete <= 1){
+ requestAnimFrame(animLoop);
+ }
+ 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 ||
+ 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);
+ //var graphRange = (Math.ceil(rangeMultipland) * Math.pow(10, rangeOrderOfMagnitude));
+ 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);
+
+
+ while(numberOfSteps < minSteps || numberOfSteps > maxSteps) {
+ if (numberOfSteps < minSteps){
+ stepValue /= 2;
+ numberOfSteps = Math.round(graphRange/stepValue);
+ }
+ else{
+ stepValue *=2;
+ 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.
+
+ //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))}));
+ }
+ }
+
+ return {
+ steps : numberOfSteps,
+ stepValue : stepValue,
+ graphMin : graphMin,
+ labels : labels
+
+ }
+
+ function calculateOrderOfMagnitude(val){
+ return Math.floor(Math.log(val) / Math.LN10);
+ }
+
+
+ }
+
+ //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;
+ }
+
+ }
+ 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, " ")
+ .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;
+ };
+}
+
+
+
--- /dev/null
+$(window).load(function() {
+ var lineChartData = {
+ labels : ["January","February","March","April","May","June","July"],
+ datasets : [
+ {
+ fillColor : "rgba(220,220,220,0.5)",
+ strokeColor : "rgba(220,220,220,1)",
+ pointColor : "rgba(220,220,220,1)",
+ pointStrokeColor : "#fff",
+ data : [65,59,90,81,56,55,40]
+ },
+ {
+ fillColor : "rgba(151,187,205,0.5)",
+ strokeColor : "rgba(151,187,205,1)",
+ pointColor : "rgba(151,187,205,1)",
+ pointStrokeColor : "#fff",
+ data : [28,48,40,19,96,27,100]
+ }
+ ]
+ };
+
+ var barChartData = {
+ labels : ["January","February","March","April","May","June","July"],
+ datasets : [
+ {
+ fillColor : "rgba(220,220,220,0.5)",
+ strokeColor : "rgba(220,220,220,1)",
+ data : [65,59,90,81,56,55,40]
+ },
+ {
+ fillColor : "rgba(151,187,205,0.5)",
+ strokeColor : "rgba(151,187,205,1)",
+ data : [28,48,40,19,96,27,100]
+ }
+ ]
+
+ };
+
+ var radarChartData = {
+ labels : ["A","B","C","D","E","F","G"],
+ datasets : [
+ {
+ fillColor : "rgba(220,220,220,0.5)",
+ strokeColor : "rgba(220,220,220,1)",
+ pointColor : "rgba(220,220,220,1)",
+ pointStrokeColor : "#fff",
+ data : [65,59,90,81,56,55,40]
+ },
+ {
+ fillColor : "rgba(151,187,205,0.5)",
+ strokeColor : "rgba(151,187,205,1)",
+ pointColor : "rgba(151,187,205,1)",
+ pointStrokeColor : "#fff",
+ data : [28,48,40,19,96,27,100]
+ }
+ ]
+
+ };
+ var pieChartData = [
+ {
+ value: 30,
+ color:"#F38630"
+ },
+ {
+ value : 50,
+ color : "#E0E4CC"
+ },
+ {
+ value : 100,
+ color : "#69D2E7"
+ }
+
+ ];
+ var polarAreaChartData = [
+ {
+ value : 62,
+ color: "#D97041"
+ },
+ {
+ value : 70,
+ color: "#C7604C"
+ },
+ {
+ value : 41,
+ color: "#21323D"
+ },
+ {
+ value : 24,
+ color: "#9D9B7F"
+ },
+ {
+ value : 55,
+ color: "#7D4F6D"
+ },
+ {
+ value : 18,
+ color: "#584A5E"
+ }
+ ];
+ var doughnutChartData = [
+ {
+ value: 30,
+ color:"#F7464A"
+ },
+ {
+ value : 50,
+ color : "#46BFBD"
+ },
+ {
+ value : 100,
+ color : "#FDB45C"
+ },
+ {
+ value : 40,
+ color : "#949FB1"
+ },
+ {
+ value : 120,
+ color : "#4D5360"
+ }
+
+ ];
+
+ var globalGraphSettings = {animation : Modernizr.canvas};
+
+ setIntroChart();
+
+ function setIntroChart(){
+ var ctx = document.getElementById("introChart").getContext("2d");
+
+ new Chart(ctx).Line(lineChartData,{animation: Modernizr.canvas, scaleShowLabels : false, scaleFontColor : "#767C8D"});
+ };
+
+ function showLineChart(){
+ var ctx = document.getElementById("lineChartCanvas").getContext("2d");
+ new Chart(ctx).Line(lineChartData,globalGraphSettings);
+ };
+ function showBarChart(){
+ var ctx = document.getElementById("barChartCanvas").getContext("2d");
+ new Chart(ctx).Bar(barChartData,globalGraphSettings);
+ };
+ function showRadarChart(){
+ var ctx = document.getElementById("radarChartCanvas").getContext("2d");
+ new Chart(ctx).Radar(radarChartData,globalGraphSettings);
+ }
+ function showPolarAreaChart(){
+ var ctx = document.getElementById("polarAreaChartCanvas").getContext("2d");
+ new Chart(ctx).PolarArea(polarAreaChartData,globalGraphSettings);
+ }
+ function showPieChart(){
+ var ctx = document.getElementById("pieChartCanvas").getContext("2d");
+ new Chart(ctx).Pie(pieChartData,globalGraphSettings);
+ };
+ function showDoughnutChart(){
+ var ctx = document.getElementById("doughnutChartCanvas").getContext("2d");
+ new Chart(ctx).Doughnut(doughnutChartData,globalGraphSettings);
+ };
+
+ var graphInitDelay = 300;
+
+ //Set up each of the inview events here.
+ $("#lineChart").on("inview",function(){
+ var $this = $(this);
+ $this.removeClass("hidden").off("inview");
+ setTimeout(showLineChart,graphInitDelay);
+ });
+ $("#barChart").on("inview",function(){
+ var $this = $(this);
+ $this.removeClass("hidden").off("inview");
+ setTimeout(showBarChart,graphInitDelay);
+ });
+
+ $("#radarChart").on("inview",function(){
+ var $this = $(this);
+ $this.removeClass("hidden").off("inview");
+ setTimeout(showRadarChart,graphInitDelay);
+ });
+ $("#pieChart").on("inview",function(){
+ var $this = $(this);
+ $this.removeClass("hidden").off("inview");
+ setTimeout(showPieChart,graphInitDelay);
+ });
+ $("#polarAreaChart").on("inview",function(){
+ var $this = $(this);
+ $this.removeClass("hidden").off("inview");
+ setTimeout(showPolarAreaChart,graphInitDelay);
+ });
+ $("#doughnutChart").on("inview",function(){
+ var $this = $(this);
+ $this.removeClass("hidden").off("inview");
+ setTimeout(showDoughnutChart,graphInitDelay);
+ });
+
+ });
+
+ /**
+ * author Christopher Blum
+ * - based on the idea of Remy Sharp, http://remysharp.com/2009/01/26/element-in-view-event-plugin/
+ * - forked from http://github.com/zuk/jquery.inview/
+ */
+ (function ($) {
+ var inviewObjects = {}, viewportSize, viewportOffset,
+ d = document, w = window, documentElement = d.documentElement, expando = $.expando;
+
+ $.event.special.inview = {
+ add: function(data) {
+ inviewObjects[data.guid + "-" + this[expando]] = { data: data, $element: $(this) };
+ },
+
+ remove: function(data) {
+ try { delete inviewObjects[data.guid + "-" + this[expando]]; } catch(e) {}
+ }
+ };
+
+ function getViewportSize() {
+ var mode, domObject, size = { height: w.innerHeight, width: w.innerWidth };
+
+ // if this is correct then return it. iPad has compat Mode, so will
+ // go into check clientHeight/clientWidth (which has the wrong value).
+ if (!size.height) {
+ mode = d.compatMode;
+ if (mode || !$.support.boxModel) { // IE, Gecko
+ domObject = mode === 'CSS1Compat' ?
+ documentElement : // Standards
+ d.body; // Quirks
+ size = {
+ height: domObject.clientHeight,
+ width: domObject.clientWidth
+ };
+ }
+ }
+
+ return size;
+ }
+
+ function getViewportOffset() {
+ return {
+ top: w.pageYOffset || documentElement.scrollTop || d.body.scrollTop,
+ left: w.pageXOffset || documentElement.scrollLeft || d.body.scrollLeft
+ };
+ }
+
+ function checkInView() {
+ var $elements = $(), elementsLength, i = 0;
+
+ $.each(inviewObjects, function(i, inviewObject) {
+ var selector = inviewObject.data.selector,
+ $element = inviewObject.$element;
+ $elements = $elements.add(selector ? $element.find(selector) : $element);
+ });
+
+ elementsLength = $elements.length;
+ if (elementsLength) {
+ viewportSize = viewportSize || getViewportSize();
+ viewportOffset = viewportOffset || getViewportOffset();
+
+ for (; i<elementsLength; i++) {
+ // Ignore elements that are not in the DOM tree
+ if (!$.contains(documentElement, $elements[i])) {
+ continue;
+ }
+
+ var $element = $($elements[i]),
+ elementSize = { height: $element.height(), width: $element.width() },
+ elementOffset = $element.offset(),
+ inView = $element.data('inview'),
+ visiblePartX,
+ visiblePartY,
+ visiblePartsMerged;
+
+ // Don't ask me why because I haven't figured out yet:
+ // viewportOffset and viewportSize are sometimes suddenly null in Firefox 5.
+ // Even though it sounds weird:
+ // It seems that the execution of this function is interferred by the onresize/onscroll event
+ // where viewportOffset and viewportSize are unset
+ if (!viewportOffset || !viewportSize) {
+ return;
+ }
+
+ if (elementOffset.top + elementSize.height > viewportOffset.top &&
+ elementOffset.top < viewportOffset.top + viewportSize.height &&
+ elementOffset.left + elementSize.width > viewportOffset.left &&
+ elementOffset.left < viewportOffset.left + viewportSize.width) {
+ visiblePartX = (viewportOffset.left > elementOffset.left ?
+ 'right' : (viewportOffset.left + viewportSize.width) < (elementOffset.left + elementSize.width) ?
+ 'left' : 'both');
+ visiblePartY = (viewportOffset.top > elementOffset.top ?
+ 'bottom' : (viewportOffset.top + viewportSize.height) < (elementOffset.top + elementSize.height) ?
+ 'top' : 'both');
+ visiblePartsMerged = visiblePartX + "-" + visiblePartY;
+ if (!inView || inView !== visiblePartsMerged) {
+ $element.data('inview', visiblePartsMerged).trigger('inview', [true, visiblePartX, visiblePartY]);
+ }
+ } else if (inView) {
+ $element.data('inview', false).trigger('inview', [false]);
+ }
+ }
+ }
+ }
+
+ $(w).bind("scroll resize", function() {
+ viewportSize = viewportOffset = null;
+ });
+
+ // IE < 9 scrolls to focused elements without firing the "scroll" event
+ if (!documentElement.addEventListener && documentElement.attachEvent) {
+ documentElement.attachEvent("onfocusin", function() {
+ viewportOffset = null;
+ });
+ }
+
+ // Use setInterval in order to also make sure this captures elements within
+ // "overflow:scroll" elements or elements that appeared in the dom tree due to
+ // dom manipulation and reflow
+ // old: $(window).scroll(checkInView);
+ //
+ // By the way, iOS (iPad, iPhone, ...) seems to not execute, or at least delays
+ // intervals while the user scrolls. Therefore the inview event might fire a bit late there
+ setInterval(checkInView, 250);
+ })(jQuery);
\ No newline at end of file
--- /dev/null
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// Known Issues:
+//
+// * Patterns only support repeat.
+// * Radial gradient are not implemented. The VML version of these look very
+// different from the canvas one.
+// * Clipping paths are not implemented.
+// * Coordsize. The width and height attribute have higher priority than the
+// width and height style values which isn't correct.
+// * Painting mode isn't implemented.
+// * Canvas width/height should is using content-box by default. IE in
+// Quirks mode will draw the canvas using border-box. Either change your
+// doctype to HTML5
+// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
+// or use Box Sizing Behavior from WebFX
+// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
+// * Non uniform scaling does not correctly scale strokes.
+// * Optimize. There is always room for speed improvements.
+
+// Only add this code if we do not already have a canvas implementation
+if (!document.createElement('canvas').getContext) {
+
+(function() {
+
+ // alias some functions to make (compiled) code shorter
+ var m = Math;
+ var mr = m.round;
+ var ms = m.sin;
+ var mc = m.cos;
+ var abs = m.abs;
+ var sqrt = m.sqrt;
+
+ // this is used for sub pixel precision
+ var Z = 10;
+ var Z2 = Z / 2;
+
+ var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
+
+ /**
+ * This funtion is assigned to the <canvas> elements as element.getContext().
+ * @this {HTMLElement}
+ * @return {CanvasRenderingContext2D_}
+ */
+ function getContext() {
+ return this.context_ ||
+ (this.context_ = new CanvasRenderingContext2D_(this));
+ }
+
+ var slice = Array.prototype.slice;
+
+ /**
+ * Binds a function to an object. The returned function will always use the
+ * passed in {@code obj} as {@code this}.
+ *
+ * Example:
+ *
+ * g = bind(f, obj, a, b)
+ * g(c, d) // will do f.call(obj, a, b, c, d)
+ *
+ * @param {Function} f The function to bind the object to
+ * @param {Object} obj The object that should act as this when the function
+ * is called
+ * @param {*} var_args Rest arguments that will be used as the initial
+ * arguments when the function is called
+ * @return {Function} A new function that has bound this
+ */
+ function bind(f, obj, var_args) {
+ var a = slice.call(arguments, 2);
+ return function() {
+ return f.apply(obj, a.concat(slice.call(arguments)));
+ };
+ }
+
+ function encodeHtmlAttribute(s) {
+ return String(s).replace(/&/g, '&').replace(/"/g, '"');
+ }
+
+ function addNamespace(doc, prefix, urn) {
+ if (!doc.namespaces[prefix]) {
+ doc.namespaces.add(prefix, urn, '#default#VML');
+ }
+ }
+
+ function addNamespacesAndStylesheet(doc) {
+ addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
+ addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
+
+ // Setup default CSS. Only add one style sheet per document
+ if (!doc.styleSheets['ex_canvas_']) {
+ var ss = doc.createStyleSheet();
+ ss.owningElement.id = 'ex_canvas_';
+ ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
+ // default size is 300x150 in Gecko and Opera
+ 'text-align:left;width:300px;height:150px}';
+ }
+ }
+
+ // Add namespaces and stylesheet at startup.
+ addNamespacesAndStylesheet(document);
+
+ var G_vmlCanvasManager_ = {
+ init: function(opt_doc) {
+ var doc = opt_doc || document;
+ // Create a dummy element so that IE will allow canvas elements to be
+ // recognized.
+ doc.createElement('canvas');
+ doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
+ },
+
+ init_: function(doc) {
+ // find all canvas elements
+ var els = doc.getElementsByTagName('canvas');
+ for (var i = 0; i < els.length; i++) {
+ this.initElement(els[i]);
+ }
+ },
+
+ /**
+ * Public initializes a canvas element so that it can be used as canvas
+ * element from now on. This is called automatically before the page is
+ * loaded but if you are creating elements using createElement you need to
+ * make sure this is called on the element.
+ * @param {HTMLElement} el The canvas element to initialize.
+ * @return {HTMLElement} the element that was created.
+ */
+ initElement: function(el) {
+ if (!el.getContext) {
+ el.getContext = getContext;
+
+ // Add namespaces and stylesheet to document of the element.
+ addNamespacesAndStylesheet(el.ownerDocument);
+
+ // Remove fallback content. There is no way to hide text nodes so we
+ // just remove all childNodes. We could hide all elements and remove
+ // text nodes but who really cares about the fallback content.
+ el.innerHTML = '';
+
+ // do not use inline function because that will leak memory
+ el.attachEvent('onpropertychange', onPropertyChange);
+ el.attachEvent('onresize', onResize);
+
+ var attrs = el.attributes;
+ if (attrs.width && attrs.width.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setWidth_(attrs.width.nodeValue);
+ el.style.width = attrs.width.nodeValue + 'px';
+ } else {
+ el.width = el.clientWidth;
+ }
+ if (attrs.height && attrs.height.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setHeight_(attrs.height.nodeValue);
+ el.style.height = attrs.height.nodeValue + 'px';
+ } else {
+ el.height = el.clientHeight;
+ }
+ //el.getContext().setCoordsize_()
+ }
+ return el;
+ }
+ };
+
+ function onPropertyChange(e) {
+ var el = e.srcElement;
+
+ switch (e.propertyName) {
+ case 'width':
+ el.getContext().clearRect();
+ el.style.width = el.attributes.width.nodeValue + 'px';
+ // In IE8 this does not trigger onresize.
+ el.firstChild.style.width = el.clientWidth + 'px';
+ break;
+ case 'height':
+ el.getContext().clearRect();
+ el.style.height = el.attributes.height.nodeValue + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
+ break;
+ }
+ }
+
+ function onResize(e) {
+ var el = e.srcElement;
+ if (el.firstChild) {
+ el.firstChild.style.width = el.clientWidth + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
+ }
+ }
+
+ G_vmlCanvasManager_.init();
+
+ // precompute "00" to "FF"
+ var decToHex = [];
+ for (var i = 0; i < 16; i++) {
+ for (var j = 0; j < 16; j++) {
+ decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
+ }
+ }
+
+ function createMatrixIdentity() {
+ return [
+ [1, 0, 0],
+ [0, 1, 0],
+ [0, 0, 1]
+ ];
+ }
+
+ function matrixMultiply(m1, m2) {
+ var result = createMatrixIdentity();
+
+ for (var x = 0; x < 3; x++) {
+ for (var y = 0; y < 3; y++) {
+ var sum = 0;
+
+ for (var z = 0; z < 3; z++) {
+ sum += m1[x][z] * m2[z][y];
+ }
+
+ result[x][y] = sum;
+ }
+ }
+ return result;
+ }
+
+ function copyState(o1, o2) {
+ o2.fillStyle = o1.fillStyle;
+ o2.lineCap = o1.lineCap;
+ o2.lineJoin = o1.lineJoin;
+ o2.lineWidth = o1.lineWidth;
+ o2.miterLimit = o1.miterLimit;
+ o2.shadowBlur = o1.shadowBlur;
+ o2.shadowColor = o1.shadowColor;
+ o2.shadowOffsetX = o1.shadowOffsetX;
+ o2.shadowOffsetY = o1.shadowOffsetY;
+ o2.strokeStyle = o1.strokeStyle;
+ o2.globalAlpha = o1.globalAlpha;
+ o2.font = o1.font;
+ o2.textAlign = o1.textAlign;
+ o2.textBaseline = o1.textBaseline;
+ o2.arcScaleX_ = o1.arcScaleX_;
+ o2.arcScaleY_ = o1.arcScaleY_;
+ o2.lineScale_ = o1.lineScale_;
+ }
+
+ var colorData = {
+ aliceblue: '#F0F8FF',
+ antiquewhite: '#FAEBD7',
+ aquamarine: '#7FFFD4',
+ azure: '#F0FFFF',
+ beige: '#F5F5DC',
+ bisque: '#FFE4C4',
+ black: '#000000',
+ blanchedalmond: '#FFEBCD',
+ blueviolet: '#8A2BE2',
+ brown: '#A52A2A',
+ burlywood: '#DEB887',
+ cadetblue: '#5F9EA0',
+ chartreuse: '#7FFF00',
+ chocolate: '#D2691E',
+ coral: '#FF7F50',
+ cornflowerblue: '#6495ED',
+ cornsilk: '#FFF8DC',
+ crimson: '#DC143C',
+ cyan: '#00FFFF',
+ darkblue: '#00008B',
+ darkcyan: '#008B8B',
+ darkgoldenrod: '#B8860B',
+ darkgray: '#A9A9A9',
+ darkgreen: '#006400',
+ darkgrey: '#A9A9A9',
+ darkkhaki: '#BDB76B',
+ darkmagenta: '#8B008B',
+ darkolivegreen: '#556B2F',
+ darkorange: '#FF8C00',
+ darkorchid: '#9932CC',
+ darkred: '#8B0000',
+ darksalmon: '#E9967A',
+ darkseagreen: '#8FBC8F',
+ darkslateblue: '#483D8B',
+ darkslategray: '#2F4F4F',
+ darkslategrey: '#2F4F4F',
+ darkturquoise: '#00CED1',
+ darkviolet: '#9400D3',
+ deeppink: '#FF1493',
+ deepskyblue: '#00BFFF',
+ dimgray: '#696969',
+ dimgrey: '#696969',
+ dodgerblue: '#1E90FF',
+ firebrick: '#B22222',
+ floralwhite: '#FFFAF0',
+ forestgreen: '#228B22',
+ gainsboro: '#DCDCDC',
+ ghostwhite: '#F8F8FF',
+ gold: '#FFD700',
+ goldenrod: '#DAA520',
+ grey: '#808080',
+ greenyellow: '#ADFF2F',
+ honeydew: '#F0FFF0',
+ hotpink: '#FF69B4',
+ indianred: '#CD5C5C',
+ indigo: '#4B0082',
+ ivory: '#FFFFF0',
+ khaki: '#F0E68C',
+ lavender: '#E6E6FA',
+ lavenderblush: '#FFF0F5',
+ lawngreen: '#7CFC00',
+ lemonchiffon: '#FFFACD',
+ lightblue: '#ADD8E6',
+ lightcoral: '#F08080',
+ lightcyan: '#E0FFFF',
+ lightgoldenrodyellow: '#FAFAD2',
+ lightgreen: '#90EE90',
+ lightgrey: '#D3D3D3',
+ lightpink: '#FFB6C1',
+ lightsalmon: '#FFA07A',
+ lightseagreen: '#20B2AA',
+ lightskyblue: '#87CEFA',
+ lightslategray: '#778899',
+ lightslategrey: '#778899',
+ lightsteelblue: '#B0C4DE',
+ lightyellow: '#FFFFE0',
+ limegreen: '#32CD32',
+ linen: '#FAF0E6',
+ magenta: '#FF00FF',
+ mediumaquamarine: '#66CDAA',
+ mediumblue: '#0000CD',
+ mediumorchid: '#BA55D3',
+ mediumpurple: '#9370DB',
+ mediumseagreen: '#3CB371',
+ mediumslateblue: '#7B68EE',
+ mediumspringgreen: '#00FA9A',
+ mediumturquoise: '#48D1CC',
+ mediumvioletred: '#C71585',
+ midnightblue: '#191970',
+ mintcream: '#F5FFFA',
+ mistyrose: '#FFE4E1',
+ moccasin: '#FFE4B5',
+ navajowhite: '#FFDEAD',
+ oldlace: '#FDF5E6',
+ olivedrab: '#6B8E23',
+ orange: '#FFA500',
+ orangered: '#FF4500',
+ orchid: '#DA70D6',
+ palegoldenrod: '#EEE8AA',
+ palegreen: '#98FB98',
+ paleturquoise: '#AFEEEE',
+ palevioletred: '#DB7093',
+ papayawhip: '#FFEFD5',
+ peachpuff: '#FFDAB9',
+ peru: '#CD853F',
+ pink: '#FFC0CB',
+ plum: '#DDA0DD',
+ powderblue: '#B0E0E6',
+ rosybrown: '#BC8F8F',
+ royalblue: '#4169E1',
+ saddlebrown: '#8B4513',
+ salmon: '#FA8072',
+ sandybrown: '#F4A460',
+ seagreen: '#2E8B57',
+ seashell: '#FFF5EE',
+ sienna: '#A0522D',
+ skyblue: '#87CEEB',
+ slateblue: '#6A5ACD',
+ slategray: '#708090',
+ slategrey: '#708090',
+ snow: '#FFFAFA',
+ springgreen: '#00FF7F',
+ steelblue: '#4682B4',
+ tan: '#D2B48C',
+ thistle: '#D8BFD8',
+ tomato: '#FF6347',
+ turquoise: '#40E0D0',
+ violet: '#EE82EE',
+ wheat: '#F5DEB3',
+ whitesmoke: '#F5F5F5',
+ yellowgreen: '#9ACD32'
+ };
+
+
+ function getRgbHslContent(styleString) {
+ var start = styleString.indexOf('(', 3);
+ var end = styleString.indexOf(')', start + 1);
+ var parts = styleString.substring(start + 1, end).split(',');
+ // add alpha if needed
+ if (parts.length != 4 || styleString.charAt(3) != 'a') {
+ parts[3] = 1;
+ }
+ return parts;
+ }
+
+ function percent(s) {
+ return parseFloat(s) / 100;
+ }
+
+ function clamp(v, min, max) {
+ return Math.min(max, Math.max(min, v));
+ }
+
+ function hslToRgb(parts){
+ var r, g, b, h, s, l;
+ h = parseFloat(parts[0]) / 360 % 360;
+ if (h < 0)
+ h++;
+ s = clamp(percent(parts[1]), 0, 1);
+ l = clamp(percent(parts[2]), 0, 1);
+ if (s == 0) {
+ r = g = b = l; // achromatic
+ } else {
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ var p = 2 * l - q;
+ r = hueToRgb(p, q, h + 1 / 3);
+ g = hueToRgb(p, q, h);
+ b = hueToRgb(p, q, h - 1 / 3);
+ }
+
+ return '#' + decToHex[Math.floor(r * 255)] +
+ decToHex[Math.floor(g * 255)] +
+ decToHex[Math.floor(b * 255)];
+ }
+
+ function hueToRgb(m1, m2, h) {
+ if (h < 0)
+ h++;
+ if (h > 1)
+ h--;
+
+ if (6 * h < 1)
+ return m1 + (m2 - m1) * 6 * h;
+ else if (2 * h < 1)
+ return m2;
+ else if (3 * h < 2)
+ return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+ else
+ return m1;
+ }
+
+ var processStyleCache = {};
+
+ function processStyle(styleString) {
+ if (styleString in processStyleCache) {
+ return processStyleCache[styleString];
+ }
+
+ var str, alpha = 1;
+
+ styleString = String(styleString);
+ if (styleString.charAt(0) == '#') {
+ str = styleString;
+ } else if (/^rgb/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ var str = '#', n;
+ for (var i = 0; i < 3; i++) {
+ if (parts[i].indexOf('%') != -1) {
+ n = Math.floor(percent(parts[i]) * 255);
+ } else {
+ n = +parts[i];
+ }
+ str += decToHex[clamp(n, 0, 255)];
+ }
+ alpha = +parts[3];
+ } else if (/^hsl/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ str = hslToRgb(parts);
+ alpha = parts[3];
+ } else {
+ str = colorData[styleString] || styleString;
+ }
+ return processStyleCache[styleString] = {color: str, alpha: alpha};
+ }
+
+ var DEFAULT_STYLE = {
+ style: 'normal',
+ variant: 'normal',
+ weight: 'normal',
+ size: 10,
+ family: 'sans-serif'
+ };
+
+ // Internal text style cache
+ var fontStyleCache = {};
+
+ function processFontStyle(styleString) {
+ if (fontStyleCache[styleString]) {
+ return fontStyleCache[styleString];
+ }
+
+ var el = document.createElement('div');
+ var style = el.style;
+ try {
+ style.font = styleString;
+ } catch (ex) {
+ // Ignore failures to set to invalid font.
+ }
+
+ return fontStyleCache[styleString] = {
+ style: style.fontStyle || DEFAULT_STYLE.style,
+ variant: style.fontVariant || DEFAULT_STYLE.variant,
+ weight: style.fontWeight || DEFAULT_STYLE.weight,
+ size: style.fontSize || DEFAULT_STYLE.size,
+ family: style.fontFamily || DEFAULT_STYLE.family
+ };
+ }
+
+ function getComputedStyle(style, element) {
+ var computedStyle = {};
+
+ for (var p in style) {
+ computedStyle[p] = style[p];
+ }
+
+ // Compute the size
+ var canvasFontSize = parseFloat(element.currentStyle.fontSize),
+ fontSize = parseFloat(style.size);
+
+ if (typeof style.size == 'number') {
+ computedStyle.size = style.size;
+ } else if (style.size.indexOf('px') != -1) {
+ computedStyle.size = fontSize;
+ } else if (style.size.indexOf('em') != -1) {
+ computedStyle.size = canvasFontSize * fontSize;
+ } else if(style.size.indexOf('%') != -1) {
+ computedStyle.size = (canvasFontSize / 100) * fontSize;
+ } else if (style.size.indexOf('pt') != -1) {
+ computedStyle.size = fontSize / .75;
+ } else {
+ computedStyle.size = canvasFontSize;
+ }
+
+ // Different scaling between normal text and VML text. This was found using
+ // trial and error to get the same size as non VML text.
+ computedStyle.size *= 0.981;
+
+ return computedStyle;
+ }
+
+ function buildStyle(style) {
+ return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
+ style.size + 'px ' + style.family;
+ }
+
+ var lineCapMap = {
+ 'butt': 'flat',
+ 'round': 'round'
+ };
+
+ function processLineCap(lineCap) {
+ return lineCapMap[lineCap] || 'square';
+ }
+
+ /**
+ * This class implements CanvasRenderingContext2D interface as described by
+ * the WHATWG.
+ * @param {HTMLElement} canvasElement The element that the 2D context should
+ * be associated with
+ */
+ function CanvasRenderingContext2D_(canvasElement) {
+ this.m_ = createMatrixIdentity();
+
+ this.mStack_ = [];
+ this.aStack_ = [];
+ this.currentPath_ = [];
+
+ // Canvas context properties
+ this.strokeStyle = '#000';
+ this.fillStyle = '#000';
+
+ this.lineWidth = 1;
+ this.lineJoin = 'miter';
+ this.lineCap = 'butt';
+ this.miterLimit = Z * 1;
+ this.globalAlpha = 1;
+ this.font = '10px sans-serif';
+ this.textAlign = 'left';
+ this.textBaseline = 'alphabetic';
+ this.canvas = canvasElement;
+
+ var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' +
+ canvasElement.clientHeight + 'px;overflow:hidden;position:absolute';
+ var el = canvasElement.ownerDocument.createElement('div');
+ el.style.cssText = cssText;
+ canvasElement.appendChild(el);
+
+ var overlayEl = el.cloneNode(false);
+ // Use a non transparent background.
+ overlayEl.style.backgroundColor = 'red';
+ overlayEl.style.filter = 'alpha(opacity=0)';
+ canvasElement.appendChild(overlayEl);
+
+ this.element_ = el;
+ this.arcScaleX_ = 1;
+ this.arcScaleY_ = 1;
+ this.lineScale_ = 1;
+ }
+
+ var contextPrototype = CanvasRenderingContext2D_.prototype;
+ contextPrototype.clearRect = function() {
+ if (this.textMeasureEl_) {
+ this.textMeasureEl_.removeNode(true);
+ this.textMeasureEl_ = null;
+ }
+ this.element_.innerHTML = '';
+ };
+
+ contextPrototype.beginPath = function() {
+ // TODO: Branch current matrix so that save/restore has no effect
+ // as per safari docs.
+ this.currentPath_ = [];
+ };
+
+ contextPrototype.moveTo = function(aX, aY) {
+ var p = getCoords(this, aX, aY);
+ this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
+ this.currentX_ = p.x;
+ this.currentY_ = p.y;
+ };
+
+ contextPrototype.lineTo = function(aX, aY) {
+ var p = getCoords(this, aX, aY);
+ this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
+
+ this.currentX_ = p.x;
+ this.currentY_ = p.y;
+ };
+
+ contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
+ aCP2x, aCP2y,
+ aX, aY) {
+ var p = getCoords(this, aX, aY);
+ var cp1 = getCoords(this, aCP1x, aCP1y);
+ var cp2 = getCoords(this, aCP2x, aCP2y);
+ bezierCurveTo(this, cp1, cp2, p);
+ };
+
+ // Helper function that takes the already fixed cordinates.
+ function bezierCurveTo(self, cp1, cp2, p) {
+ self.currentPath_.push({
+ type: 'bezierCurveTo',
+ cp1x: cp1.x,
+ cp1y: cp1.y,
+ cp2x: cp2.x,
+ cp2y: cp2.y,
+ x: p.x,
+ y: p.y
+ });
+ self.currentX_ = p.x;
+ self.currentY_ = p.y;
+ }
+
+ contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
+ // the following is lifted almost directly from
+ // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
+
+ var cp = getCoords(this, aCPx, aCPy);
+ var p = getCoords(this, aX, aY);
+
+ var cp1 = {
+ x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
+ y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
+ };
+ var cp2 = {
+ x: cp1.x + (p.x - this.currentX_) / 3.0,
+ y: cp1.y + (p.y - this.currentY_) / 3.0
+ };
+
+ bezierCurveTo(this, cp1, cp2, p);
+ };
+
+ contextPrototype.arc = function(aX, aY, aRadius,
+ aStartAngle, aEndAngle, aClockwise) {
+ aRadius *= Z;
+ var arcType = aClockwise ? 'at' : 'wa';
+
+ var xStart = aX + mc(aStartAngle) * aRadius - Z2;
+ var yStart = aY + ms(aStartAngle) * aRadius - Z2;
+
+ var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
+ var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
+
+ // IE won't render arches drawn counter clockwise if xStart == xEnd.
+ if (xStart == xEnd && !aClockwise) {
+ xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
+ // that can be represented in binary
+ }
+
+ var p = getCoords(this, aX, aY);
+ var pStart = getCoords(this, xStart, yStart);
+ var pEnd = getCoords(this, xEnd, yEnd);
+
+ this.currentPath_.push({type: arcType,
+ x: p.x,
+ y: p.y,
+ radius: aRadius,
+ xStart: pStart.x,
+ yStart: pStart.y,
+ xEnd: pEnd.x,
+ yEnd: pEnd.y});
+
+ };
+
+ contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
+ this.moveTo(aX, aY);
+ this.lineTo(aX + aWidth, aY);
+ this.lineTo(aX + aWidth, aY + aHeight);
+ this.lineTo(aX, aY + aHeight);
+ this.closePath();
+ };
+
+ contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
+ var oldPath = this.currentPath_;
+ this.beginPath();
+
+ this.moveTo(aX, aY);
+ this.lineTo(aX + aWidth, aY);
+ this.lineTo(aX + aWidth, aY + aHeight);
+ this.lineTo(aX, aY + aHeight);
+ this.closePath();
+ this.stroke();
+
+ this.currentPath_ = oldPath;
+ };
+
+ contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
+ var oldPath = this.currentPath_;
+ this.beginPath();
+
+ this.moveTo(aX, aY);
+ this.lineTo(aX + aWidth, aY);
+ this.lineTo(aX + aWidth, aY + aHeight);
+ this.lineTo(aX, aY + aHeight);
+ this.closePath();
+ this.fill();
+
+ this.currentPath_ = oldPath;
+ };
+
+ contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
+ var gradient = new CanvasGradient_('gradient');
+ gradient.x0_ = aX0;
+ gradient.y0_ = aY0;
+ gradient.x1_ = aX1;
+ gradient.y1_ = aY1;
+ return gradient;
+ };
+
+ contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
+ aX1, aY1, aR1) {
+ var gradient = new CanvasGradient_('gradientradial');
+ gradient.x0_ = aX0;
+ gradient.y0_ = aY0;
+ gradient.r0_ = aR0;
+ gradient.x1_ = aX1;
+ gradient.y1_ = aY1;
+ gradient.r1_ = aR1;
+ return gradient;
+ };
+
+ contextPrototype.drawImage = function(image, var_args) {
+ var dx, dy, dw, dh, sx, sy, sw, sh;
+
+ // to find the original width we overide the width and height
+ var oldRuntimeWidth = image.runtimeStyle.width;
+ var oldRuntimeHeight = image.runtimeStyle.height;
+ image.runtimeStyle.width = 'auto';
+ image.runtimeStyle.height = 'auto';
+
+ // get the original size
+ var w = image.width;
+ var h = image.height;
+
+ // and remove overides
+ image.runtimeStyle.width = oldRuntimeWidth;
+ image.runtimeStyle.height = oldRuntimeHeight;
+
+ if (arguments.length == 3) {
+ dx = arguments[1];
+ dy = arguments[2];
+ sx = sy = 0;
+ sw = dw = w;
+ sh = dh = h;
+ } else if (arguments.length == 5) {
+ dx = arguments[1];
+ dy = arguments[2];
+ dw = arguments[3];
+ dh = arguments[4];
+ sx = sy = 0;
+ sw = w;
+ sh = h;
+ } else if (arguments.length == 9) {
+ sx = arguments[1];
+ sy = arguments[2];
+ sw = arguments[3];
+ sh = arguments[4];
+ dx = arguments[5];
+ dy = arguments[6];
+ dw = arguments[7];
+ dh = arguments[8];
+ } else {
+ throw Error('Invalid number of arguments');
+ }
+
+ var d = getCoords(this, dx, dy);
+
+ var w2 = sw / 2;
+ var h2 = sh / 2;
+
+ var vmlStr = [];
+
+ var W = 10;
+ var H = 10;
+
+ // For some reason that I've now forgotten, using divs didn't work
+ vmlStr.push(' <g_vml_:group',
+ ' coordsize="', Z * W, ',', Z * H, '"',
+ ' coordorigin="0,0"' ,
+ ' style="width:', W, 'px;height:', H, 'px;position:absolute;');
+
+ // If filters are necessary (rotation exists), create them
+ // filters are bog-slow, so only create them if abbsolutely necessary
+ // The following check doesn't account for skews (which don't exist
+ // in the canvas spec (yet) anyway.
+
+ if (this.m_[0][0] != 1 || this.m_[0][1] ||
+ this.m_[1][1] != 1 || this.m_[1][0]) {
+ var filter = [];
+
+ // Note the 12/21 reversal
+ filter.push('M11=', this.m_[0][0], ',',
+ 'M12=', this.m_[1][0], ',',
+ 'M21=', this.m_[0][1], ',',
+ 'M22=', this.m_[1][1], ',',
+ 'Dx=', mr(d.x / Z), ',',
+ 'Dy=', mr(d.y / Z), '');
+
+ // Bounding box calculation (need to minimize displayed area so that
+ // filters don't waste time on unused pixels.
+ var max = d;
+ var c2 = getCoords(this, dx + dw, dy);
+ var c3 = getCoords(this, dx, dy + dh);
+ var c4 = getCoords(this, dx + dw, dy + dh);
+
+ max.x = m.max(max.x, c2.x, c3.x, c4.x);
+ max.y = m.max(max.y, c2.y, c3.y, c4.y);
+
+ vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
+ 'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
+ filter.join(''), ", sizingmethod='clip');");
+
+ } else {
+ vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
+ }
+
+ vmlStr.push(' ">' ,
+ '<g_vml_:image src="', image.src, '"',
+ ' style="width:', Z * dw, 'px;',
+ ' height:', Z * dh, 'px"',
+ ' cropleft="', sx / w, '"',
+ ' croptop="', sy / h, '"',
+ ' cropright="', (w - sx - sw) / w, '"',
+ ' cropbottom="', (h - sy - sh) / h, '"',
+ ' />',
+ '</g_vml_:group>');
+
+ this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
+ };
+
+ contextPrototype.stroke = function(aFill) {
+ var lineStr = [];
+ var lineOpen = false;
+
+ var W = 10;
+ var H = 10;
+
+ lineStr.push('<g_vml_:shape',
+ ' filled="', !!aFill, '"',
+ ' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
+ ' coordorigin="0,0"',
+ ' coordsize="', Z * W, ',', Z * H, '"',
+ ' stroked="', !aFill, '"',
+ ' path="');
+
+ var newSeq = false;
+ var min = {x: null, y: null};
+ var max = {x: null, y: null};
+
+ for (var i = 0; i < this.currentPath_.length; i++) {
+ var p = this.currentPath_[i];
+ var c;
+
+ switch (p.type) {
+ case 'moveTo':
+ c = p;
+ lineStr.push(' m ', mr(p.x), ',', mr(p.y));
+ break;
+ case 'lineTo':
+ lineStr.push(' l ', mr(p.x), ',', mr(p.y));
+ break;
+ case 'close':
+ lineStr.push(' x ');
+ p = null;
+ break;
+ case 'bezierCurveTo':
+ lineStr.push(' c ',
+ mr(p.cp1x), ',', mr(p.cp1y), ',',
+ mr(p.cp2x), ',', mr(p.cp2y), ',',
+ mr(p.x), ',', mr(p.y));
+ break;
+ case 'at':
+ case 'wa':
+ lineStr.push(' ', p.type, ' ',
+ mr(p.x - this.arcScaleX_ * p.radius), ',',
+ mr(p.y - this.arcScaleY_ * p.radius), ' ',
+ mr(p.x + this.arcScaleX_ * p.radius), ',',
+ mr(p.y + this.arcScaleY_ * p.radius), ' ',
+ mr(p.xStart), ',', mr(p.yStart), ' ',
+ mr(p.xEnd), ',', mr(p.yEnd));
+ break;
+ }
+
+
+ // TODO: Following is broken for curves due to
+ // move to proper paths.
+
+ // Figure out dimensions so we can do gradient fills
+ // properly
+ if (p) {
+ if (min.x == null || p.x < min.x) {
+ min.x = p.x;
+ }
+ if (max.x == null || p.x > max.x) {
+ max.x = p.x;
+ }
+ if (min.y == null || p.y < min.y) {
+ min.y = p.y;
+ }
+ if (max.y == null || p.y > max.y) {
+ max.y = p.y;
+ }
+ }
+ }
+ lineStr.push(' ">');
+
+ if (!aFill) {
+ appendStroke(this, lineStr);
+ } else {
+ appendFill(this, lineStr, min, max);
+ }
+
+ lineStr.push('</g_vml_:shape>');
+
+ this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
+ };
+
+ function appendStroke(ctx, lineStr) {
+ var a = processStyle(ctx.strokeStyle);
+ var color = a.color;
+ var opacity = a.alpha * ctx.globalAlpha;
+ var lineWidth = ctx.lineScale_ * ctx.lineWidth;
+
+ // VML cannot correctly render a line if the width is less than 1px.
+ // In that case, we dilute the color to make the line look thinner.
+ if (lineWidth < 1) {
+ opacity *= lineWidth;
+ }
+
+ lineStr.push(
+ '<g_vml_:stroke',
+ ' opacity="', opacity, '"',
+ ' joinstyle="', ctx.lineJoin, '"',
+ ' miterlimit="', ctx.miterLimit, '"',
+ ' endcap="', processLineCap(ctx.lineCap), '"',
+ ' weight="', lineWidth, 'px"',
+ ' color="', color, '" />'
+ );
+ }
+
+ function appendFill(ctx, lineStr, min, max) {
+ var fillStyle = ctx.fillStyle;
+ var arcScaleX = ctx.arcScaleX_;
+ var arcScaleY = ctx.arcScaleY_;
+ var width = max.x - min.x;
+ var height = max.y - min.y;
+ if (fillStyle instanceof CanvasGradient_) {
+ // TODO: Gradients transformed with the transformation matrix.
+ var angle = 0;
+ var focus = {x: 0, y: 0};
+
+ // additional offset
+ var shift = 0;
+ // scale factor for offset
+ var expansion = 1;
+
+ if (fillStyle.type_ == 'gradient') {
+ var x0 = fillStyle.x0_ / arcScaleX;
+ var y0 = fillStyle.y0_ / arcScaleY;
+ var x1 = fillStyle.x1_ / arcScaleX;
+ var y1 = fillStyle.y1_ / arcScaleY;
+ var p0 = getCoords(ctx, x0, y0);
+ var p1 = getCoords(ctx, x1, y1);
+ var dx = p1.x - p0.x;
+ var dy = p1.y - p0.y;
+ angle = Math.atan2(dx, dy) * 180 / Math.PI;
+
+ // The angle should be a non-negative number.
+ if (angle < 0) {
+ angle += 360;
+ }
+
+ // Very small angles produce an unexpected result because they are
+ // converted to a scientific notation string.
+ if (angle < 1e-6) {
+ angle = 0;
+ }
+ } else {
+ var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
+ focus = {
+ x: (p0.x - min.x) / width,
+ y: (p0.y - min.y) / height
+ };
+
+ width /= arcScaleX * Z;
+ height /= arcScaleY * Z;
+ var dimension = m.max(width, height);
+ shift = 2 * fillStyle.r0_ / dimension;
+ expansion = 2 * fillStyle.r1_ / dimension - shift;
+ }
+
+ // We need to sort the color stops in ascending order by offset,
+ // otherwise IE won't interpret it correctly.
+ var stops = fillStyle.colors_;
+ stops.sort(function(cs1, cs2) {
+ return cs1.offset - cs2.offset;
+ });
+
+ var length = stops.length;
+ var color1 = stops[0].color;
+ var color2 = stops[length - 1].color;
+ var opacity1 = stops[0].alpha * ctx.globalAlpha;
+ var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
+
+ var colors = [];
+ for (var i = 0; i < length; i++) {
+ var stop = stops[i];
+ colors.push(stop.offset * expansion + shift + ' ' + stop.color);
+ }
+
+ // When colors attribute is used, the meanings of opacity and o:opacity2
+ // are reversed.
+ lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
+ ' method="none" focus="100%"',
+ ' color="', color1, '"',
+ ' color2="', color2, '"',
+ ' colors="', colors.join(','), '"',
+ ' opacity="', opacity2, '"',
+ ' g_o_:opacity2="', opacity1, '"',
+ ' angle="', angle, '"',
+ ' focusposition="', focus.x, ',', focus.y, '" />');
+ } else if (fillStyle instanceof CanvasPattern_) {
+ if (width && height) {
+ var deltaLeft = -min.x;
+ var deltaTop = -min.y;
+ lineStr.push('<g_vml_:fill',
+ ' position="',
+ deltaLeft / width * arcScaleX * arcScaleX, ',',
+ deltaTop / height * arcScaleY * arcScaleY, '"',
+ ' type="tile"',
+ // TODO: Figure out the correct size to fit the scale.
+ //' size="', w, 'px ', h, 'px"',
+ ' src="', fillStyle.src_, '" />');
+ }
+ } else {
+ var a = processStyle(ctx.fillStyle);
+ var color = a.color;
+ var opacity = a.alpha * ctx.globalAlpha;
+ lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
+ '" />');
+ }
+ }
+
+ contextPrototype.fill = function() {
+ this.stroke(true);
+ };
+
+ contextPrototype.closePath = function() {
+ this.currentPath_.push({type: 'close'});
+ };
+
+ function getCoords(ctx, aX, aY) {
+ var m = ctx.m_;
+ return {
+ x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
+ y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
+ };
+ };
+
+ contextPrototype.save = function() {
+ var o = {};
+ copyState(this, o);
+ this.aStack_.push(o);
+ this.mStack_.push(this.m_);
+ this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
+ };
+
+ contextPrototype.restore = function() {
+ if (this.aStack_.length) {
+ copyState(this.aStack_.pop(), this);
+ this.m_ = this.mStack_.pop();
+ }
+ };
+
+ function matrixIsFinite(m) {
+ return isFinite(m[0][0]) && isFinite(m[0][1]) &&
+ isFinite(m[1][0]) && isFinite(m[1][1]) &&
+ isFinite(m[2][0]) && isFinite(m[2][1]);
+ }
+
+ function setM(ctx, m, updateLineScale) {
+ if (!matrixIsFinite(m)) {
+ return;
+ }
+ ctx.m_ = m;
+
+ if (updateLineScale) {
+ // Get the line scale.
+ // Determinant of this.m_ means how much the area is enlarged by the
+ // transformation. So its square root can be used as a scale factor
+ // for width.
+ var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
+ ctx.lineScale_ = sqrt(abs(det));
+ }
+ }
+
+ contextPrototype.translate = function(aX, aY) {
+ var m1 = [
+ [1, 0, 0],
+ [0, 1, 0],
+ [aX, aY, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_), false);
+ };
+
+ contextPrototype.rotate = function(aRot) {
+ var c = mc(aRot);
+ var s = ms(aRot);
+
+ var m1 = [
+ [c, s, 0],
+ [-s, c, 0],
+ [0, 0, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_), false);
+ };
+
+ contextPrototype.scale = function(aX, aY) {
+ this.arcScaleX_ *= aX;
+ this.arcScaleY_ *= aY;
+ var m1 = [
+ [aX, 0, 0],
+ [0, aY, 0],
+ [0, 0, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_), true);
+ };
+
+ contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
+ var m1 = [
+ [m11, m12, 0],
+ [m21, m22, 0],
+ [dx, dy, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_), true);
+ };
+
+ contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
+ var m = [
+ [m11, m12, 0],
+ [m21, m22, 0],
+ [dx, dy, 1]
+ ];
+
+ setM(this, m, true);
+ };
+
+ /**
+ * The text drawing function.
+ * The maxWidth argument isn't taken in account, since no browser supports
+ * it yet.
+ */
+ contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
+ var m = this.m_,
+ delta = 1000,
+ left = 0,
+ right = delta,
+ offset = {x: 0, y: 0},
+ lineStr = [];
+
+ var fontStyle = getComputedStyle(processFontStyle(this.font),
+ this.element_);
+
+ var fontStyleString = buildStyle(fontStyle);
+
+ var elementStyle = this.element_.currentStyle;
+ var textAlign = this.textAlign.toLowerCase();
+ switch (textAlign) {
+ case 'left':
+ case 'center':
+ case 'right':
+ break;
+ case 'end':
+ textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
+ break;
+ case 'start':
+ textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
+ break;
+ default:
+ textAlign = 'left';
+ }
+
+ // 1.75 is an arbitrary number, as there is no info about the text baseline
+ switch (this.textBaseline) {
+ case 'hanging':
+ case 'top':
+ offset.y = fontStyle.size / 1.75;
+ break;
+ case 'middle':
+ break;
+ default:
+ case null:
+ case 'alphabetic':
+ case 'ideographic':
+ case 'bottom':
+ offset.y = -fontStyle.size / 2.25;
+ break;
+ }
+
+ switch(textAlign) {
+ case 'right':
+ left = delta;
+ right = 0.05;
+ break;
+ case 'center':
+ left = right = delta / 2;
+ break;
+ }
+
+ var d = getCoords(this, x + offset.x, y + offset.y);
+
+ lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
+ ' coordsize="100 100" coordorigin="0 0"',
+ ' filled="', !stroke, '" stroked="', !!stroke,
+ '" style="position:absolute;width:1px;height:1px;">');
+
+ if (stroke) {
+ appendStroke(this, lineStr);
+ } else {
+ // TODO: Fix the min and max params.
+ appendFill(this, lineStr, {x: -left, y: 0},
+ {x: right, y: fontStyle.size});
+ }
+
+ var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
+ m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
+
+ var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
+
+ lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
+ ' offset="', skewOffset, '" origin="', left ,' 0" />',
+ '<g_vml_:path textpathok="true" />',
+ '<g_vml_:textpath on="true" string="',
+ encodeHtmlAttribute(text),
+ '" style="v-text-align:', textAlign,
+ ';font:', encodeHtmlAttribute(fontStyleString),
+ '" /></g_vml_:line>');
+
+ this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
+ };
+
+ contextPrototype.fillText = function(text, x, y, maxWidth) {
+ this.drawText_(text, x, y, maxWidth, false);
+ };
+
+ contextPrototype.strokeText = function(text, x, y, maxWidth) {
+ this.drawText_(text, x, y, maxWidth, true);
+ };
+
+ contextPrototype.measureText = function(text) {
+ if (!this.textMeasureEl_) {
+ var s = '<span style="position:absolute;' +
+ 'top:-20000px;left:0;padding:0;margin:0;border:none;' +
+ 'white-space:pre;"></span>';
+ this.element_.insertAdjacentHTML('beforeEnd', s);
+ this.textMeasureEl_ = this.element_.lastChild;
+ }
+ var doc = this.element_.ownerDocument;
+ this.textMeasureEl_.innerHTML = '';
+ this.textMeasureEl_.style.font = this.font;
+ // Don't use innerHTML or innerText because they allow markup/whitespace.
+ this.textMeasureEl_.appendChild(doc.createTextNode(text));
+ return {width: this.textMeasureEl_.offsetWidth};
+ };
+
+ /******** STUBS ********/
+ contextPrototype.clip = function() {
+ // TODO: Implement
+ };
+
+ contextPrototype.arcTo = function() {
+ // TODO: Implement
+ };
+
+ contextPrototype.createPattern = function(image, repetition) {
+ return new CanvasPattern_(image, repetition);
+ };
+
+ // Gradient / Pattern Stubs
+ function CanvasGradient_(aType) {
+ this.type_ = aType;
+ this.x0_ = 0;
+ this.y0_ = 0;
+ this.r0_ = 0;
+ this.x1_ = 0;
+ this.y1_ = 0;
+ this.r1_ = 0;
+ this.colors_ = [];
+ }
+
+ CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
+ aColor = processStyle(aColor);
+ this.colors_.push({offset: aOffset,
+ color: aColor.color,
+ alpha: aColor.alpha});
+ };
+
+ function CanvasPattern_(image, repetition) {
+ assertImageIsValid(image);
+ switch (repetition) {
+ case 'repeat':
+ case null:
+ case '':
+ this.repetition_ = 'repeat';
+ break
+ case 'repeat-x':
+ case 'repeat-y':
+ case 'no-repeat':
+ this.repetition_ = repetition;
+ break;
+ default:
+ throwException('SYNTAX_ERR');
+ }
+
+ this.src_ = image.src;
+ this.width_ = image.width;
+ this.height_ = image.height;
+ }
+
+ function throwException(s) {
+ throw new DOMException_(s);
+ }
+
+ function assertImageIsValid(img) {
+ if (!img || img.nodeType != 1 || img.tagName != 'IMG') {
+ throwException('TYPE_MISMATCH_ERR');
+ }
+ if (img.readyState != 'complete') {
+ throwException('INVALID_STATE_ERR');
+ }
+ }
+
+ function DOMException_(s) {
+ this.code = this[s];
+ this.message = s +': DOM Exception ' + this.code;
+ }
+ var p = DOMException_.prototype = new Error;
+ p.INDEX_SIZE_ERR = 1;
+ p.DOMSTRING_SIZE_ERR = 2;
+ p.HIERARCHY_REQUEST_ERR = 3;
+ p.WRONG_DOCUMENT_ERR = 4;
+ p.INVALID_CHARACTER_ERR = 5;
+ p.NO_DATA_ALLOWED_ERR = 6;
+ p.NO_MODIFICATION_ALLOWED_ERR = 7;
+ p.NOT_FOUND_ERR = 8;
+ p.NOT_SUPPORTED_ERR = 9;
+ p.INUSE_ATTRIBUTE_ERR = 10;
+ p.INVALID_STATE_ERR = 11;
+ p.SYNTAX_ERR = 12;
+ p.INVALID_MODIFICATION_ERR = 13;
+ p.NAMESPACE_ERR = 14;
+ p.INVALID_ACCESS_ERR = 15;
+ p.VALIDATION_ERR = 16;
+ p.TYPE_MISMATCH_ERR = 17;
+
+ // set up externs
+ G_vmlCanvasManager = G_vmlCanvasManager_;
+ CanvasRenderingContext2D = CanvasRenderingContext2D_;
+ CanvasGradient = CanvasGradient_;
+ CanvasPattern = CanvasPattern_;
+ DOMException = DOMException_;
+})();
+
+} // if
\ No newline at end of file
--- /dev/null
+<!doctype html>
+<html>
+ <head>
+ <title>Chart.js | HTML5 Charts for your website.</title>
+
+ <meta name="description" content="Open source HTML5 charts using the canvas tag. Chart.js is an easy way to include animated graphs on your website."/>
+
+ <script type="text/javascript" src="//use.typekit.net/puc1imu.js"></script>
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+ <script type="text/javascript" src="assets/Chart.js"></script>
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script>
+ /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
+ * Build: http://modernizr.com/download/#-canvas-shiv-load
+ */
+;window.Modernizr=function(a,b,c){function t(a){i.cssText=a}function u(a,b){return t(prefixes.join(a+";")+(b||""))}function v(a,b){return typeof a===b}function w(a,b){return!!~(""+a).indexOf(b)}function x(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:v(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l={},m={},n={},o=[],p=o.slice,q,r={}.hasOwnProperty,s;!v(r,"undefined")&&!v(r.call,"undefined")?s=function(a,b){return r.call(a,b)}:s=function(a,b){return b in a&&v(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=p.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(p.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(p.call(arguments)))};return e}),l.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")};for(var y in l)s(l,y)&&(q=y.toLowerCase(),e[q]=l[y](),o.push((e[q]?"":"no-")+q));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)s(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},t(""),h=j=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
+ </script>
+ <!--[if lte IE 8]>
+ <script type="text/javascript" src="assets/excanvas.js"></script>
+ <![endif]-->
+ <link rel="stylesheet" href="styles.css"/>
+ </head>
+ <body>
+ <div class="redBorder"></div>
+ <div class="greenBorder"></div>
+ <div class="yellowBorder"></div>
+ <header>
+ <hgroup>
+ <h1>Chart.js</h1>
+ <h2>Easy, object oriented client side graphs for designers and developers</h2>
+ </hgroup>
+
+ <canvas id="introChart" width="489" height="246"></canvas>
+
+ <a class="btn red" href="docs">Documentation</a><a class="btn blue" href="https://github.com/nnnick/Chart.js">Download</a>
+ </header>
+ <section id="features">
+ <article>
+ <img src="assets/6charts.png">
+ <h3>6 Chart types</h3>
+ <p>Visualise your data in different ways. Each of them animated, fully customisable and look great, even on retina displays.</p>
+ </article>
+ <article>
+ <img src="assets/html.png">
+ <h3>HTML5 Based</h3>
+ <p>Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8.</p>
+ </article>
+ <article>
+ <img src="assets/simple.png">
+ <h3>Simple and flexible</h3>
+ <p>Chart.js is dependency free, lightweight (4.5k when minified and gzipped) and offers loads of customisation options.</p>
+ </article>
+ </section>
+ <section id="examples">
+ <article id="lineChart" class="hidden">
+ <div class="half">
+ <h2>Line charts</h2>
+ <p>Line graphs are probably the most widely used graph for showing trends.</p>
+ <p>Chart.js has a ton of customisation features for line graphs, along with support for multiple datasets to be plotted on one chart.</p>
+ </div>
+ <div class="canvasWrapper">
+ <canvas id="lineChartCanvas" width="449" height="300"></canvas>
+ </div>
+ </article>
+
+ <article id="barChart" class="hidden">
+ <div class="canvasWrapper">
+ <canvas id="barChartCanvas" width="449" height="300"></canvas>
+ </div>
+ <div class="half">
+ <h2>Bar charts</h2>
+ <p>Bar graphs are also great at showing trend data.</p>
+ <p>Chart.js supports bar charts with a load of custom styles and the ability to show multiple bars for each x value.</p>
+ </div>
+ </article>
+
+ <article id="radarChart" class="hidden">
+ <div class="half">
+ <h2>Radar charts</h2>
+ <p>Radar charts are good for comparing a selection of different pieces of data.</p>
+ <p>Chart.js supports multiple data sets plotted on the same radar chart. It also supports all of the customisation and animation options you'd expect.</p>
+ </div>
+ <div class="canvasWrapper">
+ <canvas id="radarChartCanvas" width="449" height="300"></canvas>
+ </div>
+ </article>
+
+ <article id="pieChart" class="hidden">
+ <div class="canvasWrapper">
+ <canvas id="pieChartCanvas" width="449" height="300"></canvas>
+ </div>
+ <div class="half">
+ <h2>Pie charts</h2>
+ <p>Pie charts are great at comparing proportions within a single data set.</p>
+ <p>Chart.js shows animated pie charts with customisable colours, strokes, animation easing and effects.</p>
+ </div>
+ </article>
+
+ <article id="polarAreaChart" class="hidden">
+ <div class="half">
+ <h2>Polar area charts</h2>
+ <p>Polar area charts are similar to pie charts, but the variable isn't the circumference of the segment, but the radius of it. </p>
+ <p>Chart.js delivers animated polar area charts with custom coloured segments, along with customisable scales and animation.</p>
+ </div>
+ <div class="canvasWrapper">
+ <canvas id="polarAreaChartCanvas" width="449" height="300"></canvas>
+ </div>
+ </article>
+
+ <article id="doughnutChart" class="hidden">
+ <div class="canvasWrapper">
+ <canvas id="doughnutChartCanvas" width="449" height="300"></canvas>
+ </div>
+ <div class="half">
+ <h2>Doughnut charts</h2>
+ <p>Similar to pie charts, doughnut charts are great for showing proportional data.</p>
+ <p>Chart.js offers the same customisation options as for pie charts, but with a custom sized inner cutout to turn your pies into doughnuts.</p>
+ </div>
+ </article>
+ <h3>Like what you see? <a href="https://github.com/nnnick/Chart.js">Download Chart.js on Github</a> or <a href="docs">read detailed documentation</a></h3>
+ </section>
+ <footer>
+ <p>A project by <a href="http://www.nickdownie.com">Nick Downie</a></p>
+
+ </footer>
+ <script src="assets/effects.js"></script>
+ <script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-28909194-3']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ </script>
+ </body>
+</html>
--- /dev/null
+* {
+ padding: 0;
+ margin: 0;
+ color: inherit;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+}
+body {
+ color: #282b36;
+ border-top: 8px solid #282b36;
+}
+canvas {
+ font-family: "proxima-nova", sans-serif sans-serif;
+}
+.redBorder,
+.greenBorder,
+.yellowBorder {
+ width: 33.33%;
+ float: left;
+ height: 8px;
+}
+.redBorder {
+ background-color: #f33e6f;
+}
+.greenBorder {
+ background-color: #46bfbd;
+}
+.yellowBorder {
+ background-color: #fdb45c;
+}
+h1 {
+ font-family: "proxima-nova", sans-serif;
+ font-weight: 600;
+ font-size: 55px;
+ margin-top: 40px;
+}
+h2 {
+ font-family: "proxima-nova", sans-serif;
+ font-weight: 400;
+ margin-top: 20px;
+ font-size: 26px;
+ line-height: 40px;
+}
+h3 {
+ font-family: "proxima-nova", sans-serif;
+ font-weight: 600;
+ text-align: center;
+ margin: 20px 0;
+}
+h3 a {
+ color: #2d91ea;
+ text-decoration: none;
+ border-bottom: 1px solid #2d91ea;
+}
+p {
+ font-family: "proxima-nova", sans-serif;
+ line-height: 24px;
+ font-size: 18px;
+ color: #767c8d;
+}
+.btn {
+ display: inline-block;
+ padding: 20px;
+ font-family: "proxima-nova", sans-serif;
+ font-weight: 600;
+ color: #fff;
+ text-decoration: none;
+ border-radius: 5px;
+ text-align: center;
+ font-size: 18px;
+ -webkit-transition-property: background-color box-shadow;
+ -webkit-transition-duration: 200ms;
+ -webkit-transition-timing-function: ease-in-out;
+ -moz-transition-property: background-color box-shadow;
+ -moz-transition-duration: 200ms;
+ -moz-transition-timing-function: ease-in-out;
+ -ms-transition-property: background-color box-shadow;
+ -ms-transition-duration: 200ms;
+ -ms-transition-timing-function: ease-in-out;
+ -o-transition-property: background-color box-shadow;
+ -o-transition-duration: 200ms;
+ -o-transition-timing-function: ease-in-out;
+ transition-property: background-color box-shadow;
+ transition-duration: 200ms;
+ transition-timing-function: ease-in-out;
+}
+.btn:active {
+ box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
+}
+.btn.red {
+ background-color: #f33e6f;
+}
+.btn.red:hover {
+ background-color: #f2265d;
+}
+.btn.blue {
+ background-color: #2d91ea;
+}
+.btn.blue:hover {
+ background-color: #1785e6;
+}
+header {
+ width: 978px;
+ margin: 20px auto;
+ display: block;
+ position: relative;
+}
+header hgroup {
+ width: 50%;
+ padding: 20px 0;
+}
+header #introChart {
+ position: absolute;
+ top: 60px;
+ right: 0;
+}
+header .btn {
+ margin-right: 10px;
+ width: 180px;
+}
+footer {
+ width: 100%;
+ text-align: center;
+ background-color: #ebebeb;
+}
+footer p {
+ color: #767c8d;
+ font-family: "proxima-nova", sans-serif;
+ font-size: 16px;
+ padding: 20px 0;
+}
+section {
+ width: 978px;
+ margin: 40px auto;
+}
+section:before {
+ content: '';
+ width: 600px;
+ margin: 0 auto;
+ border-top: 1px solid #ebebeb;
+ height: 20px;
+ display: block;
+}
+section:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+*section {
+ zoom: 1;
+}
+#features article {
+ width: 33.33%;
+ float: left;
+}
+#features article p {
+ display: block;
+ width: 90%;
+ margin: 0 auto;
+ text-align: center;
+}
+#features article img {
+ width: 250px;
+ height: 250px;
+ margin: 0 auto;
+ display: block;
+}
+#examples article {
+ -webkit-transition: opacity 200ms ease-in-out;
+ -ms-transition: opacity 200ms ease-in-out;
+ -moz-transition: opacity 200ms ease-in-out;
+ -o-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
+ position: relative;
+ margin-top: 20px;
+ clear: both;
+}
+#examples article:after {
+ content: '';
+ width: 600px;
+ padding-top: 40px;
+ margin: 40px auto;
+ border-bottom: 1px solid #ebebeb;
+ height: 20px;
+ display: block;
+ clear: both;
+}
+#examples article p {
+ margin-top: 10px;
+}
+#examples article .half {
+ width: 50%;
+ float: left;
+}
+#examples article .canvasWrapper {
+ float: left;
+ width: 449px;
+ padding: 0 20px;
+}
+#examples h3 {
+ clear: both;
+}
+#examples .hidden {
+ opacity: 0;
+}
projects / thirdparty / Chart.js.git / commitdiff
