e71TacTS

1$(document).ready(function () {
2    var pieData = [
3        {
4          value: 35,
5          color:"#3F9F3F"
6        },
7        {
8          value : 100-35,
9          color : "#222"
10        }
11      ];
12
13    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(pieData,{percentageInnerCutout : 80});
14});
15
16/*!
17 * Chart.js
18 * http://chartjs.org/
19 *
20 * Copyright 2013 Nick Downie
21 * Released under the MIT license
22 * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
23 */
24
25//Define the global Chart Variable as a class.
26window.Chart = function(context){
27
28    var chart = this;
29
30
31    //Easing functions adapted from Robert Penner's easing equations
32    //http://www.robertpenner.com/easing/
33
34    var animationOptions = {
35        linear : function (t){
36            return t;
37        },
38        easeInQuad: function (t) {
39            return t*t;
40        },
41        easeOutQuad: function (t) {
42            return -1 *t*(t-2);
43        },
44        easeInOutQuad: function (t) {
45            if ((t/=1/2) < 1) return 1/2*t*t;
46            return -1/2 * ((--t)*(t-2) - 1);
47        },
48        easeInCubic: function (t) {
49            return t*t*t;
50        },
51        easeOutCubic: function (t) {
52            return 1*((t=t/1-1)*t*t + 1);
53        },
54        easeInOutCubic: function (t) {
55            if ((t/=1/2) < 1) return 1/2*t*t*t;
56            return 1/2*((t-=2)*t*t + 2);
57        },
58        easeInQuart: function (t) {
59            return t*t*t*t;
60        },
61        easeOutQuart: function (t) {
62            return -1 * ((t=t/1-1)*t*t*t - 1);
63        },
64        easeInOutQuart: function (t) {
65            if ((t/=1/2) < 1) return 1/2*t*t*t*t;
66            return -1/2 * ((t-=2)*t*t*t - 2);
67        },
68        easeInQuint: function (t) {
69            return 1*(t/=1)*t*t*t*t;
70        },
71        easeOutQuint: function (t) {
72            return 1*((t=t/1-1)*t*t*t*t + 1);
73        },
74        easeInOutQuint: function (t) {
75            if ((t/=1/2) < 1) return 1/2*t*t*t*t*t;
76            return 1/2*((t-=2)*t*t*t*t + 2);
77        },
78        easeInSine: function (t) {
79            return -1 * Math.cos(t/1 * (Math.PI/2)) + 1;
80        },
81        easeOutSine: function (t) {
82            return 1 * Math.sin(t/1 * (Math.PI/2));
83        },
84        easeInOutSine: function (t) {
85            return -1/2 * (Math.cos(Math.PI*t/1) - 1);
86        },
87        easeInExpo: function (t) {
88            return (t==0) ? 1 : 1 * Math.pow(2, 10 * (t/1 - 1));
89        },
90        easeOutExpo: function (t) {
91            return (t==1) ? 1 : 1 * (-Math.pow(2, -10 * t/1) + 1);
92        },
93        easeInOutExpo: function (t) {
94            if (t==0) return 0;
95            if (t==1) return 1;
96            if ((t/=1/2) < 1) return 1/2 * Math.pow(2, 10 * (t - 1));
97            return 1/2 * (-Math.pow(2, -10 * --t) + 2);
98        },
99        easeInCirc: function (t) {
100            if (t>=1) return t;
101            return -1 * (Math.sqrt(1 - (t/=1)*t) - 1);
102        },
103        easeOutCirc: function (t) {
104            return 1 * Math.sqrt(1 - (t=t/1-1)*t);
105        },
106        easeInOutCirc: function (t) {
107            if ((t/=1/2) < 1) return -1/2 * (Math.sqrt(1 - t*t) - 1);
108            return 1/2 * (Math.sqrt(1 - (t-=2)*t) + 1);
109        },
110        easeInElastic: function (t) {
111            var s=1.70158;var p=0;var a=1;
112            if (t==0) return 0;  if ((t/=1)==1) return 1;  if (!p) p=1*.3;
113            if (a < Math.abs(1)) { a=1; var s=p/4; }
114            else var s = p/(2*Math.PI) * Math.asin (1/a);
115            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*1-s)*(2*Math.PI)/p ));
116        },
117        easeOutElastic: function (t) {
118            var s=1.70158;var p=0;var a=1;
119            if (t==0) return 0;  if ((t/=1)==1) return 1;  if (!p) p=1*.3;
120            if (a < Math.abs(1)) { a=1; var s=p/4; }
121            else var s = p/(2*Math.PI) * Math.asin (1/a);
122            return a*Math.pow(2,-10*t) * Math.sin( (t*1-s)*(2*Math.PI)/p ) + 1;
123        },
124        easeInOutElastic: function (t) {
125            var s=1.70158;var p=0;var a=1;
126            if (t==0) return 0;  if ((t/=1/2)==2) return 1;  if (!p) p=1*(.3*1.5);
127            if (a < Math.abs(1)) { a=1; var s=p/4; }
128            else var s = p/(2*Math.PI) * Math.asin (1/a);
129            if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*1-s)*(2*Math.PI)/p ));
130            return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*1-s)*(2*Math.PI)/p )*.5 + 1;
131        },
132        easeInBack: function (t) {
133            var s = 1.70158;
134            return 1*(t/=1)*t*((s+1)*t - s);
135        },
136        easeOutBack: function (t) {
137            var s = 1.70158;
138            return 1*((t=t/1-1)*t*((s+1)*t + s) + 1);
139        },
140        easeInOutBack: function (t) {
141            var s = 1.70158;
142            if ((t/=1/2) < 1) return 1/2*(t*t*(((s*=(1.525))+1)*t - s));
143            return 1/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2);
144        },
145        easeInBounce: function (t) {
146            return 1 - animationOptions.easeOutBounce (1-t);
147        },
148        easeOutBounce: function (t) {
149            if ((t/=1) < (1/2.75)) {
150                return 1*(7.5625*t*t);
151            } else if (t < (2/2.75)) {
152                return 1*(7.5625*(t-=(1.5/2.75))*t + .75);
153            } else if (t < (2.5/2.75)) {
154                return 1*(7.5625*(t-=(2.25/2.75))*t + .9375);
155            } else {
156                return 1*(7.5625*(t-=(2.625/2.75))*t + .984375);
157            }
158        },
159        easeInOutBounce: function (t) {
160            if (t < 1/2) return animationOptions.easeInBounce (t*2) * .5;
161            return animationOptions.easeOutBounce (t*2-1) * .5 + 1*.5;
162        }
163    };
164
165    //Variables global to the chart
166    var width = context.canvas.width;
167    var height = context.canvas.height;
168
169
170    //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
171    if (window.devicePixelRatio) {
172        context.canvas.style.width = width + "px";
173        context.canvas.style.height = height + "px";
174        context.canvas.height = height * window.devicePixelRatio;
175        context.canvas.width = width * window.devicePixelRatio;
176        context.scale(window.devicePixelRatio, window.devicePixelRatio);
177    }
178
179    this.PolarArea = function(data,options){
180
181        chart.PolarArea.defaults = {
182            scaleOverlay : true,
183            scaleOverride : false,
184            scaleSteps : null,
185            scaleStepWidth : null,
186            scaleStartValue : null,
187            scaleShowLine : true,
188            scaleLineColor : "rgba(0,0,0,.1)",
189            scaleLineWidth : 1,
190            scaleShowLabels : true,
191            scaleLabel : "<%=value%>",
192            scaleFontFamily : "'Arial'",
193            scaleFontSize : 50,
194            scaleFontStyle : "normal",
195            scaleFontColor : "#666",
196            scaleShowLabelBackdrop : true,
197            scaleBackdropColor : "rgba(255,255,255,0.75)",
198            scaleBackdropPaddingY : 2,
199            scaleBackdropPaddingX : 2,
200            segmentShowStroke : true,
201            segmentStrokeColor : "#fff",
202            segmentStrokeWidth : 2,
203            animation : true,
204            animationSteps : 100,
205            animationEasing : "easeOutBounce",
206            animateRotate : true,
207            animateScale : false,
208            onAnimationComplete : null
209        };
210
211        var config = (options)? mergeChartConfig(chart.PolarArea.defaults,options) : chart.PolarArea.defaults;
212
213        return new PolarArea(data,config,context);
214    };
215
216    this.Radar = function(data,options){
217
218        chart.Radar.defaults = {
219            scaleOverlay : false,
220            scaleOverride : false,
221            scaleSteps : null,
222            scaleStepWidth : null,
223            scaleStartValue : null,
224            scaleShowLine : true,
225            scaleLineColor : "rgba(0,0,0,.1)",
226            scaleLineWidth : 1,
227            scaleShowLabels : false,
228            scaleLabel : "<%=value%>",
229            scaleFontFamily : "'Arial'",
230            scaleFontSize : 12,
231            scaleFontStyle : "normal",
232            scaleFontColor : "#666",
233            scaleShowLabelBackdrop : true,
234            scaleBackdropColor : "rgba(255,255,255,0.75)",
235            scaleBackdropPaddingY : 2,
236            scaleBackdropPaddingX : 2,
237            angleShowLineOut : true,
238            angleLineColor : "rgba(0,0,0,.1)",
239            angleLineWidth : 1,
240            pointLabelFontFamily : "'Arial'",
241            pointLabelFontStyle : "normal",
242            pointLabelFontSize : 12,
243            pointLabelFontColor : "#666",
244            pointDot : true,
245            pointDotRadius : 3,
246            pointDotStrokeWidth : 1,
247            datasetStroke : true,
248            datasetStrokeWidth : 2,
249            datasetFill : true,
250            animation : true,
251            animationSteps : 60,
252            animationEasing : "easeOutQuart",
253            onAnimationComplete : null
254        };
255
256        var config = (options)? mergeChartConfig(chart.Radar.defaults,options) : chart.Radar.defaults;
257
258        return new Radar(data,config,context);
259    };
260
261    this.Pie = function(data,options){
262        chart.Pie.defaults = {
263            segmentShowStroke : true,
264            segmentStrokeColor : "#fff",
265            segmentStrokeWidth : 2,
266            animation : true,
267            animationSteps : 100,
268            animationEasing : "easeOutBounce",
269            animateRotate : true,
270            animateScale : false,
271            onAnimationComplete : null
272        };
273
274        var config = (options)? mergeChartConfig(chart.Pie.defaults,options) : chart.Pie.defaults;
275
276        return new Pie(data,config,context);
277    };
278
279    this.Doughnut = function(data,options){
280
281        chart.Doughnut.defaults = {
282            segmentShowStroke : true,
283            segmentStrokeColor : "#fff",
284            segmentStrokeWidth : 2,
285            percentageInnerCutout : 50,
286            animation : true,
287            animationSteps : 100,
288            animationEasing : "easeOutBounce",
289            animateRotate : true,
290            animateScale : false,
291            onAnimationComplete : null,
292            labelFontFamily : "Arial",
293            labelFontStyle : "normal",
294            labelFontSize : 500,
295            labelFontColor : "#666"
296        };
297
298        var config = (options)? mergeChartConfig(chart.Doughnut.defaults,options) : chart.Doughnut.defaults;
299
300        return new Doughnut(data,config,context);
301
302    };
303
304    this.Line = function(data,options){
305
306        chart.Line.defaults = {
307            scaleOverlay : false,
308            scaleOverride : false,
309            scaleSteps : null,
310            scaleStepWidth : null,
311            scaleStartValue : null,
312            scaleLineColor : "rgba(0,0,0,.1)",
313            scaleLineWidth : 1,
314            scaleShowLabels : true,
315            scaleLabel : "<%=value%>",
316            scaleFontFamily : "'Arial'",
317            scaleFontSize : 12,
318            scaleFontStyle : "normal",
319            scaleFontColor : "#666",
320            scaleShowGridLines : true,
321            scaleGridLineColor : "rgba(0,0,0,.05)",
322            scaleGridLineWidth : 1,
323            bezierCurve : true,
324            pointDot : true,
325            pointDotRadius : 4,
326            pointDotStrokeWidth : 2,
327            datasetStroke : true,
328            datasetStrokeWidth : 2,
329            datasetFill : true,
330            animation : true,
331            animationSteps : 60,
332            animationEasing : "easeOutQuart",
333            onAnimationComplete : null
334        };
335        var config = (options) ? mergeChartConfig(chart.Line.defaults,options) : chart.Line.defaults;
336
337        return new Line(data,config,context);
338    }
339
340    this.Bar = function(data,options){
341        chart.Bar.defaults = {
342            scaleOverlay : false,
343            scaleOverride : false,
344            scaleSteps : null,
345            scaleStepWidth : null,
346            scaleStartValue : null,
347            scaleLineColor : "rgba(0,0,0,.1)",
348            scaleLineWidth : 1,
349            scaleShowLabels : true,
350            scaleLabel : "<%=value%>",
351            scaleFontFamily : "'Arial'",
352            scaleFontSize : 12,
353            scaleFontStyle : "normal",
354            scaleFontColor : "#666",
355            scaleShowGridLines : true,
356            scaleGridLineColor : "rgba(0,0,0,.05)",
357            scaleGridLineWidth : 1,
358            barShowStroke : true,
359            barStrokeWidth : 2,
360            barValueSpacing : 5,
361            barDatasetSpacing : 1,
362            animation : true,
363            animationSteps : 60,
364            animationEasing : "easeOutQuart",
365            onAnimationComplete : null
366        };
367        var config = (options) ? mergeChartConfig(chart.Bar.defaults,options) : chart.Bar.defaults;
368
369        return new Bar(data,config,context);
370    }
371
372    var clear = function(c){
373        c.clearRect(0, 0, width, height);
374    };
375
376    var PolarArea = function(data,config,ctx){
377        var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString;
378
379
380        calculateDrawingSizes();
381
382        valueBounds = getValueBounds();
383
384        labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : null;
385
386        //Check and set the scale
387        if (!config.scaleOverride){
388
389            calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
390        }
391        else {
392            calculatedScale = {
393                steps : config.scaleSteps,
394                stepValue : config.scaleStepWidth,
395                graphMin : config.scaleStartValue,
396                labels : []
397            }
398            populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth);
399        }
400
401        scaleHop = maxSize/(calculatedScale.steps);
402
403        //Wrap in an animation loop wrapper
404        animationLoop(config,drawScale,drawAllSegments,ctx);
405
406        function calculateDrawingSizes(){
407            maxSize = (Min([width,height])/2);
408            //Remove whatever is larger - the font size or line width.
409
410            maxSize -= Max([config.scaleFontSize*0.5,config.scaleLineWidth*0.5]);
411
412            labelHeight = config.scaleFontSize*2;
413            //If we're drawing the backdrop - add the Y padding to the label height and remove from drawing region.
414            if (config.scaleShowLabelBackdrop){
415                labelHeight += (2 * config.scaleBackdropPaddingY);
416                maxSize -= config.scaleBackdropPaddingY*1.5;
417            }
418
419            scaleHeight = maxSize;
420            //If the label height is less than 5, set it to 5 so we don't have lines on top of each other.
421            labelHeight = Default(labelHeight,5);
422        }
423        function drawScale(){
424            for (var i=0; i<calculatedScale.steps; i++){
425                //If the line object is there
426                if (config.scaleShowLine){
427                    ctx.beginPath();
428                    ctx.arc(width/2, height/2, scaleHop * (i + 1), 0, (Math.PI * 2), true);
429                    ctx.strokeStyle = config.scaleLineColor;
430                    ctx.lineWidth = config.scaleLineWidth;
431                    ctx.stroke();
432                }
433
434                if (config.scaleShowLabels){
435                    ctx.textAlign = "center";
436                    ctx.font = config.scaleFontStyle + " " + config.scaleFontSize + "px " + config.scaleFontFamily;
437                    var label =  calculatedScale.labels[i];
438                    //If the backdrop object is within the font object
439                    if (config.scaleShowLabelBackdrop){
440                        var textWidth = ctx.measureText(label).width;
441                        ctx.fillStyle = config.scaleBackdropColor;
442                        ctx.beginPath();
443                        ctx.rect(
444                            Math.round(width/2 - textWidth/2 - config.scaleBackdropPaddingX),     //X
445                            Math.round(height/2 - (scaleHop * (i + 1)) - config.scaleFontSize*0.5 - config.scaleBackdropPaddingY),//Y
446                            Math.round(textWidth + (config.scaleBackdropPaddingX*2)), //Width
447                            Math.round(config.scaleFontSize + (config.scaleBackdropPaddingY*2)) //Height
448                        );
449                        ctx.fill();
450                    }
451                    ctx.textBaseline = "middle";
452                    ctx.fillStyle = config.scaleFontColor;
453                    ctx.fillText(label,width/2,height/2 - (scaleHop * (i + 1)));
454                }
455            }
456        }
457        function drawAllSegments(animationDecimal){
458            var startAngle = -Math.PI/2,
459                angleStep = (Math.PI*2)/data.length,
460                scaleAnimation = 1,
461                rotateAnimation = 1;
462            if (config.animation) {
463                if (config.animateScale) {
464                    scaleAnimation = animationDecimal;
465                }
466                if (config.animateRotate){
467                    rotateAnimation = animationDecimal;
468                }
469            }
470
471            for (var i=0; i<data.length; i++){
472
473                ctx.beginPath();
474                ctx.arc(width/2,height/2,scaleAnimation * calculateOffset(data[i].value,calculatedScale,scaleHop),startAngle, startAngle + rotateAnimation*angleStep, false);
475                ctx.lineTo(width/2,height/2);
476                ctx.closePath();
477                ctx.fillStyle = data[i].color;
478                ctx.fill();
479
480                if(config.segmentShowStroke){
481                    ctx.strokeStyle = config.segmentStrokeColor;
482                    ctx.lineWidth = config.segmentStrokeWidth;
483                    ctx.stroke();
484                }
485                startAngle += rotateAnimation*angleStep;
486            }
487        }
488        function getValueBounds() {
489            var upperValue = Number.MIN_VALUE;
490            var lowerValue = Number.MAX_VALUE;
491            for (var i=0; i<data.length; i++){
492                if (data[i].value > upperValue) {upperValue = data[i].value;}
493                if (data[i].value < lowerValue) {lowerValue = data[i].value;}
494            };
495
496            var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66)));
497            var minSteps = Math.floor((scaleHeight / labelHeight*0.5));
498
499            return {
500                maxValue : upperValue,
501                minValue : lowerValue,
502                maxSteps : maxSteps,
503                minSteps : minSteps
504            };
505
506
507        }
508    }
509
510    var Radar = function (data,config,ctx) {
511        var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString;
512
513        //If no labels are defined set to an empty array, so referencing length for looping doesn't blow up.
514        if (!data.labels) data.labels = [];
515
516        calculateDrawingSizes();
517
518        var valueBounds = getValueBounds();
519
520        labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : null;
521
522        //Check and set the scale
523        if (!config.scaleOverride){
524
525            calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
526        }
527        else {
528            calculatedScale = {
529                steps : config.scaleSteps,
530                stepValue : config.scaleStepWidth,
531                graphMin : config.scaleStartValue,
532                labels : []
533            }
534            populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth);
535        }
536
537        scaleHop = maxSize/(calculatedScale.steps);
538
539        animationLoop(config,drawScale,drawAllDataPoints,ctx);
540
541        //Radar specific functions.
542        function drawAllDataPoints(animationDecimal){
543            var rotationDegree = (2*Math.PI)/data.datasets[0].data.length;
544
545            ctx.save();
546            //translate to the centre of the canvas.
547            ctx.translate(width/2,height/2);
548
549            //We accept multiple data sets for radar charts, so show loop through each set
550            for (var i=0; i<data.datasets.length; i++){
551                ctx.beginPath();
552
553                ctx.moveTo(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[0],calculatedScale,scaleHop)));
554                for (var j=1; j<data.datasets[i].data.length; j++){
555                    ctx.rotate(rotationDegree);
556                    ctx.lineTo(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop)));
557
558                }
559                ctx.closePath();
560
561
562                ctx.fillStyle = data.datasets[i].fillColor;
563                ctx.strokeStyle = data.datasets[i].strokeColor;
564                ctx.lineWidth = config.datasetStrokeWidth;
565                ctx.fill();
566                ctx.stroke();
567
568
569                if (config.pointDot){
570                    ctx.fillStyle = data.datasets[i].pointColor;
571                    ctx.strokeStyle = data.datasets[i].pointStrokeColor;
572                    ctx.lineWidth = config.pointDotStrokeWidth;
573                    for (var k=0; k<data.datasets[i].data.length; k++){
574                        ctx.rotate(rotationDegree);
575                        ctx.beginPath();
576                        ctx.arc(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[k],calculatedScale,scaleHop)),config.pointDotRadius,2*Math.PI,false);
577                        ctx.fill();
578                        ctx.stroke();
579                    }
580
581                }
582                ctx.rotate(rotationDegree);
583
584            }
585            ctx.restore();
586
587
588        }
589        function drawScale(){
590            var rotationDegree = (2*Math.PI)/data.datasets[0].data.length;
591            ctx.save();
592            ctx.translate(width / 2, height / 2);
593
594            if (config.angleShowLineOut){
595                ctx.strokeStyle = config.angleLineColor;
596                ctx.lineWidth = config.angleLineWidth;
597                for (var h=0; h<data.datasets[0].data.length; h++){
598
599                    ctx.rotate(rotationDegree);
600                    ctx.beginPath();
601                    ctx.moveTo(0,0);
602                    ctx.lineTo(0,-maxSize);
603                    ctx.stroke();
604                }
605            }
606
607            for (var i=0; i<calculatedScale.steps; i++){
608                ctx.beginPath();
609
610                if(config.scaleShowLine){
611                    ctx.strokeStyle = config.scaleLineColor;
612                    ctx.lineWidth = config.scaleLineWidth;
613                    ctx.moveTo(0,-scaleHop * (i+1));
614                    for (var j=0; j<data.datasets[0].data.length; j++){
615                        ctx.rotate(rotationDegree);
616                        ctx.lineTo(0,-scaleHop * (i+1));
617                    }
618                    ctx.closePath();
619                    ctx.stroke();
620
621                }
622
623                if (config.scaleShowLabels){
624                    ctx.textAlign = 'center';
625                    ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily;
626                    ctx.textBaseline = "middle";
627
628                    if (config.scaleShowLabelBackdrop){
629                        var textWidth = ctx.measureText(calculatedScale.labels[i]).width;
630                        ctx.fillStyle = config.scaleBackdropColor;
631                        ctx.beginPath();
632                        ctx.rect(
633                            Math.round(- textWidth/2 - config.scaleBackdropPaddingX),     //X
634                            Math.round((-scaleHop * (i + 1)) - config.scaleFontSize*0.5 - config.scaleBackdropPaddingY),//Y
635                            Math.round(textWidth + (config.scaleBackdropPaddingX*2)), //Width
636                            Math.round(config.scaleFontSize + (config.scaleBackdropPaddingY*2)) //Height
637                        );
638                        ctx.fill();
639                    }
640                    ctx.fillStyle = config.scaleFontColor;
641                    ctx.fillText(calculatedScale.labels[i],0,-scaleHop*(i+1));
642                }
643
644            }
645            for (var k=0; k<data.labels.length; k++){
646                ctx.font = config.pointLabelFontStyle + " " + config.pointLabelFontSize+"px " + config.pointLabelFontFamily;
647                ctx.fillStyle = config.pointLabelFontColor;
648                var opposite = Math.sin(rotationDegree*k) * (maxSize + config.pointLabelFontSize);
649                var adjacent = Math.cos(rotationDegree*k) * (maxSize + config.pointLabelFontSize);
650
651                if(rotationDegree*k == Math.PI || rotationDegree*k == 0){
652                    ctx.textAlign = "center";
653                }
654                else if(rotationDegree*k > Math.PI){
655                    ctx.textAlign = "right";
656                }
657                else{
658                    ctx.textAlign = "left";
659                }
660
661                ctx.textBaseline = "middle";
662
663                ctx.fillText(data.labels[k],opposite,-adjacent);
664
665            }
666            ctx.restore();
667        };
668        function calculateDrawingSizes(){
669            maxSize = (Min([width,height])/2);
670
671            labelHeight = config.scaleFontSize*2;
672
673            var labelLength = 0;
674            for (var i=0; i<data.labels.length; i++){
675                ctx.font = config.pointLabelFontStyle + " " + config.pointLabelFontSize+"px " + config.pointLabelFontFamily;
676                var textMeasurement = ctx.measureText(data.labels[i]).width;
677                if(textMeasurement>labelLength) labelLength = textMeasurement;
678            }
679
680            //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.
681            maxSize -= Max([labelLength,((config.pointLabelFontSize/2)*1.5)]);
682
683            maxSize -= config.pointLabelFontSize;
684            maxSize = CapValue(maxSize, null, 0);
685            scaleHeight = maxSize;
686            //If the label height is less than 5, set it to 5 so we don't have lines on top of each other.
687            labelHeight = Default(labelHeight,5);
688        };
689        function getValueBounds() {
690            var upperValue = Number.MIN_VALUE;
691            var lowerValue = Number.MAX_VALUE;
692
693            for (var i=0; i<data.datasets.length; i++){
694                for (var j=0; j<data.datasets[i].data.length; j++){
695                    if (data.datasets[i].data[j] > upperValue){upperValue = data.datasets[i].data[j]}
696                    if (data.datasets[i].data[j] < lowerValue){lowerValue = data.datasets[i].data[j]}
697                }
698            }
699
700            var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66)));
701            var minSteps = Math.floor((scaleHeight / labelHeight*0.5));
702
703            return {
704                maxValue : upperValue,
705                minValue : lowerValue,
706                maxSteps : maxSteps,
707                minSteps : minSteps
708            };
709
710
711        }
712    }
713
714    var Pie = function(data,config,ctx){
715        var segmentTotal = 0;
716
717        //In case we have a canvas that is not a square. Minus 5 pixels as padding round the edge.
718        var pieRadius = Min([height/2,width/2]) - 5;
719
720        for (var i=0; i<data.length; i++){
721            segmentTotal += data[i].value;
722        }
723
724
725        animationLoop(config,null,drawPieSegments,ctx);
726
727        function drawPieSegments (animationDecimal){
728            var cumulativeAngle = -Math.PI/2,
729                scaleAnimation = 1,
730                rotateAnimation = 1;
731            if (config.animation) {
732                if (config.animateScale) {
733                    scaleAnimation = animationDecimal;
734                }
735                if (config.animateRotate){
736                    rotateAnimation = animationDecimal;
737                }
738            }
739            for (var i=0; i<data.length; i++){
740                var segmentAngle = rotateAnimation * ((data[i].value/segmentTotal) * (Math.PI*2));
741                ctx.beginPath();
742                ctx.arc(width/2,height/2,scaleAnimation * pieRadius,cumulativeAngle,cumulativeAngle + segmentAngle);
743                ctx.lineTo(width/2,height/2);
744                ctx.closePath();
745                ctx.fillStyle = data[i].color;
746                ctx.fill();
747
748                if(config.segmentShowStroke){
749                    ctx.lineWidth = config.segmentStrokeWidth;
750                    ctx.strokeStyle = config.segmentStrokeColor;
751                    ctx.stroke();
752                }
753                cumulativeAngle += segmentAngle;
754            }
755        }
756    }
757
758    var Doughnut = function(data,config,ctx){
759        var segmentTotal = 0;
760
761        //In case we have a canvas that is not a square. Minus 5 pixels as padding round the edge.
762        var doughnutRadius = Min([height/2,width/2]) - 5;
763
764        var cutoutRadius = doughnutRadius * (config.percentageInnerCutout/100);
765
766        for (var i=0; i<data.length; i++){
767            segmentTotal += data[i].value;
768        }
769
770        animationLoop(config,null,drawPieSegments,ctx);
771
772        function drawPieSegments (animationDecimal){
773            ctx.font = config.labelFontStyle + " " + config.labelFontSize+"px " + config.labelFontFamily;
774            ctx.fillStyle = 'black';
775            ctx.textBaseline = 'middle';
776            
777            base_image = new Image();
778  					base_image.src = 'https://icon2.kisspng.com/20180330/spw/kisspng-iphone-emoji-apple-ios-11-emojis-5abe1fe31ed9c6.7613688515224094431264.jpg';
779            
780            base_image.onload = function(){
781    ctx.drawImage(base_image, this.width/2-width/2,  this.height/2-width/2);
782  }
783            
784            //ctx.fillText("penis" + "%", width/2 - 20, width/2, 200);
785
786            var cumulativeAngle = -Math.PI/2,
787                scaleAnimation = 1,
788                rotateAnimation = 1;
789            if (config.animation) {
790                if (config.animateScale) {
791                    scaleAnimation = animationDecimal;
792                }
793                if (config.animateRotate){
794                    rotateAnimation = animationDecimal;
795                }
796            }
797            for (var i=0; i<data.length; i++){
798                var segmentAngle = rotateAnimation * ((data[i].value/segmentTotal) * (Math.PI*2));
799                ctx.beginPath();
800                ctx.arc(width/2,height/2,scaleAnimation * doughnutRadius,cumulativeAngle,cumulativeAngle + segmentAngle,false);
801                ctx.arc(width/2,height/2,scaleAnimation * cutoutRadius,cumulativeAngle + segmentAngle,cumulativeAngle,true);
802                ctx.closePath();
803                ctx.fillStyle = data[i].color;
804                ctx.fill();
805
806                if(config.segmentShowStroke){
807                    ctx.lineWidth = config.segmentStrokeWidth;
808                    ctx.strokeStyle = config.segmentStrokeColor;
809                    ctx.stroke();
810                }
811                cumulativeAngle += segmentAngle;
812            }
813
814        }
815
816    }
817
818    var Line = function(data,config,ctx){
819        var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString, valueHop,widestXLabel, xAxisLength,yAxisPosX,xAxisPosY, rotateLabels = 0;
820
821        calculateDrawingSizes();
822
823        valueBounds = getValueBounds();
824        //Check and set the scale
825        labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : "";
826        if (!config.scaleOverride){
827
828            calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
829        }
830        else {
831            calculatedScale = {
832                steps : config.scaleSteps,
833                stepValue : config.scaleStepWidth,
834                graphMin : config.scaleStartValue,
835                labels : []
836            }
837            populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth);
838        }
839
840        scaleHop = Math.floor(scaleHeight/calculatedScale.steps);
841        calculateXAxisSize();
842        animationLoop(config,drawScale,drawLines,ctx);
843
844        function drawLines(animPc){
845            for (var i=0; i<data.datasets.length; i++){
846                ctx.strokeStyle = data.datasets[i].strokeColor;
847                ctx.lineWidth = config.datasetStrokeWidth;
848                ctx.beginPath();
849                ctx.moveTo(yAxisPosX, xAxisPosY - animPc*(calculateOffset(data.datasets[i].data[0],calculatedScale,scaleHop)))
850
851                for (var j=1; j<data.datasets[i].data.length; j++){
852                    if (config.bezierCurve){
853                        ctx.bezierCurveTo(xPos(j-0.5),yPos(i,j-1),xPos(j-0.5),yPos(i,j),xPos(j),yPos(i,j));
854                    }
855                    else{
856                        ctx.lineTo(xPos(j),yPos(i,j));
857                    }
858                }
859                ctx.stroke();
860                if (config.datasetFill){
861                    ctx.lineTo(yAxisPosX + (valueHop*(data.datasets[i].data.length-1)),xAxisPosY);
862                    ctx.lineTo(yAxisPosX,xAxisPosY);
863                    ctx.closePath();
864                    ctx.fillStyle = data.datasets[i].fillColor;
865                    ctx.fill();
866                }
867                else{
868                    ctx.closePath();
869                }
870                if(config.pointDot){
871                    ctx.fillStyle = data.datasets[i].pointColor;
872                    ctx.strokeStyle = data.datasets[i].pointStrokeColor;
873                    ctx.lineWidth = config.pointDotStrokeWidth;
874                    for (var k=0; k<data.datasets[i].data.length; k++){
875                        ctx.beginPath();
876                        ctx.arc(yAxisPosX + (valueHop *k),xAxisPosY - animPc*(calculateOffset(data.datasets[i].data[k],calculatedScale,scaleHop)),config.pointDotRadius,0,Math.PI*2,true);
877                        ctx.fill();
878                        ctx.stroke();
879                    }
880                }
881            }
882
883            function yPos(dataSet,iteration){
884                return xAxisPosY - animPc*(calculateOffset(data.datasets[dataSet].data[iteration],calculatedScale,scaleHop));
885            }
886            function xPos(iteration){
887                return yAxisPosX + (valueHop * iteration);
888            }
889        }
890        function drawScale(){
891            //X axis line
892            ctx.lineWidth = config.scaleLineWidth;
893            ctx.strokeStyle = config.scaleLineColor;
894            ctx.beginPath();
895            ctx.moveTo(width-widestXLabel/2+5,xAxisPosY);
896            ctx.lineTo(width-(widestXLabel/2)-xAxisLength-5,xAxisPosY);
897            ctx.stroke();
898
899
900            if (rotateLabels > 0){
901                ctx.save();
902                ctx.textAlign = "right";
903            }
904            else{
905                ctx.textAlign = "center";
906            }
907            ctx.fillStyle = config.scaleFontColor;
908            for (var i=0; i<data.labels.length; i++){
909                ctx.save();
910                if (rotateLabels > 0){
911                    ctx.translate(yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize);
912                    ctx.rotate(-(rotateLabels * (Math.PI/180)));
913                    ctx.fillText(data.labels[i], 0,0);
914                    ctx.restore();
915                }
916
917                else{
918                    ctx.fillText(data.labels[i], yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize+3);
919                }
920
921                ctx.beginPath();
922                ctx.moveTo(yAxisPosX + i * valueHop, xAxisPosY+3);
923
924                //Check i isnt 0, so we dont go over the Y axis twice.
925                if(config.scaleShowGridLines && i>0){
926                    ctx.lineWidth = config.scaleGridLineWidth;
927                    ctx.strokeStyle = config.scaleGridLineColor;
928                    ctx.lineTo(yAxisPosX + i * valueHop, 5);
929                }
930                else{
931                    ctx.lineTo(yAxisPosX + i * valueHop, xAxisPosY+3);
932                }
933                ctx.stroke();
934            }
935
936            //Y axis
937            ctx.lineWidth = config.scaleLineWidth;
938            ctx.strokeStyle = config.scaleLineColor;
939            ctx.beginPath();
940            ctx.moveTo(yAxisPosX,xAxisPosY+5);
941            ctx.lineTo(yAxisPosX,5);
942            ctx.stroke();
943
944            ctx.textAlign = "right";
945            ctx.textBaseline = "middle";
946            for (var j=0; j<calculatedScale.steps; j++){
947                ctx.beginPath();
948                ctx.moveTo(yAxisPosX-3,xAxisPosY - ((j+1) * scaleHop));
949                if (config.scaleShowGridLines){
950                    ctx.lineWidth = config.scaleGridLineWidth;
951                    ctx.strokeStyle = config.scaleGridLineColor;
952                    ctx.lineTo(yAxisPosX + xAxisLength + 5,xAxisPosY - ((j+1) * scaleHop));
953                }
954                else{
955                    ctx.lineTo(yAxisPosX-0.5,xAxisPosY - ((j+1) * scaleHop));
956                }
957
958                ctx.stroke();
959
960                if (config.scaleShowLabels){
961                    ctx.fillText(calculatedScale.labels[j],yAxisPosX-8,xAxisPosY - ((j+1) * scaleHop));
962                }
963            }
964
965
966        }
967        function calculateXAxisSize(){
968            var longestText = 1;
969            //if we are showing the labels
970            if (config.scaleShowLabels){
971                ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily;
972                for (var i=0; i<calculatedScale.labels.length; i++){
973                    var measuredText = ctx.measureText(calculatedScale.labels[i]).width;
974                    longestText = (measuredText > longestText)? measuredText : longestText;
975                }
976                //Add a little extra padding from the y axis
977                longestText +=10;
978            }
979            xAxisLength = width - longestText - widestXLabel;
980            valueHop = Math.floor(xAxisLength/(data.labels.length-1));
981
982            yAxisPosX = width-widestXLabel/2-xAxisLength;
983            xAxisPosY = scaleHeight + config.scaleFontSize/2;
984        }
985        function calculateDrawingSizes(){
986            maxSize = height;
987
988            //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.
989            ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily;
990            widestXLabel = 1;
991            for (var i=0; i<data.labels.length; i++){
992                var textLength = ctx.measureText(data.labels[i]).width;
993                //If the text length is longer - make that equal to longest text!
994                widestXLabel = (textLength > widestXLabel)? textLength : widestXLabel;
995            }
996            if (width/data.labels.length < widestXLabel){
997                rotateLabels = 45;
998                if (width/data.labels.length < Math.cos(rotateLabels) * widestXLabel){
999                    rotateLabels = 90;
1000                    maxSize -= widestXLabel;
1001                }
1002                else{
1003                    maxSize -= Math.sin(rotateLabels) * widestXLabel;
1004                }
1005            }
1006            else{
1007                maxSize -= config.scaleFontSize;
1008            }
1009
1010            //Add a little padding between the x line and the text
1011            maxSize -= 5;
1012
1013
1014            labelHeight = config.scaleFontSize;
1015
1016            maxSize -= labelHeight;
1017            //Set 5 pixels greater than the font size to allow for a little padding from the X axis.
1018
1019            scaleHeight = maxSize;
1020
1021            //Then get the area above we can safely draw on.
1022
1023        }
1024        function getValueBounds() {
1025            var upperValue = Number.MIN_VALUE;
1026            var lowerValue = Number.MAX_VALUE;
1027            for (var i=0; i<data.datasets.length; i++){
1028                for (var j=0; j<data.datasets[i].data.length; j++){
1029                    if ( data.datasets[i].data[j] > upperValue) { upperValue = data.datasets[i].data[j] };
1030                    if ( data.datasets[i].data[j] < lowerValue) { lowerValue = data.datasets[i].data[j] };
1031                }
1032            };
1033
1034            var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66)));
1035            var minSteps = Math.floor((scaleHeight / labelHeight*0.5));
1036
1037            return {
1038                maxValue : upperValue,
1039                minValue : lowerValue,
1040                maxSteps : maxSteps,
1041                minSteps : minSteps
1042            };
1043
1044
1045        }
1046
1047
1048    }
1049
1050    var Bar = function(data,config,ctx){
1051        var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString, valueHop,widestXLabel, xAxisLength,yAxisPosX,xAxisPosY,barWidth, rotateLabels = 0;
1052
1053        calculateDrawingSizes();
1054
1055        valueBounds = getValueBounds();
1056        //Check and set the scale
1057        labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : "";
1058        if (!config.scaleOverride){
1059
1060            calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
1061        }
1062        else {
1063            calculatedScale = {
1064                steps : config.scaleSteps,
1065                stepValue : config.scaleStepWidth,
1066                graphMin : config.scaleStartValue,
1067                labels : []
1068            }
1069            populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth);
1070        }
1071
1072        scaleHop = Math.floor(scaleHeight/calculatedScale.steps);
1073        calculateXAxisSize();
1074        animationLoop(config,drawScale,drawBars,ctx);
1075
1076        function drawBars(animPc){
1077            ctx.lineWidth = config.barStrokeWidth;
1078            for (var i=0; i<data.datasets.length; i++){
1079                ctx.fillStyle = data.datasets[i].fillColor;
1080                ctx.strokeStyle = data.datasets[i].strokeColor;
1081                for (var j=0; j<data.datasets[i].data.length; j++){
1082                    var barOffset = yAxisPosX + config.barValueSpacing + valueHop*j + barWidth*i + config.barDatasetSpacing*i + config.barStrokeWidth*i;
1083
1084                    ctx.beginPath();
1085                    ctx.moveTo(barOffset, xAxisPosY);
1086                    ctx.lineTo(barOffset, xAxisPosY - animPc*calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop)+(config.barStrokeWidth/2));
1087                    ctx.lineTo(barOffset + barWidth, xAxisPosY - animPc*calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop)+(config.barStrokeWidth/2));
1088                    ctx.lineTo(barOffset + barWidth, xAxisPosY);
1089                    if(config.barShowStroke){
1090                        ctx.stroke();
1091                    }
1092                    ctx.closePath();
1093                    ctx.fill();
1094                }
1095            }
1096
1097        }
1098        function drawScale(){
1099            //X axis line
1100            ctx.lineWidth = config.scaleLineWidth;
1101            ctx.strokeStyle = config.scaleLineColor;
1102            ctx.beginPath();
1103            ctx.moveTo(width-widestXLabel/2+5,xAxisPosY);
1104            ctx.lineTo(width-(widestXLabel/2)-xAxisLength-5,xAxisPosY);
1105            ctx.stroke();
1106
1107
1108            if (rotateLabels > 0){
1109                ctx.save();
1110                ctx.textAlign = "right";
1111            }
1112            else{
1113                ctx.textAlign = "center";
1114            }
1115            ctx.fillStyle = config.scaleFontColor;
1116            for (var i=0; i<data.labels.length; i++){
1117                ctx.save();
1118                if (rotateLabels > 0){
1119                    ctx.translate(yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize);
1120                    ctx.rotate(-(rotateLabels * (Math.PI/180)));
1121                    ctx.fillText(data.labels[i], 0,0);
1122                    ctx.restore();
1123                }
1124
1125                else{
1126                    ctx.fillText(data.labels[i], yAxisPosX + i*valueHop + valueHop/2,xAxisPosY + config.scaleFontSize+3);
1127                }
1128
1129                ctx.beginPath();
1130                ctx.moveTo(yAxisPosX + (i+1) * valueHop, xAxisPosY+3);
1131
1132                //Check i isnt 0, so we dont go over the Y axis twice.
1133                ctx.lineWidth = config.scaleGridLineWidth;
1134                ctx.strokeStyle = config.scaleGridLineColor;
1135                ctx.lineTo(yAxisPosX + (i+1) * valueHop, 5);
1136                ctx.stroke();
1137            }
1138
1139            //Y axis
1140            ctx.lineWidth = config.scaleLineWidth;
1141            ctx.strokeStyle = config.scaleLineColor;
1142            ctx.beginPath();
1143            ctx.moveTo(yAxisPosX,xAxisPosY+5);
1144            ctx.lineTo(yAxisPosX,5);
1145            ctx.stroke();
1146
1147            ctx.textAlign = "right";
1148            ctx.textBaseline = "middle";
1149            for (var j=0; j<calculatedScale.steps; j++){
1150                ctx.beginPath();
1151                ctx.moveTo(yAxisPosX-3,xAxisPosY - ((j+1) * scaleHop));
1152                if (config.scaleShowGridLines){
1153                    ctx.lineWidth = config.scaleGridLineWidth;
1154                    ctx.strokeStyle = config.scaleGridLineColor;
1155                    ctx.lineTo(yAxisPosX + xAxisLength + 5,xAxisPosY - ((j+1) * scaleHop));
1156                }
1157                else{
1158                    ctx.lineTo(yAxisPosX-0.5,xAxisPosY - ((j+1) * scaleHop));
1159                }
1160
1161                ctx.stroke();
1162                if (config.scaleShowLabels){
1163                    ctx.fillText(calculatedScale.labels[j],yAxisPosX-8,xAxisPosY - ((j+1) * scaleHop));
1164                }
1165            }
1166
1167
1168        }
1169        function calculateXAxisSize(){
1170            var longestText = 1;
1171            //if we are showing the labels
1172            if (config.scaleShowLabels){
1173                ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily;
1174                for (var i=0; i<calculatedScale.labels.length; i++){
1175                    var measuredText = ctx.measureText(calculatedScale.labels[i]).width;
1176                    longestText = (measuredText > longestText)? measuredText : longestText;
1177                }
1178                //Add a little extra padding from the y axis
1179                longestText +=10;
1180            }
1181            xAxisLength = width - longestText - widestXLabel;
1182            valueHop = Math.floor(xAxisLength/(data.labels.length));
1183
1184            barWidth = (valueHop - config.scaleGridLineWidth*2 - (config.barValueSpacing*2) - (config.barDatasetSpacing*data.datasets.length-1) - ((config.barStrokeWidth/2)*data.datasets.length-1))/data.datasets.length;
1185
1186            yAxisPosX = width-widestXLabel/2-xAxisLength;
1187            xAxisPosY = scaleHeight + config.scaleFontSize/2;
1188        }
1189        function calculateDrawingSizes(){
1190            maxSize = height;
1191
1192            //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.
1193            ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily;
1194            widestXLabel = 1;
1195            for (var i=0; i<data.labels.length; i++){
1196                var textLength = ctx.measureText(data.labels[i]).width;
1197                //If the text length is longer - make that equal to longest text!
1198                widestXLabel = (textLength > widestXLabel)? textLength : widestXLabel;
1199            }
1200            if (width/data.labels.length < widestXLabel){
1201                rotateLabels = 45;
1202                if (width/data.labels.length < Math.cos(rotateLabels) * widestXLabel){
1203                    rotateLabels = 90;
1204                    maxSize -= widestXLabel;
1205                }
1206                else{
1207                    maxSize -= Math.sin(rotateLabels) * widestXLabel;
1208                }
1209            }
1210            else{
1211                maxSize -= config.scaleFontSize;
1212            }
1213
1214            //Add a little padding between the x line and the text
1215            maxSize -= 5;
1216
1217
1218            labelHeight = config.scaleFontSize;
1219
1220            maxSize -= labelHeight;
1221            //Set 5 pixels greater than the font size to allow for a little padding from the X axis.
1222
1223            scaleHeight = maxSize;
1224
1225            //Then get the area above we can safely draw on.
1226
1227        }
1228        function getValueBounds() {
1229            var upperValue = Number.MIN_VALUE;
1230            var lowerValue = Number.MAX_VALUE;
1231            for (var i=0; i<data.datasets.length; i++){
1232                for (var j=0; j<data.datasets[i].data.length; j++){
1233                    if ( data.datasets[i].data[j] > upperValue) { upperValue = data.datasets[i].data[j] };
1234                    if ( data.datasets[i].data[j] < lowerValue) { lowerValue = data.datasets[i].data[j] };
1235                }
1236            };
1237
1238            var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66)));
1239            var minSteps = Math.floor((scaleHeight / labelHeight*0.5));
1240
1241            return {
1242                maxValue : upperValue,
1243                minValue : lowerValue,
1244                maxSteps : maxSteps,
1245                minSteps : minSteps
1246            };
1247
1248
1249        }
1250    }
1251
1252    function calculateOffset(val,calculatedScale,scaleHop){
1253        var outerValue = calculatedScale.steps * calculatedScale.stepValue;
1254        var adjustedValue = val - calculatedScale.graphMin;
1255        var scalingFactor = CapValue(adjustedValue/outerValue,1,0);
1256        return (scaleHop*calculatedScale.steps) * scalingFactor;
1257    }
1258
1259    function animationLoop(config,drawScale,drawData,ctx){
1260        var animFrameAmount = (config.animation)? 1/CapValue(config.animationSteps,Number.MAX_VALUE,1) : 1,
1261            easingFunction = animationOptions[config.animationEasing],
1262            percentAnimComplete =(config.animation)? 0 : 1;
1263
1264
1265
1266        if (typeof drawScale !== "function") drawScale = function(){};
1267
1268        requestAnimFrame(animLoop);
1269
1270        function animateFrame(){
1271            var easeAdjustedAnimationPercent =(config.animation)? CapValue(easingFunction(percentAnimComplete),null,0) : 1;
1272            clear(ctx);
1273            if(config.scaleOverlay){
1274                drawData(easeAdjustedAnimationPercent);
1275                drawScale();
1276            } else {
1277                drawScale();
1278                drawData(easeAdjustedAnimationPercent);
1279            }
1280        }
1281        function animLoop(){
1282            //We need to check if the animation is incomplete (less than 1), or complete (1).
1283            percentAnimComplete += animFrameAmount;
1284            animateFrame();
1285            //Stop the loop continuing forever
1286            if (percentAnimComplete <= 1){
1287                requestAnimFrame(animLoop);
1288            }
1289            else{
1290                if (typeof config.onAnimationComplete == "function") config.onAnimationComplete();
1291            }
1292
1293        }
1294
1295    }
1296
1297    //Declare global functions to be called within this namespace here.
1298
1299
1300    // shim layer with setTimeout fallback
1301    var requestAnimFrame = (function(){
1302        return window.requestAnimationFrame ||
1303            window.webkitRequestAnimationFrame ||
1304            window.mozRequestAnimationFrame ||
1305            window.oRequestAnimationFrame ||
1306            window.msRequestAnimationFrame ||
1307            function(callback) {
1308                window.setTimeout(callback, 1000 / 60);
1309            };
1310    })();
1311
1312    function calculateScale(drawingHeight,maxSteps,minSteps,maxValue,minValue,labelTemplateString){
1313        var graphMin,graphMax,graphRange,stepValue,numberOfSteps,valueRange,rangeOrderOfMagnitude,decimalNum;
1314
1315        valueRange = maxValue - minValue;
1316
1317        rangeOrderOfMagnitude = calculateOrderOfMagnitude(valueRange);
1318
1319        graphMin = Math.floor(minValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude);
1320
1321        graphMax = Math.ceil(maxValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude);
1322
1323        graphRange = graphMax - graphMin;
1324
1325        stepValue = Math.pow(10, rangeOrderOfMagnitude);
1326
1327        numberOfSteps = Math.round(graphRange / stepValue);
1328
1329        //Compare number of steps to the max and min for that size graph, and add in half steps if need be.
1330        while(numberOfSteps < minSteps || numberOfSteps > maxSteps) {
1331            if (numberOfSteps < minSteps){
1332                stepValue /= 2;
1333                numberOfSteps = Math.round(graphRange/stepValue);
1334            }
1335            else{
1336                stepValue *=2;
1337                numberOfSteps = Math.round(graphRange/stepValue);
1338            }
1339        };
1340
1341        var labels = [];
1342        populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue);
1343
1344        return {
1345            steps : numberOfSteps,
1346            stepValue : stepValue,
1347            graphMin : graphMin,
1348            labels : labels
1349
1350        }
1351
1352        function calculateOrderOfMagnitude(val){
1353            return Math.floor(Math.log(val) / Math.LN10);
1354        }
1355
1356
1357    }
1358
1359    //Populate an array of all the labels by interpolating the string.
1360    function populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue) {
1361        if (labelTemplateString) {
1362            //Fix floating point errors by setting to fixed the on the same decimal as the stepValue.
1363            for (var i = 1; i < numberOfSteps + 1; i++) {
1364                labels.push(tmpl(labelTemplateString, {value: (graphMin + (stepValue * i)).toFixed(getDecimalPlaces(stepValue))}));
1365            }
1366        }
1367    }
1368
1369    //Max value from array
1370    function Max( array ){
1371        return Math.max.apply( Math, array );
1372    };
1373    //Min value from array
1374    function Min( array ){
1375        return Math.min.apply( Math, array );
1376    };
1377    //Default if undefined
1378    function Default(userDeclared,valueIfFalse){
1379        if(!userDeclared){
1380            return valueIfFalse;
1381        } else {
1382            return userDeclared;
1383        }
1384    };
1385    //Is a number function
1386    function isNumber(n) {
1387        return !isNaN(parseFloat(n)) && isFinite(n);
1388    }
1389    //Apply cap a value at a high or low number
1390    function CapValue(valueToCap, maxValue, minValue){
1391        if(isNumber(maxValue)) {
1392            if( valueToCap > maxValue ) {
1393                return maxValue;
1394            }
1395        }
1396        if(isNumber(minValue)){
1397            if ( valueToCap < minValue ){
1398                return minValue;
1399            }
1400        }
1401        return valueToCap;
1402    }
1403    function getDecimalPlaces (num){
1404        var numberOfDecimalPlaces;
1405        if (num%1!=0){
1406            return num.toString().split(".")[1].length
1407        }
1408        else{
1409            return 0;
1410        }
1411
1412    }
1413
1414    function mergeChartConfig(defaults,userDefined){
1415        var returnObj = {};
1416        for (var attrname in defaults) { returnObj[attrname] = defaults[attrname]; }
1417        for (var attrname in userDefined) { returnObj[attrname] = userDefined[attrname]; }
1418        return returnObj;
1419    }
1420
1421    //Javascript micro templating by John Resig - source at http://ejohn.org/blog/javascript-micro-templating/
1422    var cache = {};
1423
1424    function tmpl(str, data){
1425        // Figure out if we're getting a template, or if we need to
1426        // load the template - and be sure to cache the result.
1427        var fn = !/\W/.test(str) ?
1428            cache[str] = cache[str] ||
1429                tmpl(document.getElementById(str).innerHTML) :
1430
1431            // Generate a reusable function that will serve as a template
1432            // generator (and which will be cached).
1433            new Function("obj",
1434                "var p=[],print=function(){p.push.apply(p,arguments);};" +
1435
1436                    // Introduce the data as local variables using with(){}
1437                    "with(obj){p.push('" +
1438
1439                    // Convert the template into pure JavaScript
1440                    str
1441                        .replace(/[\r\t\n]/g, " ")
1442                        .split("<%").join("\t")
1443                        .replace(/((^|%>)[^\t]*)'/g, "$1\r")
1444                        .replace(/\t=(.*?)%>/g, "',$1,'")
1445                        .split("\t").join("');")
1446                        .split("%>").join("p.push('")
1447                        .split("\r").join("\\'")
1448                    + "');}return p.join('');");
1449
1450        // Provide some basic currying to the user
1451        return data ? fn( data ) : fn;
1452    };
1453}