]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
First commit. Version 0.1
authorNick Downie <nick@nickdownie.com>
Sun, 17 Mar 2013 23:57:50 +0000 (23:57 +0000)
committerNick Downie <nick@nickdownie.com>
Sun, 17 Mar 2013 23:57:50 +0000 (23:57 +0000)
Examples of the six charts that can be created, and the Chart.js
library.

.gitignore [new file with mode: 0644]
Chart.js [new file with mode: 0755]
Chart.min.js [new file with mode: 0644]
bar.html [new file with mode: 0644]
doughnut.html [new file with mode: 0644]
line.html [new file with mode: 0644]
pie.html [new file with mode: 0644]
polarArea.html [new file with mode: 0755]
radar.html [new file with mode: 0644]
readme.md [new file with mode: 0644]
sixup.html [new file with mode: 0644]

diff --git a/.gitignore b/.gitignore
new file mode 100644 (file)
index 0000000..9bea433
--- /dev/null
@@ -0,0 +1,2 @@
+
+.DS_Store
diff --git a/Chart.js b/Chart.js
new file mode 100755 (executable)
index 0000000..08f7263
--- /dev/null
+++ b/Chart.js
@@ -0,0 +1,1433 @@
+//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);
+
+               graphMin = Math.floor(minValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude);
+            
+            graphMax = Math.ceil(maxValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude);
+            
+            graphRange = graphMax - graphMin;
+            
+            stepValue = Math.pow(10, rangeOrderOfMagnitude);
+            
+               numberOfSteps = Math.round(graphRange / stepValue);
+               
+               //Compare number of steps to the max and min for that size graph, and add in half steps if need be.             
+               while(numberOfSteps < minSteps || numberOfSteps > maxSteps) {
+                       if (numberOfSteps < minSteps){
+                               stepValue /= 2;
+                               numberOfSteps = Math.round(graphRange/stepValue);
+                       }
+                       else{
+                               stepValue *=2;
+                               numberOfSteps = Math.round(graphRange/stepValue);
+                       }
+               };
+               
+
+               
+               //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;
+         };
+}
+
+
+
diff --git a/Chart.min.js b/Chart.min.js
new file mode 100644 (file)
index 0000000..e4de2a1
--- /dev/null
@@ -0,0 +1,40 @@
+var Chart=function(s){function v(a,c,b){a=B((a-c.graphMin)/(c.steps*c.stepValue),1,0);return b*c.steps*a}function x(a,c,b,d){function l(){f+=g;var m=a.animation?B(h(f),null,0):1;d.clearRect(0,0,q,u);a.scaleOverlay?(b(m),c()):(c(),b(m));if(1>=f)E(l);else if("function"==typeof a.onAnimationComplete)a.onAnimationComplete()}var g=a.animation?1/B(a.animationSteps,Number.MAX_VALUE,1):1,h=C[a.animationEasing],f=a.animation?0:1;"function"!==typeof c&&(c=function(){});E(l)}function D(a,c,b,d,l,g){var h;a=
+Math.floor(Math.log(d-l)/Math.LN10);l=Math.floor(l/(1*Math.pow(10,a)))*Math.pow(10,a);h=Math.ceil(d/(1*Math.pow(10,a)))*Math.pow(10,a)-l;d=Math.pow(10,a);for(a=Math.round(h/d);a<b||a>c;)d=a<b?d/2:2*d,a=Math.round(h/d);c=[];if(g)for(b=1;b<a+1;b++)c.push(y(g,{value:(l+d*b).toFixed(A(d))}));return{steps:a,stepValue:d,graphMin:l,labels:c}}function B(a,c,b){return!isNaN(parseFloat(c))&&isFinite(c)&&a>c?c:!isNaN(parseFloat(b))&&isFinite(b)&&a<b?b:a}function A(a){return 0!=a%1?a.toString().split(".")[1].length:
+0}function z(a,c){var b={},d;for(d in a)b[d]=a[d];for(d in c)b[d]=c[d];return b}function y(a,c){var b=!/\W/.test(a)?F[a]=F[a]||y(document.getElementById(a).innerHTML):new Function("obj","var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push('"+a.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('');");return c?b(c):b}var r=
+this,C={linear:function(a){return a},easeInQuad:function(a){return a*a},easeOutQuad:function(a){return-1*a*(a-2)},easeInOutQuad:function(a){return 1>(a/=0.5)?0.5*a*a:-0.5*(--a*(a-2)-1)},easeInCubic:function(a){return a*a*a},easeOutCubic:function(a){return 1*((a=a/1-1)*a*a+1)},easeInOutCubic:function(a){return 1>(a/=0.5)?0.5*a*a*a:0.5*((a-=2)*a*a+2)},easeInQuart:function(a){return a*a*a*a},easeOutQuart:function(a){return-1*((a=a/1-1)*a*a*a-1)},easeInOutQuart:function(a){return 1>(a/=0.5)?0.5*a*a*a*
+a:-0.5*((a-=2)*a*a*a-2)},easeInQuint:function(a){return 1*(a/=1)*a*a*a*a},easeOutQuint:function(a){return 1*((a=a/1-1)*a*a*a*a+1)},easeInOutQuint:function(a){return 1>(a/=0.5)?0.5*a*a*a*a*a:0.5*((a-=2)*a*a*a*a+2)},easeInSine:function(a){return-1*Math.cos(a/1*(Math.PI/2))+1},easeOutSine:function(a){return 1*Math.sin(a/1*(Math.PI/2))},easeInOutSine:function(a){return-0.5*(Math.cos(Math.PI*a/1)-1)},easeInExpo:function(a){return 0==a?1:1*Math.pow(2,10*(a/1-1))},easeOutExpo:function(a){return 1==a?1:1*
+(-Math.pow(2,-10*a/1)+1)},easeInOutExpo:function(a){return 0==a?0:1==a?1:1>(a/=0.5)?0.5*Math.pow(2,10*(a-1)):0.5*(-Math.pow(2,-10*--a)+2)},easeInCirc:function(a){return 1<=a?a:-1*(Math.sqrt(1-(a/=1)*a)-1)},easeOutCirc:function(a){return 1*Math.sqrt(1-(a=a/1-1)*a)},easeInOutCirc:function(a){return 1>(a/=0.5)?-0.5*(Math.sqrt(1-a*a)-1):0.5*(Math.sqrt(1-(a-=2)*a)+1)},easeInElastic:function(a){var c=1.70158,b=0,d=1;if(0==a)return 0;if(1==(a/=1))return 1;b||(b=0.3);d<Math.abs(1)?(d=1,c=b/4):c=b/(2*Math.PI)*
+Math.asin(1/d);return-(d*Math.pow(2,10*(a-=1))*Math.sin((1*a-c)*2*Math.PI/b))},easeOutElastic:function(a){var c=1.70158,b=0,d=1;if(0==a)return 0;if(1==(a/=1))return 1;b||(b=0.3);d<Math.abs(1)?(d=1,c=b/4):c=b/(2*Math.PI)*Math.asin(1/d);return d*Math.pow(2,-10*a)*Math.sin((1*a-c)*2*Math.PI/b)+1},easeInOutElastic:function(a){var c=1.70158,b=0,d=1;if(0==a)return 0;if(2==(a/=0.5))return 1;b||(b=1*0.3*1.5);d<Math.abs(1)?(d=1,c=b/4):c=b/(2*Math.PI)*Math.asin(1/d);return 1>a?-0.5*d*Math.pow(2,10*(a-=1))*
+Math.sin((1*a-c)*2*Math.PI/b):0.5*d*Math.pow(2,-10*(a-=1))*Math.sin((1*a-c)*2*Math.PI/b)+1},easeInBack:function(a){return 1*(a/=1)*a*(2.70158*a-1.70158)},easeOutBack:function(a){return 1*((a=a/1-1)*a*(2.70158*a+1.70158)+1)},easeInOutBack:function(a){var c=1.70158;return 1>(a/=0.5)?0.5*a*a*(((c*=1.525)+1)*a-c):0.5*((a-=2)*a*(((c*=1.525)+1)*a+c)+2)},easeInBounce:function(a){return 1-C.easeOutBounce(1-a)},easeOutBounce:function(a){return(a/=1)<1/2.75?1*7.5625*a*a:a<2/2.75?1*(7.5625*(a-=1.5/2.75)*a+0.75):
+a<2.5/2.75?1*(7.5625*(a-=2.25/2.75)*a+0.9375):1*(7.5625*(a-=2.625/2.75)*a+0.984375)},easeInOutBounce:function(a){return 0.5>a?0.5*C.easeInBounce(2*a):0.5*C.easeOutBounce(2*a-1)+0.5}},q=s.canvas.width,u=s.canvas.height;window.devicePixelRatio&&(s.canvas.style.width=q+"px",s.canvas.style.height=u+"px",s.canvas.height=u*window.devicePixelRatio,s.canvas.width=q*window.devicePixelRatio,s.scale(window.devicePixelRatio,window.devicePixelRatio));this.PolarArea=function(a,c){r.PolarArea.defaults={scaleOverlay:!0,
+scaleOverride:!1,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null,scaleShowLine:!0,scaleLineColor:"rgba(0,0,0,.1)",scaleLineWidth:1,scaleShowLabels:!0,scaleLabel:"<%=value%>",scaleFontFamily:"'Arial'",scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#666",scaleShowLabelBackdrop:!0,scaleBackdropColor:"rgba(255,255,255,0.75)",scaleBackdropPaddingY:2,scaleBackdropPaddingX:2,segmentShowStroke:!0,segmentStrokeColor:"#fff",segmentStrokeWidth:2,animation:!0,animationSteps:100,animationEasing:"easeOutBounce",
+animateRotate:!0,animateScale:!1,onAnimationComplete:null};var b=c?z(r.PolarArea.defaults,c):r.PolarArea.defaults;return new G(a,b,s)};this.Radar=function(a,c){r.Radar.defaults={scaleOverlay:!1,scaleOverride:!1,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null,scaleShowLine:!0,scaleLineColor:"rgba(0,0,0,.1)",scaleLineWidth:1,scaleShowLabels:!1,scaleLabel:"<%=value%>",scaleFontFamily:"'Arial'",scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#666",scaleShowLabelBackdrop:!0,scaleBackdropColor:"rgba(255,255,255,0.75)",
+scaleBackdropPaddingY:2,scaleBackdropPaddingX:2,angleShowLineOut:!0,angleLineColor:"rgba(0,0,0,.1)",angleLineWidth:1,pointLabelFontFamily:"'Arial'",pointLabelFontStyle:"normal",pointLabelFontSize:12,pointLabelFontColor:"#666",pointDot:!0,pointDotRadius:3,pointDotStrokeWidth:1,datasetStroke:!0,datasetStrokeWidth:2,datasetFill:!0,animation:!0,animationSteps:60,animationEasing:"easeOutQuart",onAnimationComplete:null};var b=c?z(r.Radar.defaults,c):r.Radar.defaults;return new H(a,b,s)};this.Pie=function(a,
+c){r.Pie.defaults={segmentShowStroke:!0,segmentStrokeColor:"#fff",segmentStrokeWidth:2,animation:!0,animationSteps:100,animationEasing:"easeOutBounce",animateRotate:!0,animateScale:!1,onAnimationComplete:null};var b=c?z(r.Pie.defaults,c):r.Pie.defaults;return new I(a,b,s)};this.Doughnut=function(a,c){r.Doughnut.defaults={segmentShowStroke:!0,segmentStrokeColor:"#fff",segmentStrokeWidth:2,percentageInnerCutout:50,animation:!0,animationSteps:100,animationEasing:"easeOutBounce",animateRotate:!0,animateScale:!1,
+onAnimationComplete:null};var b=c?z(r.Doughnut.defaults,c):r.Doughnut.defaults;return new J(a,b,s)};this.Line=function(a,c){r.Line.defaults={scaleOverlay:!1,scaleOverride:!1,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null,scaleLineColor:"rgba(0,0,0,.1)",scaleLineWidth:1,scaleShowLabels:!0,scaleLabel:"<%=value%>",scaleFontFamily:"'Arial'",scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#666",scaleShowGridLines:!0,scaleGridLineColor:"rgba(0,0,0,.05)",scaleGridLineWidth:1,bezierCurve:!0,
+pointDot:!0,pointDotRadius:4,pointDotStrokeWidth:2,datasetStroke:!0,datasetStrokeWidth:2,datasetFill:!0,animation:!0,animationSteps:60,animationEasing:"easeOutQuart",onAnimationComplete:null};var b=c?z(r.Line.defaults,c):r.Line.defaults;return new K(a,b,s)};this.Bar=function(a,c){r.Bar.defaults={scaleOverlay:!1,scaleOverride:!1,scaleSteps:null,scaleStepWidth:null,scaleStartValue:null,scaleLineColor:"rgba(0,0,0,.1)",scaleLineWidth:1,scaleShowLabels:!0,scaleLabel:"<%=value%>",scaleFontFamily:"'Arial'",
+scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#666",scaleShowGridLines:!0,scaleGridLineColor:"rgba(0,0,0,.05)",scaleGridLineWidth:1,barShowStroke:!0,barStrokeWidth:2,barValueSpacing:5,barDatasetSpacing:1,animation:!0,animationSteps:60,animationEasing:"easeOutQuart",onAnimationComplete:null};var b=c?z(r.Bar.defaults,c):r.Bar.defaults;return new L(a,b,s)};var G=function(a,c,b){var d,l,g,h,f,m,j,e,k;f=Math.min.apply(Math,[q,u])/2;f-=Math.max.apply(Math,[0.5*c.scaleFontSize,0.5*c.scaleLineWidth]);
+e=2*c.scaleFontSize;c.scaleShowLabelBackdrop&&(e+=2*c.scaleBackdropPaddingY,f-=1.5*c.scaleBackdropPaddingY);k=f;e=e?e:5;d=Number.MIN_VALUE;l=Number.MAX_VALUE;for(g=0;g<a.length;g++)a[g].value>d&&(d=a[g].value),a[g].value<l&&(l=a[g].value);g=Math.floor(k/(0.66*e));h=Math.floor(0.5*(k/e));e=c.scaleShowLabels?c.scaleLabel:null;if(c.scaleOverride){j={steps:c.scaleSteps,stepValue:c.scaleStepWidth,graphMin:c.scaleStartValue,labels:[]};for(k=0;k<j.steps;k++)e&&j.labels.push(y(e,{value:(c.scaleStartValue+
+c.scaleStepWidth*k).toFixed(A(c.scaleStepWidth))}))}else j=D(k,g,h,d,l,e);m=f/j.steps;x(c,function(){for(var a=0;a<j.steps;a++)if(c.scaleShowLine&&(b.beginPath(),b.arc(q/2,u/2,m*(a+1),0,2*Math.PI,!0),b.strokeStyle=c.scaleLineColor,b.lineWidth=c.scaleLineWidth,b.stroke()),c.scaleShowLabels){b.textAlign="center";b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily;var d=j.labels[a];if(c.scaleShowLabelBackdrop){var e=b.measureText(d).width;b.fillStyle=c.scaleBackdropColor;b.beginPath();
+b.rect(Math.round(q/2-e/2-c.scaleBackdropPaddingX),Math.round(u/2-m*(a+1)-0.5*c.scaleFontSize-c.scaleBackdropPaddingY),Math.round(e+2*c.scaleBackdropPaddingX),Math.round(c.scaleFontSize+2*c.scaleBackdropPaddingY));b.fill()}b.textBaseline="middle";b.fillStyle=c.scaleFontColor;b.fillText(d,q/2,u/2-m*(a+1))}},function(d){var e=-Math.PI/2,f=2*Math.PI/a.length,g=1,h=1;c.animation&&(c.animateScale&&(g=d),c.animateRotate&&(h=d));for(d=0;d<a.length;d++)b.beginPath(),b.arc(q/2,u/2,g*v(a[d].value,j,m),e,e+
+h*f,!1),b.lineTo(q/2,u/2),b.closePath(),b.fillStyle=a[d].color,b.fill(),c.segmentShowStroke&&(b.strokeStyle=c.segmentStrokeColor,b.lineWidth=c.segmentStrokeWidth,b.stroke()),e+=h*f},b)},H=function(a,c,b){var d,l,g,h,f,m,j,e,k;a.labels||(a.labels=[]);f=Math.min.apply(Math,[q,u])/2;e=2*c.scaleFontSize;for(d=k=0;d<a.labels.length;d++)b.font=c.pointLabelFontStyle+" "+c.pointLabelFontSize+"px "+c.pointLabelFontFamily,l=b.measureText(a.labels[d]).width,l>k&&(k=l);f-=Math.max.apply(Math,[k,1.5*(c.pointLabelFontSize/
+2)]);f-=c.pointLabelFontSize;k=f=B(f,null,0);e=e?e:5;d=Number.MIN_VALUE;l=Number.MAX_VALUE;for(g=0;g<a.datasets.length;g++)for(h=0;h<a.datasets[g].data.length;h++)a.datasets[g].data[h]>d&&(d=a.datasets[g].data[h]),a.datasets[g].data[h]<l&&(l=a.datasets[g].data[h]);g=Math.floor(k/(0.66*e));h=Math.floor(0.5*(k/e));e=c.scaleShowLabels?c.scaleLabel:null;if(c.scaleOverride){j={steps:c.scaleSteps,stepValue:c.scaleStepWidth,graphMin:c.scaleStartValue,labels:[]};for(k=0;k<j.steps;k++)e&&j.labels.push(y(e,
+{value:(c.scaleStartValue+c.scaleStepWidth*k).toFixed(A(c.scaleStepWidth))}))}else j=D(k,g,h,d,l,e);m=f/j.steps;x(c,function(){var d=2*Math.PI/a.datasets[0].data.length;b.save();b.translate(q/2,u/2);if(c.angleShowLineOut){b.strokeStyle=c.angleLineColor;b.lineWidth=c.angleLineWidth;for(var e=0;e<a.datasets[0].data.length;e++)b.rotate(d),b.beginPath(),b.moveTo(0,0),b.lineTo(0,-f),b.stroke()}for(e=0;e<j.steps;e++){b.beginPath();if(c.scaleShowLine){b.strokeStyle=c.scaleLineColor;b.lineWidth=c.scaleLineWidth;
+b.moveTo(0,-m*(e+1));for(var g=0;g<a.datasets[0].data.length;g++)b.rotate(d),b.lineTo(0,-m*(e+1));b.closePath();b.stroke()}c.scaleShowLabels&&(b.textAlign="center",b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily,b.textBaseline="middle",c.scaleShowLabelBackdrop&&(g=b.measureText(j.labels[e]).width,b.fillStyle=c.scaleBackdropColor,b.beginPath(),b.rect(Math.round(-g/2-c.scaleBackdropPaddingX),Math.round(-m*(e+1)-0.5*c.scaleFontSize-c.scaleBackdropPaddingY),Math.round(g+2*c.scaleBackdropPaddingX),
+Math.round(c.scaleFontSize+2*c.scaleBackdropPaddingY)),b.fill()),b.fillStyle=c.scaleFontColor,b.fillText(j.labels[e],0,-m*(e+1)))}for(e=0;e<a.labels.length;e++){b.font=c.pointLabelFontStyle+" "+c.pointLabelFontSize+"px "+c.pointLabelFontFamily;b.fillStyle=c.pointLabelFontColor;var g=Math.sin(d*e)*(f+c.pointLabelFontSize),h=Math.cos(d*e)*(f+c.pointLabelFontSize);b.textAlign=d*e==Math.PI||0==d*e?"center":d*e>Math.PI?"right":"left";b.textBaseline="middle";b.fillText(a.labels[e],g,-h)}b.restore()},function(d){var e=
+2*Math.PI/a.datasets[0].data.length;b.save();b.translate(q/2,u/2);b.rotate(e);for(var f=0;f<a.datasets.length;f++){b.beginPath();b.moveTo(0,d*-1*v(a.datasets[f].data[0],j,m));for(var g=1;g<a.datasets[f].data.length;g++)b.rotate(e),b.lineTo(0,d*-1*v(a.datasets[f].data[g],j,m));b.closePath();b.fillStyle=a.datasets[f].fillColor;b.strokeStyle=a.datasets[f].strokeColor;b.lineWidth=c.datasetStrokeWidth;b.fill();b.stroke();if(c.pointDot){b.fillStyle=a.datasets[f].pointColor;b.strokeStyle=a.datasets[f].pointStrokeColor;
+b.lineWidth=c.pointDotStrokeWidth;for(g=0;g<a.datasets[f].data.length;g++)b.rotate(e),b.beginPath(),b.arc(0,d*-1*v(a.datasets[f].data[g],j,m),c.pointDotRadius,2*Math.PI,!1),b.fill(),b.stroke()}}b.restore()},b)},I=function(a,c,b){for(var d=0,l=Math.min.apply(Math,[u/2,q/2])-5,g=0;g<a.length;g++)d+=a[g].value;x(c,null,function(g){var f=-Math.PI/2,m=1,j=1;c.animation&&(c.animateScale&&(m=g),c.animateRotate&&(j=g));for(g=0;g<a.length;g++){var e=j*a[g].value/d*2*Math.PI;b.beginPath();b.arc(q/2,u/2,m*l,
+f,f+e);b.lineTo(q/2,u/2);b.closePath();b.fillStyle=a[g].color;b.fill();c.segmentShowStroke&&(b.lineWidth=c.segmentStrokeWidth,b.strokeStyle=c.segmentStrokeColor,b.stroke());f+=e}},b)},J=function(a,c,b){for(var d=0,l=Math.min.apply(Math,[u/2,q/2])-5,g=l*(c.percentageInnerCutout/100),h=0;h<a.length;h++)d+=a[h].value;x(c,null,function(f){var h=-Math.PI/2,j=1,e=1;c.animation&&(c.animateScale&&(j=f),c.animateRotate&&(e=f));for(f=0;f<a.length;f++){var k=e*a[f].value/d*2*Math.PI;b.beginPath();b.arc(q/2,
+u/2,j*l,h,h+k,!1);b.arc(q/2,u/2,j*g,h+k,h,!0);b.closePath();b.fillStyle=a[f].color;b.fill();c.segmentShowStroke&&(b.lineWidth=c.segmentStrokeWidth,b.strokeStyle=c.segmentStrokeColor,b.stroke());h+=k}},b)},K=function(a,c,b){var d,l,g,h,f,m,j,e,k,t,r,n,p,s=0;f=u;b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily;t=1;for(e=0;e<a.labels.length;e++)d=b.measureText(a.labels[e]).width,t=d>t?d:t;q/a.labels.length<t?(s=45,q/a.labels.length<Math.cos(s)*t?(s=90,f-=t):f-=Math.sin(s)*t):f-=c.scaleFontSize;
+e=c.scaleFontSize;f=f-5-e;d=Number.MIN_VALUE;l=Number.MAX_VALUE;for(g=0;g<a.datasets.length;g++)for(h=0;h<a.datasets[g].data.length;h++)a.datasets[g].data[h]>d&&(d=a.datasets[g].data[h]),a.datasets[g].data[h]<l&&(l=a.datasets[g].data[h]);g=Math.floor(f/(0.66*e));h=Math.floor(0.5*(f/e));e=c.scaleShowLabels?c.scaleLabel:"";if(c.scaleOverride){j={steps:c.scaleSteps,stepValue:c.scaleStepWidth,graphMin:c.scaleStartValue,labels:[]};for(d=0;d<j.steps;d++)e&&j.labels.push(y(e,{value:(c.scaleStartValue+c.scaleStepWidth*
+d).toFixed(A(c.scaleStepWidth))}))}else j=D(f,g,h,d,l,e);m=Math.floor(f/j.steps);e=1;if(c.scaleShowLabels){b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily;for(d=0;d<j.labels.length;d++)l=b.measureText(j.labels[d]).width,e=l>e?l:e;e+=10}r=q-e-t;k=Math.floor(r/(a.labels.length-1));n=q-t/2-r;p=f+c.scaleFontSize/2;x(c,function(){b.lineWidth=c.scaleLineWidth;b.strokeStyle=c.scaleLineColor;b.beginPath();b.moveTo(q-t/2+5,p);b.lineTo(q-t/2-r-5,p);b.stroke();0<s?(b.save(),b.textAlign="right"):
+b.textAlign="center";b.fillStyle=c.scaleFontColor;for(var d=0;d<a.labels.length;d++)b.save(),0<s?(b.translate(n+d*k,p+c.scaleFontSize),b.rotate(-(s*(Math.PI/180))),b.fillText(a.labels[d],0,0),b.restore()):b.fillText(a.labels[d],n+d*k,p+c.scaleFontSize+3),b.beginPath(),b.moveTo(n+d*k,p+3),c.scaleShowGridLines&&0<d?(b.lineWidth=c.scaleGridLineWidth,b.strokeStyle=c.scaleGridLineColor,b.lineTo(n+d*k,5)):b.lineTo(n+d*k,p+3),b.stroke();b.lineWidth=c.scaleLineWidth;b.strokeStyle=c.scaleLineColor;b.beginPath();
+b.moveTo(n,p+5);b.lineTo(n,5);b.stroke();b.textAlign="right";b.textBaseline="middle";for(d=0;d<j.steps;d++)b.beginPath(),b.moveTo(n-3,p-(d+1)*m),c.scaleShowGridLines?(b.lineWidth=c.scaleGridLineWidth,b.strokeStyle=c.scaleGridLineColor,b.lineTo(n+r+5,p-(d+1)*m)):b.lineTo(n-0.5,p-(d+1)*m),b.stroke(),c.scaleShowLabels&&b.fillText(j.labels[d],n-8,p-(d+1)*m)},function(d){function e(b,c){return p-d*v(a.datasets[b].data[c],j,m)}for(var f=0;f<a.datasets.length;f++){b.strokeStyle=a.datasets[f].strokeColor;
+b.lineWidth=c.datasetStrokeWidth;b.beginPath();b.moveTo(n,p-d*v(a.datasets[f].data[0],j,m));for(var g=1;g<a.datasets[f].data.length;g++)c.bezierCurve?b.bezierCurveTo(n+k*(g-0.5),e(f,g-1),n+k*(g-0.5),e(f,g),n+k*g,e(f,g)):b.lineTo(n+k*g,e(f,g));b.stroke();c.datasetFill?(b.lineTo(n+k*(a.datasets[f].data.length-1),p),b.lineTo(n,p),b.closePath(),b.fillStyle=a.datasets[f].fillColor,b.fill()):b.closePath();if(c.pointDot){b.fillStyle=a.datasets[f].pointColor;b.strokeStyle=a.datasets[f].pointStrokeColor;b.lineWidth=
+c.pointDotStrokeWidth;for(g=0;g<a.datasets[f].data.length;g++)b.beginPath(),b.arc(n+k*g,p-d*v(a.datasets[f].data[g],j,m),c.pointDotRadius,0,2*Math.PI,!0),b.fill(),b.stroke()}}},b)},L=function(a,c,b){var d,l,g,h,f,m,j,e,k,t,r,n,p,s,w=0;f=u;b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily;t=1;for(e=0;e<a.labels.length;e++)d=b.measureText(a.labels[e]).width,t=d>t?d:t;q/a.labels.length<t?(w=45,q/a.labels.length<Math.cos(w)*t?(w=90,f-=t):f-=Math.sin(w)*t):f-=c.scaleFontSize;e=c.scaleFontSize;
+f=f-5-e;d=Number.MIN_VALUE;l=Number.MAX_VALUE;for(g=0;g<a.datasets.length;g++)for(h=0;h<a.datasets[g].data.length;h++)a.datasets[g].data[h]>d&&(d=a.datasets[g].data[h]),a.datasets[g].data[h]<l&&(l=a.datasets[g].data[h]);g=Math.floor(f/(0.66*e));h=Math.floor(0.5*(f/e));e=c.scaleShowLabels?c.scaleLabel:"";if(c.scaleOverride){j={steps:c.scaleSteps,stepValue:c.scaleStepWidth,graphMin:c.scaleStartValue,labels:[]};for(d=0;d<j.steps;d++)e&&j.labels.push(y(e,{value:(c.scaleStartValue+c.scaleStepWidth*d).toFixed(A(c.scaleStepWidth))}))}else j=
+D(f,g,h,d,l,e);m=Math.floor(f/j.steps);e=1;if(c.scaleShowLabels){b.font=c.scaleFontStyle+" "+c.scaleFontSize+"px "+c.scaleFontFamily;for(d=0;d<j.labels.length;d++)l=b.measureText(j.labels[d]).width,e=l>e?l:e;e+=10}r=q-e-t;k=Math.floor(r/a.labels.length);s=(k-2*c.scaleGridLineWidth-2*c.barValueSpacing-(c.barDatasetSpacing*a.datasets.length-1)-(c.barStrokeWidth/2*a.datasets.length-1))/a.datasets.length;n=q-t/2-r;p=f+c.scaleFontSize/2;x(c,function(){b.lineWidth=c.scaleLineWidth;b.strokeStyle=c.scaleLineColor;
+b.beginPath();b.moveTo(q-t/2+5,p);b.lineTo(q-t/2-r-5,p);b.stroke();0<w?(b.save(),b.textAlign="right"):b.textAlign="center";b.fillStyle=c.scaleFontColor;for(var d=0;d<a.labels.length;d++)b.save(),0<w?(b.translate(n+d*k,p+c.scaleFontSize),b.rotate(-(w*(Math.PI/180))),b.fillText(a.labels[d],0,0),b.restore()):b.fillText(a.labels[d],n+d*k+k/2,p+c.scaleFontSize+3),b.beginPath(),b.moveTo(n+(d+1)*k,p+3),b.lineWidth=c.scaleGridLineWidth,b.strokeStyle=c.scaleGridLineColor,b.lineTo(n+(d+1)*k,5),b.stroke();b.lineWidth=
+c.scaleLineWidth;b.strokeStyle=c.scaleLineColor;b.beginPath();b.moveTo(n,p+5);b.lineTo(n,5);b.stroke();b.textAlign="right";b.textBaseline="middle";for(d=0;d<j.steps;d++)b.beginPath(),b.moveTo(n-3,p-(d+1)*m),c.scaleShowGridLines?(b.lineWidth=c.scaleGridLineWidth,b.strokeStyle=c.scaleGridLineColor,b.lineTo(n+r+5,p-(d+1)*m)):b.lineTo(n-0.5,p-(d+1)*m),b.stroke(),c.scaleShowLabels&&b.fillText(j.labels[d],n-8,p-(d+1)*m)},function(d){b.lineWidth=c.barStrokeWidth;for(var e=0;e<a.datasets.length;e++){b.fillStyle=
+a.datasets[e].fillColor;b.strokeStyle=a.datasets[e].strokeColor;for(var f=0;f<a.datasets[e].data.length;f++){var g=n+c.barValueSpacing+k*f+s*e+c.barDatasetSpacing*e+c.barStrokeWidth*e;b.beginPath();b.moveTo(g,p);b.lineTo(g,p-d*v(a.datasets[e].data[f],j,m)+c.barStrokeWidth/2);b.lineTo(g+s,p-d*v(a.datasets[e].data[f],j,m)+c.barStrokeWidth/2);b.lineTo(g+s,p);c.barShowStroke&&b.stroke();b.closePath();b.fill()}}},b)},E=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||
+window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)},F={}};
\ No newline at end of file
diff --git a/bar.html b/bar.html
new file mode 100644 (file)
index 0000000..08a8b29
--- /dev/null
+++ b/bar.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+       <head>
+               <title>Bar Chart</title>
+               <script src="Chart.js"></script>
+               <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
+               <style>
+                       canvas{
+                       }
+               </style>
+       </head>
+       <body>
+               <canvas id="canvas" height="450" width="600"></canvas>
+
+
+       <script>
+
+               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 myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
+       
+       </script>
+       </body>
+</html>
diff --git a/doughnut.html b/doughnut.html
new file mode 100644 (file)
index 0000000..db9fcf7
--- /dev/null
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+       <head>
+               <title>Doughnut Chart</title>
+               <script src="Chart.js"></script>
+               <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
+               <style>
+                       canvas{
+                       }
+               </style>
+       </head>
+       <body>
+               <canvas id="canvas" height="450" width="450"></canvas>
+
+
+       <script>
+
+               var doughnutData = [
+                               {
+                                       value: 30,
+                                       color:"#F7464A"
+                               },
+                               {
+                                       value : 50,
+                                       color : "#46BFBD"
+                               },
+                               {
+                                       value : 100,
+                                       color : "#FDB45C"
+                               },
+                               {
+                                       value : 40,
+                                       color : "#949FB1"
+                               },
+                               {
+                                       value : 120,
+                                       color : "#4D5360"
+                               }
+                       
+                       ];
+
+       var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);
+       
+       </script>
+       </body>
+</html>
diff --git a/line.html b/line.html
new file mode 100644 (file)
index 0000000..1dd08d4
--- /dev/null
+++ b/line.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+       <head>
+               <title>Line Chart</title>
+               <script src="Chart.js"></script>
+               <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
+               <style>
+                       canvas{
+                       }
+               </style>
+       </head>
+       <body>
+               <canvas id="canvas" height="450" width="600"></canvas>
+
+
+       <script>
+
+               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 myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
+       
+       </script>
+       </body>
+</html>
diff --git a/pie.html b/pie.html
new file mode 100644 (file)
index 0000000..dd83716
--- /dev/null
+++ b/pie.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+       <head>
+               <title>Radar Chart</title>
+               <script src="Chart.js"></script>
+               <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
+               <style>
+                       canvas{
+                       }
+               </style>
+       </head>
+       <body>
+               <canvas id="canvas" height="450" width="450"></canvas>
+
+
+       <script>
+
+               var pieData = [
+                               {
+                                       value: 30,
+                                       color:"#F38630"
+                               },
+                               {
+                                       value : 50,
+                                       color : "#E0E4CC"
+                               },
+                               {
+                                       value : 100,
+                                       color : "#69D2E7"
+                               }
+                       
+                       ];
+
+       var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);
+       
+       </script>
+       </body>
+</html>
diff --git a/polarArea.html b/polarArea.html
new file mode 100755 (executable)
index 0000000..81375a5
--- /dev/null
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+       <head>
+               <title>Polar Area Chart</title>
+               <script src="Chart.js"></script>
+               <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
+               <style>
+               </style>
+       </head>
+       <body>
+               <canvas id="canvas" height="400" width="400"></canvas>
+
+
+       <script>
+       var chartData = [
+                       {
+                               value : Math.random(),
+                               color: "#D97041"
+                       },
+                       {
+                               value : Math.random(),
+                               color: "#C7604C"
+                       },
+                       {
+                               value : Math.random(),
+                               color: "#21323D"
+                       },
+                       {
+                               value : Math.random(),
+                               color: "#9D9B7F"
+                       },
+                       {
+                               value : Math.random(),
+                               color: "#7D4F6D"
+                       },
+                       {
+                               value : Math.random(),
+                               color: "#584A5E"
+                       }
+               ];
+       var myPolarArea = new Chart(document.getElementById("canvas").getContext("2d")).PolarArea(chartData);
+       </script>
+       </body>
+</html>
diff --git a/radar.html b/radar.html
new file mode 100644 (file)
index 0000000..2690cff
--- /dev/null
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+       <head>
+               <title>Radar Chart</title>
+               <script src="Chart.js"></script>
+               <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
+               <style>
+                       canvas{
+                       }
+               </style>
+       </head>
+       <body>
+               <canvas id="canvas" height="450" width="450"></canvas>
+
+
+       <script>
+
+               var radarChartData = {
+                       labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
+                       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 myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10});
+       
+       </script>
+       </body>
+</html>
diff --git a/readme.md b/readme.md
new file mode 100644 (file)
index 0000000..653d557
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,8 @@
+Chart.js
+=======
+*Simple HTML5 Charts using the <canvas> tag* [chartjs.org](http://www.chartjs.org)
+
+
+Documentation
+-------
+You can find documentation at [chartjs.org/docs](http://www.chartjs.org/docs).
\ No newline at end of file
diff --git a/sixup.html b/sixup.html
new file mode 100644 (file)
index 0000000..1d36f27
--- /dev/null
@@ -0,0 +1,155 @@
+<!doctype html>
+<html>
+       <head>
+               <title>Doughnut Chart</title>
+               <script src="Chart.js"></script>
+               <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
+               <style>
+                       canvas{
+                               float: left;
+                       }
+               </style>
+       </head>
+       <body>
+               <div style="width:600px;height:600px;">
+                       <canvas id="doughnut" height="300" width="200"></canvas>
+                       <canvas id="line" height="300" width="200"></canvas>
+                       <canvas id="polarArea" height="300" width="200"></canvas>
+                       <canvas id="bar" height="300" width="200"></canvas>
+                       <canvas id="pie" height="300" width="200"></canvas>
+                       <canvas id="radar" height="300" width="200"></canvas>
+               </div>
+
+
+       <script>
+
+               var doughnutData = [
+                               {
+                                       value: 30,
+                                       color:"#F7464A"
+                               },
+                               {
+                                       value : 50,
+                                       color : "#46BFBD"
+                               },
+                               {
+                                       value : 100,
+                                       color : "#FDB45C"
+                               },
+                               {
+                                       value : 40,
+                                       color : "#949FB1"
+                               },
+                               {
+                                       value : 120,
+                                       color : "#4D5360"
+                               }
+                       
+                       ];
+               var lineChartData = {
+                       labels : ["","","","","","",""],
+                       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 pieData = [
+                               {
+                                       value: 30,
+                                       color:"#F38630"
+                               },
+                               {
+                                       value : 50,
+                                       color : "#E0E4CC"
+                               },
+                               {
+                                       value : 100,
+                                       color : "#69D2E7"
+                               }
+                       
+                       ];
+               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 chartData = [
+                       {
+                               value : Math.random(),
+                               color: "#D97041"
+                       },
+                       {
+                               value : Math.random(),
+                               color: "#C7604C"
+                       },
+                       {
+                               value : Math.random(),
+                               color: "#21323D"
+                       },
+                       {
+                               value : Math.random(),
+                               color: "#9D9B7F"
+                       },
+                       {
+                               value : Math.random(),
+                               color: "#7D4F6D"
+                       },
+                       {
+                               value : Math.random(),
+                               color: "#584A5E"
+                       }
+               ];
+               var radarChartData = {
+                       labels : ["","","","","","",""],
+                       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]
+                               }
+                       ]
+                       
+               };
+       new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData);
+       new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
+       new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData);
+       new Chart(document.getElementById("polarArea").getContext("2d")).PolarArea(chartData);
+       new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
+       new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);
+       
+       </script>
+       </body>
+</html>