vendor/assets/javascripts/chart.js in flashgrid-ext-1.1.1 vs vendor/assets/javascripts/chart.js in flashgrid-ext-2.0.0

- old
+ new

@@ -1,1751 +1,1751 @@ window.Chart = function(context, options){ - var chart = this; + var chart = this; - 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; - } - }; + 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; + } + }; - this.tooltips = [], - defaults = { - tooltips: { - background: 'rgba(71,74,84,1)', - fontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", - fontStyle : "bold", - fontColor: 'rgba(255,255,255,1)', - fontSize: '11px', - labelTemplate: '<%=label%>: <%=value%>', - padding: { - top: 10, - right: 5, - bottom: 12, - left: 5 - }, - offset: { - left: 15, - top: 0 - }, - border: { - radius: 3 - }, - showHighlight: true, - highlight: { - stroke: { - width: 1, - color: 'rgba(255,255,255,0.25)' - }, - fill: 'rgba(255,255,255,0.25)' - } - } - }, - options = (options) ? mergeChartConfig(defaults, options) : defaults; + this.tooltips = [], + defaults = { + tooltips: { + background: 'rgba(71,74,84,1)', + fontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", + fontStyle : "bold", + fontColor: 'rgba(255,255,255,1)', + fontSize: '11px', + labelTemplate: '<%=label%>: <%=value%>', + padding: { + top: 10, + right: 5, + bottom: 12, + left: 5 + }, + offset: { + left: 15, + top: 0 + }, + border: { + radius: 3 + }, + showHighlight: true, + highlight: { + stroke: { + width: 1, + color: 'rgba(255,255,255,0.25)' + }, + fill: 'rgba(255,255,255,0.25)' + } + } + }, + options = (options) ? mergeChartConfig(defaults, options) : defaults; - function registerTooltip(ctx,areaObj,data,type) { - chart.tooltips.push(new Tooltip( - ctx, - areaObj, - data, - type - )); - } + function registerTooltip(ctx,areaObj,data,type) { + chart.tooltips.push(new Tooltip( + ctx, + areaObj, + data, + type + )); + } - var Tooltip = function(ctx, areaObj, data, type) { - this.ctx = ctx; - this.areaObj = areaObj; - this.data = data; - this.savedState = null; - this.highlightState = null; - this.x = null; - this.y = null; + var Tooltip = function(ctx, areaObj, data, type) { + this.ctx = ctx; + this.areaObj = areaObj; + this.data = data; + this.savedState = null; + this.highlightState = null; + this.x = null; + this.y = null; - this.inRange = function(x,y) { - if(this.areaObj.type) { - switch(this.areaObj.type) { - case 'rect': - return (x >= this.areaObj.x && x <= this.areaObj.x+this.areaObj.width) && - (y >= this.areaObj.y && y <= this.areaObj.y+this.areaObj.height); - break; - case 'circle': - return ((Math.pow(x-this.areaObj.x, 2)+Math.pow(y-this.areaObj.y, 2)) < Math.pow(this.areaObj.r,2)); - break; - case 'shape': - var poly = this.areaObj.points; - for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) - ((poly[i].y <= y && y < poly[j].y) || (poly[j].y <= y && y < poly[i].y)) - && (x < (poly[j].x - poly[i].x) * (y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x) - && (c = !c); - return c; - break; - } - } - } + this.inRange = function(x,y) { + if(this.areaObj.type) { + switch(this.areaObj.type) { + case 'rect': + return (x >= this.areaObj.x && x <= this.areaObj.x+this.areaObj.width) && + (y >= this.areaObj.y && y <= this.areaObj.y+this.areaObj.height); + break; + case 'circle': + return ((Math.pow(x-this.areaObj.x, 2)+Math.pow(y-this.areaObj.y, 2)) < Math.pow(this.areaObj.r,2)); + break; + case 'shape': + var poly = this.areaObj.points; + for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) + ((poly[i].y <= y && y < poly[j].y) || (poly[j].y <= y && y < poly[i].y)) + && (x < (poly[j].x - poly[i].x) * (y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x) + && (c = !c); + return c; + break; + } + } + } - this.render = function(x,y) { - if(this.savedState == null) { - this.ctx.putImageData(chart.savedState,0,0); - this.savedState = this.ctx.getImageData(0,0,this.ctx.canvas.width,this.ctx.canvas.height); - } - this.ctx.putImageData(this.savedState,0,0); - if(options.tooltips.showHighlight) { - if(this.highlightState == null) { - this.ctx.strokeStyle = options.tooltips.highlight.stroke.color; - this.ctx.lineWidth = options.tooltips.highlight.stroke.width; - this.ctx.fillStyle = options.tooltips.highlight.fill; - switch(this.areaObj.type) { - case 'rect': - this.ctx.strokeRect(this.areaObj.x, this.areaObj.y, this.areaObj.width, this.areaObj.height); - this.ctx.fillStyle = options.tooltips.highlight.fill; - this.ctx.fillRect(this.areaObj.x, this.areaObj.y, this.areaObj.width, this.areaObj.height); - break; - case 'circle': - this.ctx.beginPath(); - this.ctx.arc(this.areaObj.x, this.areaObj.y, this.areaObj.r, 0, 2*Math.PI, false); - this.ctx.stroke(); - this.ctx.fill(); - break; - case 'shape': - this.ctx.beginPath(); - this.ctx.moveTo(this.areaObj.points[0].x, this.areaObj.points[0].y); - for(var p in this.areaObj.points) { - this.ctx.lineTo(this.areaObj.points[p].x, this.areaObj.points[p].y); - } - this.ctx.stroke(); - this.ctx.fill(); - break; - } - this.highlightState = this.ctx.getImageData(0,0,this.ctx.canvas.width,this.ctx.canvas.height); - } else { - this.ctx.putImageData(this.highlightState,0,0); - } - } - //if(this.x != x || this.y != y) { - var posX = x+options.tooltips.offset.left, - posY = y+options.tooltips.offset.top, - tpl = tmpl(options.tooltips.labelTemplate, this.data), - rectWidth = options.tooltips.padding.left+this.ctx.measureText(tpl).width+options.tooltips.padding.right; - if(posX + rectWidth > this.ctx.canvas.width) { - posX -= posX-rectWidth < 0 ? posX : rectWidth; - } - if(posY + 24 > this.ctx.canvas.height) { - posY -= 24; - } - this.ctx.fillStyle = options.tooltips.background; - this.ctx.fillRect(posX, posY, rectWidth, 24); - if(options.tooltips.border.width > 0) { - this.ctx.fillStyle = options.tooltips.order.color; - this.ctx.lineWidth = options.tooltips.border.width; - this.ctx.strokeRect(posX, posY, rectWidth, 24); - } - this.ctx.font = options.tooltips.fontStyle+ " "+options.tooltips.fontSize+" " + options.tooltips.fontFamily; - this.ctx.fillStyle = options.tooltips.fontColor; - this.ctx.textAlign = 'center'; - this.ctx.textBaseline = 'middle'; - this.ctx.fillText(tpl, posX+rectWidth/2, posY+12); - this.x = x; - this.y = y; - //} - } - } + this.render = function(x,y) { + if(this.savedState == null) { + this.ctx.putImageData(chart.savedState,0,0); + this.savedState = this.ctx.getImageData(0,0,this.ctx.canvas.width,this.ctx.canvas.height); + } + this.ctx.putImageData(this.savedState,0,0); + if(options.tooltips.showHighlight) { + if(this.highlightState == null) { + this.ctx.strokeStyle = options.tooltips.highlight.stroke.color; + this.ctx.lineWidth = options.tooltips.highlight.stroke.width; + this.ctx.fillStyle = options.tooltips.highlight.fill; + switch(this.areaObj.type) { + case 'rect': + this.ctx.strokeRect(this.areaObj.x, this.areaObj.y, this.areaObj.width, this.areaObj.height); + this.ctx.fillStyle = options.tooltips.highlight.fill; + this.ctx.fillRect(this.areaObj.x, this.areaObj.y, this.areaObj.width, this.areaObj.height); + break; + case 'circle': + this.ctx.beginPath(); + this.ctx.arc(this.areaObj.x, this.areaObj.y, this.areaObj.r, 0, 2*Math.PI, false); + this.ctx.stroke(); + this.ctx.fill(); + break; + case 'shape': + this.ctx.beginPath(); + this.ctx.moveTo(this.areaObj.points[0].x, this.areaObj.points[0].y); + for(var p in this.areaObj.points) { + this.ctx.lineTo(this.areaObj.points[p].x, this.areaObj.points[p].y); + } + this.ctx.stroke(); + this.ctx.fill(); + break; + } + this.highlightState = this.ctx.getImageData(0,0,this.ctx.canvas.width,this.ctx.canvas.height); + } else { + this.ctx.putImageData(this.highlightState,0,0); + } + } + //if(this.x != x || this.y != y) { + var posX = x+options.tooltips.offset.left, + posY = y+options.tooltips.offset.top, + tpl = tmpl(options.tooltips.labelTemplate, this.data), + rectWidth = options.tooltips.padding.left+this.ctx.measureText(tpl).width+options.tooltips.padding.right; + if(posX + rectWidth > this.ctx.canvas.width) { + posX -= posX-rectWidth < 0 ? posX : rectWidth; + } + if(posY + 24 > this.ctx.canvas.height) { + posY -= 24; + } + this.ctx.fillStyle = options.tooltips.background; + this.ctx.fillRect(posX, posY, rectWidth, 24); + if(options.tooltips.border.width > 0) { + this.ctx.fillStyle = options.tooltips.order.color; + this.ctx.lineWidth = options.tooltips.border.width; + this.ctx.strokeRect(posX, posY, rectWidth, 24); + } + this.ctx.font = options.tooltips.fontStyle+ " "+options.tooltips.fontSize+" " + options.tooltips.fontFamily; + this.ctx.fillStyle = options.tooltips.fontColor; + this.ctx.textAlign = 'center'; + this.ctx.textBaseline = 'middle'; + this.ctx.fillText(tpl, posX+rectWidth/2, posY+12); + this.x = x; + this.y = y; + //} + } + } - //Variables global to the chart - var width = context.canvas.width, - height = context.canvas.height; + //Variables global to the chart + var width = context.canvas.width, + height = context.canvas.height; - this.savedState = null; + this.savedState = null; - function getPosition(e) { - var xPosition = 0; - var yPosition = 0; + function getPosition(e) { + var xPosition = 0; + var yPosition = 0; - while(e) { - xPosition += (e.offsetLeft - e.scrollLeft + e.clientLeft); - yPosition += (e.offsetTop - e.scrollTop + e.clientTop); - e = e.offsetParent; - } - return { x: xPosition, y: yPosition }; - } + while(e) { + xPosition += (e.offsetLeft - e.scrollLeft + e.clientLeft); + yPosition += (e.offsetTop - e.scrollTop + e.clientTop); + e = e.offsetParent; + } + return { x: xPosition, y: yPosition }; + } - function tooltipEventHandler(e) { - if(chart.tooltips.length > 0) { - chart.savedState = chart.savedState == null ? context.getImageData(0,0,context.canvas.width,context.canvas.height) : chart.savedState; - var rendered = 0; - for(var i in chart.tooltips) { - var position = getPosition(context.canvas), - mx = (e.clientX)-position.x, - my = (e.clientY)-position.y; - if(chart.tooltips[i].inRange(mx,my)) { - chart.tooltips[i].render(mx,my); - rendered++; - } - } - if(rendered == 0) { - context.putImageData(chart.savedState,0,0); - } - } - } + function tooltipEventHandler(e) { + if(chart.tooltips.length > 0) { + chart.savedState = chart.savedState == null ? context.getImageData(0,0,context.canvas.width,context.canvas.height) : chart.savedState; + var rendered = 0; + for(var i in chart.tooltips) { + var position = getPosition(context.canvas), + mx = (e.clientX)-position.x, + my = (e.clientY)-position.y; + if(chart.tooltips[i].inRange(mx,my)) { + chart.tooltips[i].render(mx,my); + rendered++; + } + } + if(rendered == 0) { + context.putImageData(chart.savedState,0,0); + } + } + } - if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) { - context.canvas.ontouchstart = function(e) { - e.clientX = e.targetTouches[0].clientX; - e.clientY = e.targetTouches[0].clientY; - tooltipEventHandler(e); - } - context.canvas.ontouchmove = function(e) { - e.clientX = e.targetTouches[0].clientX; - e.clientY = e.targetTouches[0].clientY; - tooltipEventHandler(e); - } - } else { - context.canvas.onmousemove = function(e) { - tooltipEventHandler(e); - } - } - context.canvas.onmouseout = function(e) { - if(chart.savedState != null) { - context.putImageData(chart.savedState,0,0); - } - } + if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) { + context.canvas.ontouchstart = function(e) { + e.clientX = e.targetTouches[0].clientX; + e.clientY = e.targetTouches[0].clientY; + tooltipEventHandler(e); + } + context.canvas.ontouchmove = function(e) { + e.clientX = e.targetTouches[0].clientX; + e.clientY = e.targetTouches[0].clientY; + tooltipEventHandler(e); + } + } else { + context.canvas.onmousemove = function(e) { + tooltipEventHandler(e); + } + } + context.canvas.onmouseout = function(e) { + if(chart.savedState != null) { + context.putImageData(chart.savedState,0,0); + } + } - //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); - } + //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){ + 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,0.1)", - scaleLineWidth : 1, - scaleShowLabels : true, - scaleLabel : "<%=value%>", - scaleFontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", - scaleFontSize : 12, - scaleFontStyle : "normal", - scaleFontColor : "rgba(71,74,84,1)", - scaleShowLabelBackdrop : true, - scaleBackdropColor : "rgba(255,255,255,0.75)", - scaleBackdropPaddingY : 2, - scaleBackdropPaddingX : 2, - segmentShowStroke : true, - segmentStrokeColor : "#fff", - segmentStrokeWidth : 1, - animation : true, - animationSteps : 100, - animationEasing : "easeOutBounce", - animateRotate : true, - animateScale : false, - onAnimationComplete : null, - showTooltips : true - }; + chart.PolarArea.defaults = { + scaleOverlay : true, + scaleOverride : false, + scaleSteps : null, + scaleStepWidth : null, + scaleStartValue : null, + scaleShowLine : true, + scaleLineColor : "rgba(0,0,0,0.1)", + scaleLineWidth : 1, + scaleShowLabels : true, + scaleLabel : "<%=value%>", + scaleFontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", + scaleFontSize : 12, + scaleFontStyle : "normal", + scaleFontColor : "rgba(71,74,84,1)", + scaleShowLabelBackdrop : true, + scaleBackdropColor : "rgba(255,255,255,0.75)", + scaleBackdropPaddingY : 2, + scaleBackdropPaddingX : 2, + segmentShowStroke : true, + segmentStrokeColor : "#fff", + segmentStrokeWidth : 1, + animation : true, + animationSteps : 100, + animationEasing : "easeOutBounce", + animateRotate : true, + animateScale : false, + onAnimationComplete : null, + showTooltips : true + }; - var config = (options)? mergeChartConfig(chart.PolarArea.defaults,options) : chart.PolarArea.defaults; + var config = (options)? mergeChartConfig(chart.PolarArea.defaults,options) : chart.PolarArea.defaults; - return new PolarArea(data,config,context); - }; + return new PolarArea(data,config,context); + }; - this.Radar = function(data,options){ + 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,0.1)", - scaleLineWidth : 1, - scaleShowLabels : false, - scaleLabel : "<%=value%>", - scaleFontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", - scaleFontSize : 12, - scaleFontStyle : "normal", - scaleFontColor : "rgba(71,74,84,1)", - scaleShowLabelBackdrop : true, - scaleBackdropColor : "rgba(255,255,255,0.75)", - scaleBackdropPaddingY : 2, - scaleBackdropPaddingX : 2, - angleShowLineOut : true, - angleLineColor : "rgba(0,0,0,0.1)", - angleLineWidth : 1, - pointLabelFontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", - pointLabelFontStyle : "normal", - pointLabelFontSize : 12, - pointLabelFontColor : "rgba(71,74,84,1)", - pointDot : true, - pointDotRadius : 3, - pointDotStrokeWidth : 1, - datasetStroke : true, - datasetStrokeWidth : 1, - datasetFill : true, - animation : true, - animationSteps : 60, - animationEasing : "easeOutQuart", - onAnimationComplete : null, - showTooltips : true - }; + chart.Radar.defaults = { + scaleOverlay : false, + scaleOverride : false, + scaleSteps : null, + scaleStepWidth : null, + scaleStartValue : null, + scaleShowLine : true, + scaleLineColor : "rgba(0,0,0,0.1)", + scaleLineWidth : 1, + scaleShowLabels : false, + scaleLabel : "<%=value%>", + scaleFontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", + scaleFontSize : 12, + scaleFontStyle : "normal", + scaleFontColor : "rgba(71,74,84,1)", + scaleShowLabelBackdrop : true, + scaleBackdropColor : "rgba(255,255,255,0.75)", + scaleBackdropPaddingY : 2, + scaleBackdropPaddingX : 2, + angleShowLineOut : true, + angleLineColor : "rgba(0,0,0,0.1)", + angleLineWidth : 1, + pointLabelFontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", + pointLabelFontStyle : "normal", + pointLabelFontSize : 12, + pointLabelFontColor : "rgba(71,74,84,1)", + pointDot : true, + pointDotRadius : 3, + pointDotStrokeWidth : 1, + datasetStroke : true, + datasetStrokeWidth : 1, + datasetFill : true, + animation : true, + animationSteps : 60, + animationEasing : "easeOutQuart", + onAnimationComplete : null, + showTooltips : true + }; - var config = (options)? mergeChartConfig(chart.Radar.defaults,options) : chart.Radar.defaults; + var config = (options)? mergeChartConfig(chart.Radar.defaults,options) : chart.Radar.defaults; - return new Radar(data,config,context); - }; + return new Radar(data,config,context); + }; - this.Pie = function(data,options){ - chart.Pie.defaults = { - segmentShowStroke : true, - segmentStrokeColor : "#fff", - segmentStrokeWidth : 1, - animation : true, - animationSteps : 100, - animationEasing : "easeOutBounce", - animateRotate : true, - animateScale : false, - onAnimationComplete : null, - labelFontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", - labelFontStyle : "normal", - labelFontSize : 12, - labelFontColor : "rgba(71,74,84,1)", - labelAlign : 'right', - showTooltips : true - }; + this.Pie = function(data,options){ + chart.Pie.defaults = { + segmentShowStroke : true, + segmentStrokeColor : "#fff", + segmentStrokeWidth : 1, + animation : true, + animationSteps : 100, + animationEasing : "easeOutBounce", + animateRotate : true, + animateScale : false, + onAnimationComplete : null, + labelFontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", + labelFontStyle : "normal", + labelFontSize : 12, + labelFontColor : "rgba(71,74,84,1)", + labelAlign : 'right', + showTooltips : true + }; - var config = (options)? mergeChartConfig(chart.Pie.defaults,options) : chart.Pie.defaults; + var config = (options)? mergeChartConfig(chart.Pie.defaults,options) : chart.Pie.defaults; - return new Pie(data,config,context); - }; + return new Pie(data,config,context); + }; - this.Doughnut = function(data,options){ + this.Doughnut = function(data,options){ - chart.Doughnut.defaults = { - segmentShowStroke : true, - segmentStrokeColor : "#fff", - segmentStrokeWidth : 1, - percentageInnerCutout : 50, - animation : true, - animationSteps : 100, - animationEasing : "easeOutBounce", - animateRotate : true, - animateScale : false, - onAnimationComplete : null, - showTooltips : true - }; + chart.Doughnut.defaults = { + segmentShowStroke : true, + segmentStrokeColor : "#fff", + segmentStrokeWidth : 1, + percentageInnerCutout : 50, + animation : true, + animationSteps : 100, + animationEasing : "easeOutBounce", + animateRotate : true, + animateScale : false, + onAnimationComplete : null, + showTooltips : true + }; - var config = (options)? mergeChartConfig(chart.Doughnut.defaults,options) : chart.Doughnut.defaults; + var config = (options)? mergeChartConfig(chart.Doughnut.defaults,options) : chart.Doughnut.defaults; - return new Doughnut(data,config,context); + return new Doughnut(data,config,context); - }; + }; - this.Line = function(data,options){ + this.Line = function(data,options){ - chart.Line.defaults = { - scaleOverlay : false, - scaleOverride : false, - scaleSteps : null, - scaleStepWidth : null, - scaleStartValue : null, - scaleLineColor : "rgba(0,0,0,0.1)", - scaleLineWidth : 1, - scaleShowLabels : true, - scaleLabel : "<%=value%>", - scaleFontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", - scaleFontSize : 12, - scaleFontStyle : "normal", - scaleFontColor : "rgba(71,74,84,1)", - scaleShowGridLines : true, - scaleGridLineColor : "rgba(0,0,0,0.05)", - scaleGridLineWidth : 1, - bezierCurve : true, - pointDot : true, - pointDotRadius : 4, - pointDotStrokeWidth : 1, - datasetStroke : true, - datasetStrokeWidth : 1, - datasetFill : true, - animation : true, - animationSteps : 60, - animationEasing : "easeOutQuart", - onAnimationComplete : null, - showTooltips : true - }; - var config = (options) ? mergeChartConfig(chart.Line.defaults,options) : chart.Line.defaults; + chart.Line.defaults = { + scaleOverlay : false, + scaleOverride : false, + scaleSteps : null, + scaleStepWidth : null, + scaleStartValue : null, + scaleLineColor : "rgba(0,0,0,0.1)", + scaleLineWidth : 1, + scaleShowLabels : true, + scaleLabel : "<%=value%>", + scaleFontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", + scaleFontSize : 12, + scaleFontStyle : "normal", + scaleFontColor : "rgba(71,74,84,1)", + scaleShowGridLines : true, + scaleGridLineColor : "rgba(0,0,0,0.05)", + scaleGridLineWidth : 1, + bezierCurve : true, + pointDot : true, + pointDotRadius : 4, + pointDotStrokeWidth : 1, + datasetStroke : true, + datasetStrokeWidth : 1, + datasetFill : true, + animation : true, + animationSteps : 60, + animationEasing : "easeOutQuart", + onAnimationComplete : null, + showTooltips : true + }; + var config = (options) ? mergeChartConfig(chart.Line.defaults,options) : chart.Line.defaults; - return new Line(data,config,context); - } + 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,0.1)", - scaleLineWidth : 1, - scaleShowLabels : true, - scaleLabel : "<%=value%>", - scaleFontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", - scaleFontSize : 12, - scaleFontStyle : "normal", - scaleFontColor : "rgba(71,74,84,1)", - scaleShowGridLines : true, - scaleGridLineColor : "rgba(0,0,0,0.05)", - scaleGridLineWidth : 1, - barShowStroke : true, - barStrokeWidth : 1, - barValueSpacing : 5, - barDatasetSpacing : 2, - animation : true, - animationSteps : 60, - animationEasing : "easeOutQuart", - onAnimationComplete : null, - showTooltips : true - }; - var config = (options) ? mergeChartConfig(chart.Bar.defaults,options) : chart.Bar.defaults; + this.Bar = function(data,options){ + chart.Bar.defaults = { + scaleOverlay : false, + scaleOverride : false, + scaleSteps : null, + scaleStepWidth : null, + scaleStartValue : null, + scaleLineColor : "rgba(0,0,0,0.1)", + scaleLineWidth : 1, + scaleShowLabels : true, + scaleLabel : "<%=value%>", + scaleFontFamily : "'Gotham', 'Helvetica', Helvetica, Arial, sans-serif", + scaleFontSize : 12, + scaleFontStyle : "normal", + scaleFontColor : "rgba(71,74,84,1)", + scaleShowGridLines : true, + scaleGridLineColor : "rgba(0,0,0,0.05)", + scaleGridLineWidth : 1, + barShowStroke : true, + barStrokeWidth : 1, + barValueSpacing : 5, + barDatasetSpacing : 2, + animation : true, + animationSteps : 60, + animationEasing : "easeOutQuart", + onAnimationComplete : null, + showTooltips : true + }; + var config = (options) ? mergeChartConfig(chart.Bar.defaults,options) : chart.Bar.defaults; - return new Bar(data,config,context); - } + return new Bar(data,config,context); + } - var clear = function(c){ - c.clearRect(0, 0, width, height); - }; + var clear = function(c){ + c.clearRect(0, 0, width, height); + }; - var PolarArea = function(data,config,ctx){ - var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString; + var PolarArea = function(data,config,ctx){ + var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString; - calculateDrawingSizes(); + calculateDrawingSizes(); - valueBounds = getValueBounds(); + valueBounds = getValueBounds(); - labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : null; + labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : null; - //Check and set the scale - if (!config.scaleOverride){ + //Check and set the scale + if (!config.scaleOverride){ - calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString); - } - else { - calculatedScale = { - steps : config.scaleSteps, - stepValue : config.scaleStepWidth, - graphMin : config.scaleStartValue, - labels : [] - } - populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); - } + calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString); + } + else { + calculatedScale = { + steps : config.scaleSteps, + stepValue : config.scaleStepWidth, + graphMin : config.scaleStartValue, + labels : [] + } + populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); + } - scaleHop = maxSize/(calculatedScale.steps); + scaleHop = maxSize/(calculatedScale.steps); - //Wrap in an animation loop wrapper - animationLoop(config,drawScale,drawAllSegments,ctx); + //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. + 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]); + 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; - } + 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(); - } + 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; - } - } + 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++){ + 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(); + 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(animationDecimal >= 1 && config.showTooltips) { - var points = [{x:width/2,y:height/2}], - pAmount = 50, - radius = calculateOffset(data[i].value,calculatedScale,scaleHop); - points.push({x:width/2+radius*Math.cos(startAngle),y:height/2+radius*Math.sin(startAngle)}); - for(var p = 0; p <= pAmount; p++) { - points.push({x:width/2+radius*Math.cos(startAngle+p/pAmount*rotateAnimation*angleStep),y:height/2+radius*Math.sin(startAngle+p/pAmount*rotateAnimation*angleStep)}); - } - registerTooltip(ctx,{type:'shape',points:points},{label:data[i].label,value:data[i].value},'PolarArea'); - } + if(animationDecimal >= 1 && config.showTooltips) { + var points = [{x:width/2,y:height/2}], + pAmount = 50, + radius = calculateOffset(data[i].value,calculatedScale,scaleHop); + points.push({x:width/2+radius*Math.cos(startAngle),y:height/2+radius*Math.sin(startAngle)}); + for(var p = 0; p <= pAmount; p++) { + points.push({x:width/2+radius*Math.cos(startAngle+p/pAmount*rotateAnimation*angleStep),y:height/2+radius*Math.sin(startAngle+p/pAmount*rotateAnimation*angleStep)}); + } + registerTooltip(ctx,{type:'shape',points:points},{label:data[i].label,value:data[i].value},'PolarArea'); + } - 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;} - }; + 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)); + 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 - }; + return { + maxValue : upperValue, + minValue : lowerValue, + maxSteps : maxSteps, + minSteps : minSteps + }; - } - } + } + } - var Radar = function (data,config,ctx) { - var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString; + 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 = []; + //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(); + calculateDrawingSizes(); - var valueBounds = getValueBounds(); + var valueBounds = getValueBounds(); - labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : null; + labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : null; - //Check and set the scale - if (!config.scaleOverride){ + //Check and set the scale + if (!config.scaleOverride){ - calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString); - } - else { - calculatedScale = { - steps : config.scaleSteps, - stepValue : config.scaleStepWidth, - graphMin : config.scaleStartValue, - labels : [] - } - populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); - } + calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString); + } + else { + calculatedScale = { + steps : config.scaleSteps, + stepValue : config.scaleStepWidth, + graphMin : config.scaleStartValue, + labels : [] + } + populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); + } - scaleHop = maxSize/(calculatedScale.steps); + scaleHop = maxSize/(calculatedScale.steps); - animationLoop(config,drawScale,drawAllDataPoints,ctx); + animationLoop(config,drawScale,drawAllDataPoints,ctx); - //Radar specific functions. - function drawAllDataPoints(animationDecimal){ - var rotationDegree = (2*Math.PI)/data.datasets[0].data.length; + //Radar specific functions. + function drawAllDataPoints(animationDecimal){ + var rotationDegree = (2*Math.PI)/data.datasets[0].data.length; - ctx.save(); - //translate to the centre of the canvas. - ctx.translate(width/2,height/2); - //We accept multiple data sets for radar charts, so show loop through each set - for (var i=0; i<data.datasets.length; i++){ - var offset = calculateOffset(data.datasets[i].data[0],calculatedScale,scaleHop); - ctx.beginPath(); - ctx.moveTo(0,animationDecimal*(-1*offset)); - if(animationDecimal >= 1 && config.showTooltips) { - var curX = width/2+offset*Math.cos(0-Math.PI/2), - curY = height/2+offset*Math.sin(0-Math.PI/2), - pointRadius = config.pointDot ? config.pointDotRadius+config.pointDotStrokeWidth : 10, - ttData = data.labels[0].trim() != "" ? data.labels[0]+": "+data.datasets[i].data[0] : data.datasets[i].data[0]; - registerTooltip(ctx,{type:'circle',x:curX,y:curY,r:pointRadius},{label:data.labels[0],value:data.datasets[i].data[0]},'Radar'); - } - for (var j=1; j<data.datasets[i].data.length; j++){ - offset = calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop); - ctx.rotate(rotationDegree); - ctx.lineTo(0,animationDecimal*(-1*offset)); - if(animationDecimal >= 1 && config.showTooltips) { - var curX = width/2+offset*Math.cos(j*rotationDegree-Math.PI/2), - curY = height/2+offset*Math.sin(j*rotationDegree-Math.PI/2), - pointRadius = config.pointDot ? config.pointDotRadius+config.pointDotStrokeWidth : 10, - ttData = data.labels[j].trim() != "" ? data.labels[j]+": "+data.datasets[i].data[j] : data.datasets[i].data[j]; - registerTooltip(ctx,{type:'circle',x:curX,y:curY,r:pointRadius},{label:data.labels[j],value:data.datasets[i].data[j]},'Radar'); - } - } - ctx.closePath(); + ctx.save(); + //translate to the centre of the canvas. + ctx.translate(width/2,height/2); + //We accept multiple data sets for radar charts, so show loop through each set + for (var i=0; i<data.datasets.length; i++){ + var offset = calculateOffset(data.datasets[i].data[0],calculatedScale,scaleHop); + ctx.beginPath(); + ctx.moveTo(0,animationDecimal*(-1*offset)); + if(animationDecimal >= 1 && config.showTooltips) { + var curX = width/2+offset*Math.cos(0-Math.PI/2), + curY = height/2+offset*Math.sin(0-Math.PI/2), + pointRadius = config.pointDot ? config.pointDotRadius+config.pointDotStrokeWidth : 10, + ttData = data.labels[0].trim() != "" ? data.labels[0]+": "+data.datasets[i].data[0] : data.datasets[i].data[0]; + registerTooltip(ctx,{type:'circle',x:curX,y:curY,r:pointRadius},{label:data.labels[0],value:data.datasets[i].data[0]},'Radar'); + } + for (var j=1; j<data.datasets[i].data.length; j++){ + offset = calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop); + ctx.rotate(rotationDegree); + ctx.lineTo(0,animationDecimal*(-1*offset)); + if(animationDecimal >= 1 && config.showTooltips) { + var curX = width/2+offset*Math.cos(j*rotationDegree-Math.PI/2), + curY = height/2+offset*Math.sin(j*rotationDegree-Math.PI/2), + pointRadius = config.pointDot ? config.pointDotRadius+config.pointDotStrokeWidth : 10, + ttData = data.labels[j].trim() != "" ? data.labels[j]+": "+data.datasets[i].data[j] : data.datasets[i].data[j]; + registerTooltip(ctx,{type:'circle',x:curX,y:curY,r:pointRadius},{label:data.labels[j],value:data.datasets[i].data[j]},'Radar'); + } + } + ctx.closePath(); - ctx.fillStyle = data.datasets[i].fillColor; - ctx.strokeStyle = data.datasets[i].strokeColor; - ctx.lineWidth = config.datasetStrokeWidth; - ctx.fill(); - ctx.stroke(); + 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(); - } + if (config.pointDot){ + ctx.fillStyle = data.datasets[i].pointColor; + ctx.strokeStyle = data.datasets[i].pointStrokeColor; + ctx.lineWidth = config.pointDotStrokeWidth; + for (var k=0; k<data.datasets[i].data.length; k++){ + ctx.rotate(rotationDegree); + ctx.beginPath(); + ctx.arc(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[k],calculatedScale,scaleHop)),config.pointDotRadius,2*Math.PI,false); + ctx.fill(); + ctx.stroke(); + } - } - ctx.rotate(rotationDegree); - } - ctx.restore(); + } + ctx.rotate(rotationDegree); + } + ctx.restore(); - } - function drawScale(){ - var rotationDegree = (2*Math.PI)/data.datasets[0].data.length; - ctx.save(); - ctx.translate(width / 2, height / 2); + } + 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++){ + 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(); - } - } + 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(); + 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.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.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)); - } + 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); + } + 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"; - } + 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.textBaseline = "middle"; - ctx.fillText(data.labels[k],opposite,-adjacent); + ctx.fillText(data.labels[k],opposite,-adjacent); - } - ctx.restore(); - }; - function calculateDrawingSizes(){ - maxSize = (Min([width,height])/2); + } + ctx.restore(); + }; + function calculateDrawingSizes(){ + maxSize = (Min([width,height])/2); - labelHeight = config.scaleFontSize*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; - } + 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)]); + //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; + 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]} - } - } + 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)); + 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 - }; + return { + maxValue : upperValue, + minValue : lowerValue, + maxSteps : maxSteps, + minSteps : minSteps + }; - } - } + } + } - var Pie = function(data,config,ctx){ - var segmentTotal = 0; + 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; + //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; - } - ctx.fillStyle = 'black'; - ctx.textBaseline = 'base'; + for (var i=0; i<data.length; i++){ + segmentTotal += data[i].value; + } + ctx.fillStyle = 'black'; + ctx.textBaseline = 'base'; - animationLoop(config,null,drawPieSegments,ctx); + 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; - } - } + 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(); + 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(data[i].label && scaleAnimation*pieRadius*2*segmentAngle/(2*Math.PI) > config.labelFontSize) { - function getPieLabelX(align, r) { - switch(align) { - case 'left': - return -r+20; - break; - case 'center': - return -r/2; - break; - } - return -10; - } + if(data[i].label && scaleAnimation*pieRadius*2*segmentAngle/(2*Math.PI) > config.labelFontSize) { + function getPieLabelX(align, r) { + switch(align) { + case 'left': + return -r+20; + break; + case 'center': + return -r/2; + break; + } + return -10; + } - function reversePieLabelAlign(align) { - switch(align) { - case 'left': return 'right'; break; - case 'right': return 'left'; break; - case 'center': return align; break; - } - } + function reversePieLabelAlign(align) { + switch(align) { + case 'left': return 'right'; break; + case 'right': return 'left'; break; + case 'center': return align; break; + } + } - var fontSize = data[i].labelFontSize || config.labelFontSize+'px'; + var fontSize = data[i].labelFontSize || config.labelFontSize+'px'; - if(fontSize.match(/^[0-9]+$/g) != null) { - fontSize = fontSize+'px'; - } - ctx.font = config.labelFontStyle+ " " +fontSize+" " + config.labelFontFamily; - ctx.fillStyle = getFadeColor(animationDecimal, data[i].labelColor || 'black', data[i].color); - ctx.textBaseline = 'middle'; - // rotate text, so it perfectly fits in segments - var textRotation = -(cumulativeAngle + segmentAngle)+segmentAngle/2, - tX = width/2+scaleAnimation*pieRadius*Math.cos(textRotation), - tY = height/2-scaleAnimation*pieRadius*Math.sin(textRotation); - ctx.textAlign = data[i].labelAlign || config.labelAlign; - textX = getPieLabelX(ctx.textAlign, scaleAnimation*pieRadius); - if(textRotation < -Math.PI/2) { - textRotation -= Math.PI; - ctx.textAlign = reversePieLabelAlign(ctx.textAlign); - textX = -textX; - } - ctx.translate(tX, tY); - ctx.rotate(-textRotation); - ctx.fillText(data[i].label, textX, 0); - ctx.rotate(textRotation); - ctx.translate(-tX, -tY); - } + if(fontSize.match(/^[0-9]+$/g) != null) { + fontSize = fontSize+'px'; + } + ctx.font = config.labelFontStyle+ " " +fontSize+" " + config.labelFontFamily; + ctx.fillStyle = getFadeColor(animationDecimal, data[i].labelColor || 'black', data[i].color); + ctx.textBaseline = 'middle'; + // rotate text, so it perfectly fits in segments + var textRotation = -(cumulativeAngle + segmentAngle)+segmentAngle/2, + tX = width/2+scaleAnimation*pieRadius*Math.cos(textRotation), + tY = height/2-scaleAnimation*pieRadius*Math.sin(textRotation); + ctx.textAlign = data[i].labelAlign || config.labelAlign; + textX = getPieLabelX(ctx.textAlign, scaleAnimation*pieRadius); + if(textRotation < -Math.PI/2) { + textRotation -= Math.PI; + ctx.textAlign = reversePieLabelAlign(ctx.textAlign); + textX = -textX; + } + ctx.translate(tX, tY); + ctx.rotate(-textRotation); + ctx.fillText(data[i].label, textX, 0); + ctx.rotate(textRotation); + ctx.translate(-tX, -tY); + } - if(animationDecimal >= 1 && config.showTooltips) { - var points = [{x:width/2,y:height/2}], - pAmount = 50; - points.push({x:width/2+pieRadius*Math.cos(cumulativeAngle),y:height/2+pieRadius*Math.sin(cumulativeAngle)}); - for(var p = 0; p <= pAmount; p++) { - points.push({x:width/2+pieRadius*Math.cos(cumulativeAngle+p/pAmount*segmentAngle),y:height/2+pieRadius*Math.sin(cumulativeAngle+p/pAmount*segmentAngle)}); - } - registerTooltip(ctx,{type:'shape',points:points},{label:data[i].label,value:data[i].value},'Pie'); - } + if(animationDecimal >= 1 && config.showTooltips) { + var points = [{x:width/2,y:height/2}], + pAmount = 50; + points.push({x:width/2+pieRadius*Math.cos(cumulativeAngle),y:height/2+pieRadius*Math.sin(cumulativeAngle)}); + for(var p = 0; p <= pAmount; p++) { + points.push({x:width/2+pieRadius*Math.cos(cumulativeAngle+p/pAmount*segmentAngle),y:height/2+pieRadius*Math.sin(cumulativeAngle+p/pAmount*segmentAngle)}); + } + registerTooltip(ctx,{type:'shape',points:points},{label:data[i].label,value:data[i].value},'Pie'); + } - if(config.segmentShowStroke){ - ctx.lineWidth = config.segmentStrokeWidth; - ctx.strokeStyle = config.segmentStrokeColor; - ctx.stroke(); - } - cumulativeAngle += segmentAngle; - } - } - } + if(config.segmentShowStroke){ + ctx.lineWidth = config.segmentStrokeWidth; + ctx.strokeStyle = config.segmentStrokeColor; + ctx.stroke(); + } + cumulativeAngle += segmentAngle; + } + } + } - var Doughnut = function(data,config,ctx){ - var segmentTotal = 0; + 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; + //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); + var cutoutRadius = doughnutRadius * (config.percentageInnerCutout/100); - for (var i=0; i<data.length; i++){ - segmentTotal += data[i].value; - } + for (var i=0; i<data.length; i++){ + segmentTotal += data[i].value; + } - animationLoop(config,null,drawPieSegments,ctx); + 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(); + 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(animationDecimal >= 1 && config.showTooltips) { - var points = [], - pAmount = 50; - points.push({x:width/2+doughnutRadius*Math.cos(cumulativeAngle),y:height/2+doughnutRadius*Math.sin(cumulativeAngle)}); - for(var p = 0; p <= pAmount; p++) { - points.push({x:width/2+doughnutRadius*Math.cos(cumulativeAngle+p/pAmount*segmentAngle),y:height/2+doughnutRadius*Math.sin(cumulativeAngle+p/pAmount*segmentAngle)}); - } - points.push({x:width/2+cutoutRadius*Math.cos(cumulativeAngle+segmentAngle),y:height/2+cutoutRadius*Math.sin(cumulativeAngle+segmentAngle)}); - for(var p = pAmount; p >= 0; p--) { - points.push({x:width/2+cutoutRadius*Math.cos(cumulativeAngle+p/pAmount*segmentAngle),y:height/2+cutoutRadius*Math.sin(cumulativeAngle+p/pAmount*segmentAngle)}); - } - registerTooltip(ctx,{type:'shape',points:points},{label:data[i].label,value:data[i].value},'Doughnut'); - } + if(animationDecimal >= 1 && config.showTooltips) { + var points = [], + pAmount = 50; + points.push({x:width/2+doughnutRadius*Math.cos(cumulativeAngle),y:height/2+doughnutRadius*Math.sin(cumulativeAngle)}); + for(var p = 0; p <= pAmount; p++) { + points.push({x:width/2+doughnutRadius*Math.cos(cumulativeAngle+p/pAmount*segmentAngle),y:height/2+doughnutRadius*Math.sin(cumulativeAngle+p/pAmount*segmentAngle)}); + } + points.push({x:width/2+cutoutRadius*Math.cos(cumulativeAngle+segmentAngle),y:height/2+cutoutRadius*Math.sin(cumulativeAngle+segmentAngle)}); + for(var p = pAmount; p >= 0; p--) { + points.push({x:width/2+cutoutRadius*Math.cos(cumulativeAngle+p/pAmount*segmentAngle),y:height/2+cutoutRadius*Math.sin(cumulativeAngle+p/pAmount*segmentAngle)}); + } + registerTooltip(ctx,{type:'shape',points:points},{label:data[i].label,value:data[i].value},'Doughnut'); + } - if(config.segmentShowStroke){ - ctx.lineWidth = config.segmentStrokeWidth; - ctx.strokeStyle = config.segmentStrokeColor; - ctx.stroke(); - } - cumulativeAngle += segmentAngle; - } - } + 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; + var Line = function(data,config,ctx){ + var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString, valueHop,widestXLabel, xAxisLength,yAxisPosX,xAxisPosY, rotateLabels = 0; - calculateDrawingSizes(); + calculateDrawingSizes(); - valueBounds = getValueBounds(); - //Check and set the scale - labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : ""; - if (!config.scaleOverride){ + valueBounds = getValueBounds(); + //Check and set the scale + labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : ""; + if (!config.scaleOverride){ - calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString); - } - else { - calculatedScale = { - steps : config.scaleSteps, - stepValue : config.scaleStepWidth, - graphMin : config.scaleStartValue, - labels : [] - } - populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); - } + calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString); + } + else { + calculatedScale = { + steps : config.scaleSteps, + stepValue : config.scaleStepWidth, + graphMin : config.scaleStartValue, + labels : [] + } + populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); + } - scaleHop = Math.floor(scaleHeight/calculatedScale.steps); - calculateXAxisSize(); - animationLoop(config,drawScale,drawLines,ctx); + 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))) + 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)); - } - } - var pointRadius = config.pointDot ? config.pointDotRadius+config.pointDotStrokeWidth : 10; - for(var j = 0; j < data.datasets[i].data.length; j++) { - if(animPc >= 1 && config.showTooltips) { - // register tooltips - registerTooltip(ctx,{type:'circle',x:xPos(j),y:yPos(i,j),r:pointRadius},{label:data.labels[j],value:data.datasets[i].data[j]},'Line'); - } - } - 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(); - } - } - } + 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)); + } + } + var pointRadius = config.pointDot ? config.pointDotRadius+config.pointDotStrokeWidth : 10; + for(var j = 0; j < data.datasets[i].data.length; j++) { + if(animPc >= 1 && config.showTooltips) { + // register tooltips + registerTooltip(ctx,{type:'circle',x:xPos(j),y:yPos(i,j),r:pointRadius},{label:data.labels[j],value:data.datasets[i].data[j]},'Line'); + } + } + 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(); + 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(); - } + 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); - } + else{ + ctx.fillText(data.labels[i], yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize+3); + } - ctx.beginPath(); - ctx.moveTo(yAxisPosX + i * valueHop, xAxisPosY+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(); - } + //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(); + //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.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(); + ctx.stroke(); - if (config.scaleShowLabels){ - ctx.fillText(calculatedScale.labels[j],yAxisPosX-8,xAxisPosY - ((j+1) * scaleHop)); - } - } + 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)); + } + 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; + 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; - } + //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; + //Add a little padding between the x line and the text + maxSize -= 5; - labelHeight = config.scaleFontSize; + labelHeight = config.scaleFontSize; - maxSize -= labelHeight; - //Set 5 pixels greater than the font size to allow for a little padding from the X axis. + maxSize -= labelHeight; + //Set 5 pixels greater than the font size to allow for a little padding from the X axis. - scaleHeight = maxSize; + scaleHeight = maxSize; - //Then get the area above we can safely draw on. + //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] }; - } - }; + } + 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)); + 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 - }; + 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; + var Bar = function(data,config,ctx){ + var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString, valueHop,widestXLabel, xAxisLength,yAxisPosX,xAxisPosY,barWidth, rotateLabels = 0; - calculateDrawingSizes(); + calculateDrawingSizes(); - valueBounds = getValueBounds(); - //Check and set the scale - labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : ""; - if (!config.scaleOverride){ + valueBounds = getValueBounds(); + //Check and set the scale + labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : ""; + if (!config.scaleOverride){ - calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString); - } - else { - calculatedScale = { - steps : config.scaleSteps, - stepValue : config.scaleStepWidth, - graphMin : config.scaleStartValue, - labels : [] - } - populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); - } + calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString); + } + else { + calculatedScale = { + steps : config.scaleSteps, + stepValue : config.scaleStepWidth, + graphMin : config.scaleStartValue, + labels : [] + } + populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth); + } - scaleHop = Math.floor(scaleHeight/calculatedScale.steps); - calculateXAxisSize(); - animationLoop(config,drawScale,drawBars,ctx); + 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++){ - 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.fillStyle = cycleColor(data.datasets[i].fillColor, j); - ctx.strokeStyle = cycleColor(data.datasets[i].strokeColor, j); - 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 drawBars(animPc){ + ctx.lineWidth = config.barStrokeWidth; + for (var i=0; i<data.datasets.length; i++){ + 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.fillStyle = cycleColor(data.datasets[i].fillColor, j); + ctx.strokeStyle = cycleColor(data.datasets[i].strokeColor, j); + 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(); - if(animPc >= 1 && config.showTooltips) { - // register tooltips - var x = barOffset, - height = calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop), - y = xAxisPosY-height, - width = barWidth; - registerTooltip(ctx,{type:'rect',x:x,y:y,width:width,height:height},{label:data.labels[j],value:data.datasets[i].data[j]},'Bar'); - } - } - } + if(animPc >= 1 && config.showTooltips) { + // register tooltips + var x = barOffset, + height = calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop), + y = xAxisPosY-height, + width = barWidth; + registerTooltip(ctx,{type:'rect',x:x,y:y,width:width,height:height},{label:data.labels[j],value:data.datasets[i].data[j]},'Bar'); + } + } + } - } - 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(); + } + 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(); - } + 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); - } + 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); + 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(); - } + //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(); + //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.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)); - } - } + 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)); + } + 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; + 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; + 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; - } + //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; + //Add a little padding between the x line and the text + maxSize -= 5; - labelHeight = config.scaleFontSize; + labelHeight = config.scaleFontSize; - maxSize -= labelHeight; - //Set 5 pixels greater than the font size to allow for a little padding from the X axis. + maxSize -= labelHeight; + //Set 5 pixels greater than the font size to allow for a little padding from the X axis. - scaleHeight = maxSize; + scaleHeight = maxSize; - //Then get the area above we can safely draw on. + //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] }; - } - }; + } + 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)); + 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 - }; + 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 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; + 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(){}; + if (typeof drawScale !== "function") drawScale = function(){}; - requestAnimFrame(animLoop); + 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(); - } + 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. + //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); - }; - })(); + // 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); + 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); - } - } + //Compare number of steps to the max and min for that size graph, and add in half steps if need be. + while(numberOfSteps < minSteps || numberOfSteps > maxSteps) { + if (numberOfSteps < minSteps){ + stepValue /= 2; + numberOfSteps = Math.round(graphRange/stepValue); + } + else{ + stepValue *=2; + numberOfSteps = Math.round(graphRange/stepValue); + } + } - var labels = []; - populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue); + var labels = []; + populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue); - return { - steps : numberOfSteps, - stepValue : stepValue, - graphMin : graphMin, - labels : labels - } + return { + steps : numberOfSteps, + stepValue : stepValue, + graphMin : graphMin, + labels : labels + } - function calculateOrderOfMagnitude(val){ - return Math.floor(Math.log(val) / Math.LN10); - } - } + function calculateOrderOfMagnitude(val){ + return Math.floor(Math.log(val) / Math.LN10); + } + } - //Populate an array of all the labels by interpolating the string. - function populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue) { - if (labelTemplateString) { - //Fix floating point errors by setting to fixed the on the same decimal as the stepValue. - for (var i = 1; i < numberOfSteps + 1; i++) { - labels.push(tmpl(labelTemplateString, {value: (graphMin + (stepValue * i)).toFixed(getDecimalPlaces(stepValue))})); - } - } - } - // Cycle a given array of colours (for multi coloured bars in bargraphs) - function cycleColor(colors, i) { + //Populate an array of all the labels by interpolating the string. + function populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue) { + if (labelTemplateString) { + //Fix floating point errors by setting to fixed the on the same decimal as the stepValue. + for (var i = 1; i < numberOfSteps + 1; i++) { + labels.push(tmpl(labelTemplateString, {value: (graphMin + (stepValue * i)).toFixed(getDecimalPlaces(stepValue))})); + } + } + } + // Cycle a given array of colours (for multi coloured bars in bargraphs) + function cycleColor(colors, i) { return (colors && colors.constructor.name == "Array") ? colors[i % colors.length] : colors; } - //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; - } + //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) { - if(typeof(userDefined[attrname]) === "object" && defaults[attrname]) { - returnObj[attrname] = mergeChartConfig(defaults[attrname], userDefined[attrname]); - } else { - returnObj[attrname] = userDefined[attrname]; - } - } - return returnObj; - } + function mergeChartConfig(defaults,userDefined){ + var returnObj = {}; + for (var attrname in defaults) { returnObj[attrname] = defaults[attrname]; } + for (var attrname in userDefined) { + if(typeof(userDefined[attrname]) === "object" && defaults[attrname]) { + returnObj[attrname] = mergeChartConfig(defaults[attrname], userDefined[attrname]); + } else { + returnObj[attrname] = userDefined[attrname]; + } + } + return returnObj; + } - //Javascript micro templating by John Resig - source at http://ejohn.org/blog/javascript-micro-templating/ - var cache = {}; + //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) : + 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);};" + + // 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('" + + // 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('');"); + // 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; - }; + // Provide some basic currying to the user + return data ? fn( data ) : fn; + }; - function getFadeColor(percent, primColor, secColor) { - var pseudoEl = document.createElement('div'), - rgbPrim, - rgbSec; - pseudoEl.style.color = primColor; - document.body.appendChild(pseudoEl); - rgbPrim = window.getComputedStyle(pseudoEl).color; - pseudoEl.style.color = secColor; - rgbSec = window.getComputedStyle(pseudoEl).color; - var regex = /rgb *\( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *\)/, - valuesP = regex.exec(rgbPrim), - valuesS = regex.exec(rgbSec), - rP = Math.round(parseFloat(valuesP[1])), - gP = Math.round(parseFloat(valuesP[2])), - bP = Math.round(parseFloat(valuesP[3])), - rS = Math.round(parseFloat(valuesS[1])), - gS = Math.round(parseFloat(valuesS[2])), - bS = Math.round(parseFloat(valuesS[3])), - rCur = parseInt((rP-rS)*percent+rS), - gCur = parseInt((gP-gS)*percent+gS), - bCur = parseInt((bP-bS)*percent+bS); - pseudoEl.parentNode.removeChild(pseudoEl); - return "rgb("+rCur+','+gCur+','+bCur+')'; - } + function getFadeColor(percent, primColor, secColor) { + var pseudoEl = document.createElement('div'), + rgbPrim, + rgbSec; + pseudoEl.style.color = primColor; + document.body.appendChild(pseudoEl); + rgbPrim = window.getComputedStyle(pseudoEl).color; + pseudoEl.style.color = secColor; + rgbSec = window.getComputedStyle(pseudoEl).color; + var regex = /rgb *\( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *\)/, + valuesP = regex.exec(rgbPrim), + valuesS = regex.exec(rgbSec), + rP = Math.round(parseFloat(valuesP[1])), + gP = Math.round(parseFloat(valuesP[2])), + bP = Math.round(parseFloat(valuesP[3])), + rS = Math.round(parseFloat(valuesS[1])), + gS = Math.round(parseFloat(valuesS[2])), + bS = Math.round(parseFloat(valuesS[3])), + rCur = parseInt((rP-rS)*percent+rS), + gCur = parseInt((gP-gS)*percent+gS), + bCur = parseInt((bP-bS)*percent+bS); + pseudoEl.parentNode.removeChild(pseudoEl); + return "rgb("+rCur+','+gCur+','+bCur+')'; + } } \ No newline at end of file