mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-11-18 09:04:35 +01:00
1427 lines
44 KiB
JavaScript
1427 lines
44 KiB
JavaScript
|
/*!
|
||
|
|
* Chart.js
|
||
|
|
* http://chartjs.org/
|
||
|
|
*
|
||
|
|
* Copyright 2013 Nick Downie
|
||
|
|
* Released under the MIT license
|
||
|
|
* https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
|
||
|
|
*/
|
||
|
|
|
||
|
|
//Define the global Chart Variable as a class.
|
||
|
|
window.Chart = function(context){
|
||
|
|
|
||
|
|
var chart = this;
|
||
|
|
|
||
|
|
|
||
|
|
//Easing functions adapted from Robert Penner's easing equations
|
||
|
|
//http://www.robertpenner.com/easing/
|
||
|
|
|
||
|
|
var animationOptions = {
|
||
|
|
linear : function (t){
|
||
|
|
return t;
|
||
|
|
},
|
||
|
|
easeInQuad: function (t) {
|
||
|
|
return t*t;
|
||
|
|
},
|
||
|
|
easeOutQuad: function (t) {
|
||
|
|
return -1 *t*(t-2);
|
||
|
|
},
|
||
|
|
easeInOutQuad: function (t) {
|
||
|
|
if ((t/=1/2) < 1) return 1/2*t*t;
|
||
|
|
return -1/2 * ((--t)*(t-2) - 1);
|
||
|
|
},
|
||
|
|
easeInCubic: function (t) {
|
||
|
|
return t*t*t;
|
||
|
|
},
|
||
|
|
easeOutCubic: function (t) {
|
||
|
|
return 1*((t=t/1-1)*t*t + 1);
|
||
|
|
},
|
||
|
|
easeInOutCubic: function (t) {
|
||
|
|
if ((t/=1/2) < 1) return 1/2*t*t*t;
|
||
|
|
return 1/2*((t-=2)*t*t + 2);
|
||
|
|
},
|
||
|
|
easeInQuart: function (t) {
|
||
|
|
return t*t*t*t;
|
||
|
|
},
|
||
|
|
easeOutQuart: function (t) {
|
||
|
|
return -1 * ((t=t/1-1)*t*t*t - 1);
|
||
|
|
},
|
||
|
|
easeInOutQuart: function (t) {
|
||
|
|
if ((t/=1/2) < 1) return 1/2*t*t*t*t;
|
||
|
|
return -1/2 * ((t-=2)*t*t*t - 2);
|
||
|
|
},
|
||
|
|
easeInQuint: function (t) {
|
||
|
|
return 1*(t/=1)*t*t*t*t;
|
||
|
|
},
|
||
|
|
easeOutQuint: function (t) {
|
||
|
|
return 1*((t=t/1-1)*t*t*t*t + 1);
|
||
|
|
},
|
||
|
|
easeInOutQuint: function (t) {
|
||
|
|
if ((t/=1/2) < 1) return 1/2*t*t*t*t*t;
|
||
|
|
return 1/2*((t-=2)*t*t*t*t + 2);
|
||
|
|
},
|
||
|
|
easeInSine: function (t) {
|
||
|
|
return -1 * Math.cos(t/1 * (Math.PI/2)) + 1;
|
||
|
|
},
|
||
|
|
easeOutSine: function (t) {
|
||
|
|
return 1 * Math.sin(t/1 * (Math.PI/2));
|
||
|
|
},
|
||
|
|
easeInOutSine: function (t) {
|
||
|
|
return -1/2 * (Math.cos(Math.PI*t/1) - 1);
|
||
|
|
},
|
||
|
|
easeInExpo: function (t) {
|
||
|
|
return (t==0) ? 1 : 1 * Math.pow(2, 10 * (t/1 - 1));
|
||
|
|
},
|
||
|
|
easeOutExpo: function (t) {
|
||
|
|
return (t==1) ? 1 : 1 * (-Math.pow(2, -10 * t/1) + 1);
|
||
|
|
},
|
||
|
|
easeInOutExpo: function (t) {
|
||
|
|
if (t==0) return 0;
|
||
|
|
if (t==1) return 1;
|
||
|
|
if ((t/=1/2) < 1) return 1/2 * Math.pow(2, 10 * (t - 1));
|
||
|
|
return 1/2 * (-Math.pow(2, -10 * --t) + 2);
|
||
|
|
},
|
||
|
|
easeInCirc: function (t) {
|
||
|
|
if (t>=1) return t;
|
||
|
|
return -1 * (Math.sqrt(1 - (t/=1)*t) - 1);
|
||
|
|
},
|
||
|
|
easeOutCirc: function (t) {
|
||
|
|
return 1 * Math.sqrt(1 - (t=t/1-1)*t);
|
||
|
|
},
|
||
|
|
easeInOutCirc: function (t) {
|
||
|
|
if ((t/=1/2) < 1) return -1/2 * (Math.sqrt(1 - t*t) - 1);
|
||
|
|
return 1/2 * (Math.sqrt(1 - (t-=2)*t) + 1);
|
||
|
|
},
|
||
|
|
easeInElastic: function (t) {
|
||
|
|
var s=1.70158;var p=0;var a=1;
|
||
|
|
if (t==0) return 0; if ((t/=1)==1) return 1; if (!p) p=1*.3;
|
||
|
|
if (a < Math.abs(1)) { a=1; var s=p/4; }
|
||
|
|
else var s = p/(2*Math.PI) * Math.asin (1/a);
|
||
|
|
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*1-s)*(2*Math.PI)/p ));
|
||
|
|
},
|
||
|
|
easeOutElastic: function (t) {
|
||
|
|
var s=1.70158;var p=0;var a=1;
|
||
|
|
if (t==0) return 0; if ((t/=1)==1) return 1; if (!p) p=1*.3;
|
||
|
|
if (a < Math.abs(1)) { a=1; var s=p/4; }
|
||
|
|
else var s = p/(2*Math.PI) * Math.asin (1/a);
|
||
|
|
return a*Math.pow(2,-10*t) * Math.sin( (t*1-s)*(2*Math.PI)/p ) + 1;
|
||
|
|
},
|
||
|
|
easeInOutElastic: function (t) {
|
||
|
|
var s=1.70158;var p=0;var a=1;
|
||
|
|
if (t==0) return 0; if ((t/=1/2)==2) return 1; if (!p) p=1*(.3*1.5);
|
||
|
|
if (a < Math.abs(1)) { a=1; var s=p/4; }
|
||
|
|
else var s = p/(2*Math.PI) * Math.asin (1/a);
|
||
|
|
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*1-s)*(2*Math.PI)/p ));
|
||
|
|
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*1-s)*(2*Math.PI)/p )*.5 + 1;
|
||
|
|
},
|
||
|
|
easeInBack: function (t) {
|
||
|
|
var s = 1.70158;
|
||
|
|
return 1*(t/=1)*t*((s+1)*t - s);
|
||
|
|
},
|
||
|
|
easeOutBack: function (t) {
|
||
|
|
var s = 1.70158;
|
||
|
|
return 1*((t=t/1-1)*t*((s+1)*t + s) + 1);
|
||
|
|
},
|
||
|
|
easeInOutBack: function (t) {
|
||
|
|
var s = 1.70158;
|
||
|
|
if ((t/=1/2) < 1) return 1/2*(t*t*(((s*=(1.525))+1)*t - s));
|
||
|
|
return 1/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2);
|
||
|
|
},
|
||
|
|
easeInBounce: function (t) {
|
||
|
|
return 1 - animationOptions.easeOutBounce (1-t);
|
||
|
|
},
|
||
|
|
easeOutBounce: function (t) {
|
||
|
|
if ((t/=1) < (1/2.75)) {
|
||
|
|
return 1*(7.5625*t*t);
|
||
|
|
} else if (t < (2/2.75)) {
|
||
|
|
return 1*(7.5625*(t-=(1.5/2.75))*t + .75);
|
||
|
|
} else if (t < (2.5/2.75)) {
|
||
|
|
return 1*(7.5625*(t-=(2.25/2.75))*t + .9375);
|
||
|
|
} else {
|
||
|
|
return 1*(7.5625*(t-=(2.625/2.75))*t + .984375);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
easeInOutBounce: function (t) {
|
||
|
|
if (t < 1/2) return animationOptions.easeInBounce (t*2) * .5;
|
||
|
|
return animationOptions.easeOutBounce (t*2-1) * .5 + 1*.5;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
//Variables global to the chart
|
||
|
|
var width = context.canvas.width;
|
||
|
|
var height = context.canvas.height;
|
||
|
|
|
||
|
|
|
||
|
|
//High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
|
||
|
|
if (window.devicePixelRatio) {
|
||
|
|
context.canvas.style.width = width + "px";
|
||
|
|
context.canvas.style.height = height + "px";
|
||
|
|
context.canvas.height = height * window.devicePixelRatio;
|
||
|
|
context.canvas.width = width * window.devicePixelRatio;
|
||
|
|
context.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.PolarArea = function(data,options){
|
||
|
|
|
||
|
|
chart.PolarArea.defaults = {
|
||
|
|
scaleOverlay : true,
|
||
|
|
scaleOverride : false,
|
||
|
|
scaleSteps : null,
|
||
|
|
scaleStepWidth : null,
|
||
|
|
scaleStartValue : null,
|
||
|
|
scaleShowLine : true,
|
||
|
|
scaleLineColor : "rgba(0,0,0,.1)",
|
||
|
|
scaleLineWidth : 1,
|
||
|
|
scaleShowLabels : true,
|
||
|
|
scaleLabel : "<%=value%>",
|
||
|
|
scaleFontFamily : "'Arial'",
|
||
|
|
scaleFontSize : 12,
|
||
|
|
scaleFontStyle : "normal",
|
||
|
|
scaleFontColor : "#666",
|
||
|
|
scaleShowLabelBackdrop : true,
|
||
|
|
scaleBackdropColor : "rgba(255,255,255,0.75)",
|
||
|
|
scaleBackdropPaddingY : 2,
|
||
|
|
scaleBackdropPaddingX : 2,
|
||
|
|
segmentShowStroke : true,
|
||
|
|
segmentStrokeColor : "#fff",
|
||
|
|
segmentStrokeWidth : 2,
|
||
|
|
animation : true,
|
||
|
|
animationSteps : 100,
|
||
|
|
animationEasing : "easeOutBounce",
|
||
|
|
animateRotate : true,
|
||
|
|
animateScale : false,
|
||
|
|
onAnimationComplete : null
|
||
|
|
};
|
||
|
|
|
||
|
|
var config = (options)? mergeChartConfig(chart.PolarArea.defaults,options) : chart.PolarArea.defaults;
|
||
|
|
|
||
|
|
return new PolarArea(data,config,context);
|
||
|
|
};
|
||
|
|
|
||
|
|
this.Radar = function(data,options){
|
||
|
|
|
||
|
|
chart.Radar.defaults = {
|
||
|
|
scaleOverlay : false,
|
||
|
|
scaleOverride : false,
|
||
|
|
scaleSteps : null,
|
||
|
|
scaleStepWidth : null,
|
||
|
|
scaleStartValue : null,
|
||
|
|
scaleShowLine : true,
|
||
|
|
scaleLineColor : "rgba(0,0,0,.1)",
|
||
|
|
scaleLineWidth : 1,
|
||
|
|
scaleShowLabels : false,
|
||
|
|
scaleLabel : "<%=value%>",
|
||
|
|
scaleFontFamily : "'Arial'",
|
||
|
|
scaleFontSize : 12,
|
||
|
|
scaleFontStyle : "normal",
|
||
|
|
scaleFontColor : "#666",
|
||
|
|
scaleShowLabelBackdrop : true,
|
||
|
|
scaleBackdropColor : "rgba(255,255,255,0.75)",
|
||
|
|
scaleBackdropPaddingY : 2,
|
||
|
|
scaleBackdropPaddingX : 2,
|
||
|
|
angleShowLineOut : true,
|
||
|
|
angleLineColor : "rgba(0,0,0,.1)",
|
||
|
|
angleLineWidth : 1,
|
||
|
|
pointLabelFontFamily : "'Arial'",
|
||
|
|
pointLabelFontStyle : "normal",
|
||
|
|
pointLabelFontSize : 12,
|
||
|
|
pointLabelFontColor : "#666",
|
||
|
|
pointDot : true,
|
||
|
|
pointDotRadius : 3,
|
||
|
|
pointDotStrokeWidth : 1,
|
||
|
|
datasetStroke : true,
|
||
|
|
datasetStrokeWidth : 2,
|
||
|
|
datasetFill : true,
|
||
|
|
animation : true,
|
||
|
|
animationSteps : 60,
|
||
|
|
animationEasing : "easeOutQuart",
|
||
|
|
onAnimationComplete : null
|
||
|
|
};
|
||
|
|
|
||
|
|
var config = (options)? mergeChartConfig(chart.Radar.defaults,options) : chart.Radar.defaults;
|
||
|
|
|
||
|
|
return new Radar(data,config,context);
|
||
|
|
};
|
||
|
|
|
||
|
|
this.Pie = function(data,options){
|
||
|
|
chart.Pie.defaults = {
|
||
|
|
segmentShowStroke : true,
|
||
|
|
segmentStrokeColor : "#fff",
|
||
|
|
segmentStrokeWidth : 2,
|
||
|
|
animation : true,
|
||
|
|
animationSteps : 100,
|
||
|
|
animationEasing : "easeOutBounce",
|
||
|
|
animateRotate : true,
|
||
|
|
animateScale : false,
|
||
|
|
onAnimationComplete : null
|
||
|
|
};
|
||
|
|
|
||
|
|
var config = (options)? mergeChartConfig(chart.Pie.defaults,options) : chart.Pie.defaults;
|
||
|
|
|
||
|
|
return new Pie(data,config,context);
|
||
|
|
};
|
||
|
|
|
||
|
|
this.Doughnut = function(data,options){
|
||
|
|
|
||
|
|
chart.Doughnut.defaults = {
|
||
|
|
segmentShowStroke : true,
|
||
|
|
segmentStrokeColor : "#fff",
|
||
|
|
segmentStrokeWidth : 2,
|
||
|
|
percentageInnerCutout : 50,
|
||
|
|
animation : true,
|
||
|
|
animationSteps : 100,
|
||
|
|
animationEasing : "easeOutBounce",
|
||
|
|
animateRotate : true,
|
||
|
|
animateScale : false,
|
||
|
|
onAnimationComplete : null
|
||
|
|
};
|
||
|
|
|
||
|
|
var config = (options)? mergeChartConfig(chart.Doughnut.defaults,options) : chart.Doughnut.defaults;
|
||
|
|
|
||
|
|
return new Doughnut(data,config,context);
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
this.Line = function(data,options){
|
||
|
|
|
||
|
|
chart.Line.defaults = {
|
||
|
|
scaleOverlay : false,
|
||
|
|
scaleOverride : false,
|
||
|
|
scaleSteps : null,
|
||
|
|
scaleStepWidth : null,
|
||
|
|
scaleStartValue : null,
|
||
|
|
scaleLineColor : "rgba(0,0,0,.1)",
|
||
|
|
scaleLineWidth : 1,
|
||
|
|
scaleShowLabels : true,
|
||
|
|
scaleLabel : "<%=value%>",
|
||
|
|
scaleFontFamily : "'Arial'",
|
||
|
|
scaleFontSize : 12,
|
||
|
|
scaleFontStyle : "normal",
|
||
|
|
scaleFontColor : "#666",
|
||
|
|
scaleShowGridLines : true,
|
||
|
|
scaleGridLineColor : "rgba(0,0,0,.05)",
|
||
|
|
scaleGridLineWidth : 1,
|
||
|
|
bezierCurve : true,
|
||
|
|
pointDot : true,
|
||
|
|
pointDotRadius : 4,
|
||
|
|
pointDotStrokeWidth : 2,
|
||
|
|
datasetStroke : true,
|
||
|
|
datasetStrokeWidth : 2,
|
||
|
|
datasetFill : true,
|
||
|
|
animation : true,
|
||
|
|
animationSteps : 60,
|
||
|
|
animationEasing : "easeOutQuart",
|
||
|
|
onAnimationComplete : null
|
||
|
|
};
|
||
|
|
var config = (options) ? mergeChartConfig(chart.Line.defaults,options) : chart.Line.defaults;
|
||
|
|
|
||
|
|
return new Line(data,config,context);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.Bar = function(data,options){
|
||
|
|
chart.Bar.defaults = {
|
||
|
|
scaleOverlay : false,
|
||
|
|
scaleOverride : false,
|
||
|
|
scaleSteps : null,
|
||
|
|
scaleStepWidth : null,
|
||
|
|
scaleStartValue : null,
|
||
|
|
scaleLineColor : "rgba(0,0,0,.1)",
|
||
|
|
scaleLineWidth : 1,
|
||
|
|
scaleShowLabels : true,
|
||
|
|
scaleLabel : "<%=value%>",
|
||
|
|
scaleFontFamily : "'Arial'",
|
||
|
|
scaleFontSize : 12,
|
||
|
|
scaleFontStyle : "normal",
|
||
|
|
scaleFontColor : "#666",
|
||
|
|
scaleShowGridLines : true,
|
||
|
|
scaleGridLineColor : "rgba(0,0,0,.05)",
|
||
|
|
scaleGridLineWidth : 1,
|
||
|
|
barShowStroke : true,
|
||
|
|
barStrokeWidth : 2,
|
||
|
|
barValueSpacing : 5,
|
||
|
|
barDatasetSpacing : 1,
|
||
|
|
animation : true,
|
||
|
|
animationSteps : 60,
|
||
|
|
animationEasing : "easeOutQuart",
|
||
|
|
onAnimationComplete : null
|
||
|
|
};
|
||
|
|
var config = (options) ? mergeChartConfig(chart.Bar.defaults,options) : chart.Bar.defaults;
|
||
|
|
|
||
|
|
return new Bar(data,config,context);
|
||
|
|
}
|
||
|
|
|
||
|
|
var clear = function(c){
|
||
|
|
c.clearRect(0, 0, width, height);
|
||
|
|
};
|
||
|
|
|
||
|
|
var PolarArea = function(data,config,ctx){
|
||
|
|
var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString;
|
||
|
|
|
||
|
|
|
||
|
|
calculateDrawingSizes();
|
||
|
|
|
||
|
|
valueBounds = getValueBounds();
|
||
|
|
|
||
|
|
labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : null;
|
||
|
|
|
||
|
|
//Check and set the scale
|
||
|
|
if (!config.scaleOverride){
|
||
|
|
|
||
|
|
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
calculatedScale = {
|
||
|
|
steps : config.scaleSteps,
|
||
|
|
stepValue : config.scaleStepWidth,
|
||
|
|
graphMin : config.scaleStartValue,
|
||
|
|
labels : []
|
||
|
|
}
|
||
|
|
populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth);
|
||
|
|
}
|
||
|
|
|
||
|
|
scaleHop = maxSize/(calculatedScale.steps);
|
||
|
|
|
||
|
|
//Wrap in an animation loop wrapper
|
||
|
|
animationLoop(config,drawScale,drawAllSegments,ctx);
|
||
|
|
|
||
|
|
function calculateDrawingSizes(){
|
||
|
|
maxSize = (Min([width,height])/2);
|
||
|
|
//Remove whatever is larger - the font size or line width.
|
||
|
|
|
||
|
|
maxSize -= Max([config.scaleFontSize*0.5,config.scaleLineWidth*0.5]);
|
||
|
|
|
||
|
|
labelHeight = config.scaleFontSize*2;
|
||
|
|
//If we're drawing the backdrop - add the Y padding to the label height and remove from drawing region.
|
||
|
|
if (config.scaleShowLabelBackdrop){
|
||
|
|
labelHeight += (2 * config.scaleBackdropPaddingY);
|
||
|
|
maxSize -= config.scaleBackdropPaddingY*1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
scaleHeight = maxSize;
|
||
|
|
//If the label height is less than 5, set it to 5 so we don't have lines on top of each other.
|
||
|
|
labelHeight = Default(labelHeight,5);
|
||
|
|
}
|
||
|
|
function drawScale(){
|
||
|
|
for (var i=0; i<calculatedScale.steps; i++){
|
||
|
|
//If the line object is there
|
||
|
|
if (config.scaleShowLine){
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(width/2, height/2, scaleHop * (i + 1), 0, (Math.PI * 2), true);
|
||
|
|
ctx.strokeStyle = config.scaleLineColor;
|
||
|
|
ctx.lineWidth = config.scaleLineWidth;
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (config.scaleShowLabels){
|
||
|
|
ctx.textAlign = "center";
|
||
|
|
ctx.font = config.scaleFontStyle + " " + config.scaleFontSize + "px " + config.scaleFontFamily;
|
||
|
|
var label = calculatedScale.labels[i];
|
||
|
|
//If the backdrop object is within the font object
|
||
|
|
if (config.scaleShowLabelBackdrop){
|
||
|
|
var textWidth = ctx.measureText(label).width;
|
||
|
|
ctx.fillStyle = config.scaleBackdropColor;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.rect(
|
||
|
|
Math.round(width/2 - textWidth/2 - config.scaleBackdropPaddingX), //X
|
||
|
|
Math.round(height/2 - (scaleHop * (i + 1)) - config.scaleFontSize*0.5 - config.scaleBackdropPaddingY),//Y
|
||
|
|
Math.round(textWidth + (config.scaleBackdropPaddingX*2)), //Width
|
||
|
|
Math.round(config.scaleFontSize + (config.scaleBackdropPaddingY*2)) //Height
|
||
|
|
);
|
||
|
|
ctx.fill();
|
||
|
|
}
|
||
|
|
ctx.textBaseline = "middle";
|
||
|
|
ctx.fillStyle = config.scaleFontColor;
|
||
|
|
ctx.fillText(label,width/2,height/2 - (scaleHop * (i + 1)));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function drawAllSegments(animationDecimal){
|
||
|
|
var startAngle = -Math.PI/2,
|
||
|
|
angleStep = (Math.PI*2)/data.length,
|
||
|
|
scaleAnimation = 1,
|
||
|
|
rotateAnimation = 1;
|
||
|
|
if (config.animation) {
|
||
|
|
if (config.animateScale) {
|
||
|
|
scaleAnimation = animationDecimal;
|
||
|
|
}
|
||
|
|
if (config.animateRotate){
|
||
|
|
rotateAnimation = animationDecimal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i=0; i<data.length; i++){
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(width/2,height/2,scaleAnimation * calculateOffset(data[i].value,calculatedScale,scaleHop),startAngle, startAngle + rotateAnimation*angleStep, false);
|
||
|
|
ctx.lineTo(width/2,height/2);
|
||
|
|
ctx.closePath();
|
||
|
|
ctx.fillStyle = data[i].color;
|
||
|
|
ctx.fill();
|
||
|
|
|
||
|
|
if(config.segmentShowStroke){
|
||
|
|
ctx.strokeStyle = config.segmentStrokeColor;
|
||
|
|
ctx.lineWidth = config.segmentStrokeWidth;
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
startAngle += rotateAnimation*angleStep;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function getValueBounds() {
|
||
|
|
var upperValue = Number.MIN_VALUE;
|
||
|
|
var lowerValue = Number.MAX_VALUE;
|
||
|
|
for (var i=0; i<data.length; i++){
|
||
|
|
if (data[i].value > upperValue) {upperValue = data[i].value;}
|
||
|
|
if (data[i].value < lowerValue) {lowerValue = data[i].value;}
|
||
|
|
};
|
||
|
|
|
||
|
|
var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66)));
|
||
|
|
var minSteps = Math.floor((scaleHeight / labelHeight*0.5));
|
||
|
|
|
||
|
|
return {
|
||
|
|
maxValue : upperValue,
|
||
|
|
minValue : lowerValue,
|
||
|
|
maxSteps : maxSteps,
|
||
|
|
minSteps : minSteps
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var Radar = function (data,config,ctx) {
|
||
|
|
var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString;
|
||
|
|
|
||
|
|
//If no labels are defined set to an empty array, so referencing length for looping doesn't blow up.
|
||
|
|
if (!data.labels) data.labels = [];
|
||
|
|
|
||
|
|
calculateDrawingSizes();
|
||
|
|
|
||
|
|
var valueBounds = getValueBounds();
|
||
|
|
|
||
|
|
labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : null;
|
||
|
|
|
||
|
|
//Check and set the scale
|
||
|
|
if (!config.scaleOverride){
|
||
|
|
|
||
|
|
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
calculatedScale = {
|
||
|
|
steps : config.scaleSteps,
|
||
|
|
stepValue : config.scaleStepWidth,
|
||
|
|
graphMin : config.scaleStartValue,
|
||
|
|
labels : []
|
||
|
|
}
|
||
|
|
populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth);
|
||
|
|
}
|
||
|
|
|
||
|
|
scaleHop = maxSize/(calculatedScale.steps);
|
||
|
|
|
||
|
|
animationLoop(config,drawScale,drawAllDataPoints,ctx);
|
||
|
|
|
||
|
|
//Radar specific functions.
|
||
|
|
function drawAllDataPoints(animationDecimal){
|
||
|
|
var rotationDegree = (2*Math.PI)/data.datasets[0].data.length;
|
||
|
|
|
||
|
|
ctx.save();
|
||
|
|
//translate to the centre of the canvas.
|
||
|
|
ctx.translate(width/2,height/2);
|
||
|
|
|
||
|
|
//We accept multiple data sets for radar charts, so show loop through each set
|
||
|
|
for (var i=0; i<data.datasets.length; i++){
|
||
|
|
ctx.beginPath();
|
||
|
|
|
||
|
|
ctx.moveTo(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[0],calculatedScale,scaleHop)));
|
||
|
|
for (var j=1; j<data.datasets[i].data.length; j++){
|
||
|
|
ctx.rotate(rotationDegree);
|
||
|
|
ctx.lineTo(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop)));
|
||
|
|
|
||
|
|
}
|
||
|
|
ctx.closePath();
|
||
|
|
|
||
|
|
|
||
|
|
ctx.fillStyle = data.datasets[i].fillColor;
|
||
|
|
ctx.strokeStyle = data.datasets[i].strokeColor;
|
||
|
|
ctx.lineWidth = config.datasetStrokeWidth;
|
||
|
|
ctx.fill();
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
|
||
|
|
if (config.pointDot){
|
||
|
|
ctx.fillStyle = data.datasets[i].pointColor;
|
||
|
|
ctx.strokeStyle = data.datasets[i].pointStrokeColor;
|
||
|
|
ctx.lineWidth = config.pointDotStrokeWidth;
|
||
|
|
for (var k=0; k<data.datasets[i].data.length; k++){
|
||
|
|
ctx.rotate(rotationDegree);
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(0,animationDecimal*(-1*calculateOffset(data.datasets[i].data[k],calculatedScale,scaleHop)),config.pointDotRadius,2*Math.PI,false);
|
||
|
|
ctx.fill();
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
ctx.rotate(rotationDegree);
|
||
|
|
|
||
|
|
}
|
||
|
|
ctx.restore();
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
function drawScale(){
|
||
|
|
var rotationDegree = (2*Math.PI)/data.datasets[0].data.length;
|
||
|
|
ctx.save();
|
||
|
|
ctx.translate(width / 2, height / 2);
|
||
|
|
|
||
|
|
if (config.angleShowLineOut){
|
||
|
|
ctx.strokeStyle = config.angleLineColor;
|
||
|
|
ctx.lineWidth = config.angleLineWidth;
|
||
|
|
for (var h=0; h<data.datasets[0].data.length; h++){
|
||
|
|
|
||
|
|
ctx.rotate(rotationDegree);
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(0,0);
|
||
|
|
ctx.lineTo(0,-maxSize);
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i=0; i<calculatedScale.steps; i++){
|
||
|
|
ctx.beginPath();
|
||
|
|
|
||
|
|
if(config.scaleShowLine){
|
||
|
|
ctx.strokeStyle = config.scaleLineColor;
|
||
|
|
ctx.lineWidth = config.scaleLineWidth;
|
||
|
|
ctx.moveTo(0,-scaleHop * (i+1));
|
||
|
|
for (var j=0; j<data.datasets[0].data.length; j++){
|
||
|
|
ctx.rotate(rotationDegree);
|
||
|
|
ctx.lineTo(0,-scaleHop * (i+1));
|
||
|
|
}
|
||
|
|
ctx.closePath();
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if (config.scaleShowLabels){
|
||
|
|
ctx.textAlign = 'center';
|
||
|
|
ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily;
|
||
|
|
ctx.textBaseline = "middle";
|
||
|
|
|
||
|
|
if (config.scaleShowLabelBackdrop){
|
||
|
|
var textWidth = ctx.measureText(calculatedScale.labels[i]).width;
|
||
|
|
ctx.fillStyle = config.scaleBackdropColor;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.rect(
|
||
|
|
Math.round(- textWidth/2 - config.scaleBackdropPaddingX), //X
|
||
|
|
Math.round((-scaleHop * (i + 1)) - config.scaleFontSize*0.5 - config.scaleBackdropPaddingY),//Y
|
||
|
|
Math.round(textWidth + (config.scaleBackdropPaddingX*2)), //Width
|
||
|
|
Math.round(config.scaleFontSize + (config.scaleBackdropPaddingY*2)) //Height
|
||
|
|
);
|
||
|
|
ctx.fill();
|
||
|
|
}
|
||
|
|
ctx.fillStyle = config.scaleFontColor;
|
||
|
|
ctx.fillText(calculatedScale.labels[i],0,-scaleHop*(i+1));
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
for (var k=0; k<data.labels.length; k++){
|
||
|
|
ctx.font = config.pointLabelFontStyle + " " + config.pointLabelFontSize+"px " + config.pointLabelFontFamily;
|
||
|
|
ctx.fillStyle = config.pointLabelFontColor;
|
||
|
|
var opposite = Math.sin(rotationDegree*k) * (maxSize + config.pointLabelFontSize);
|
||
|
|
var adjacent = Math.cos(rotationDegree*k) * (maxSize + config.pointLabelFontSize);
|
||
|
|
|
||
|
|
if(rotationDegree*k == Math.PI || rotationDegree*k == 0){
|
||
|
|
ctx.textAlign = "center";
|
||
|
|
}
|
||
|
|
else if(rotationDegree*k > Math.PI){
|
||
|
|
ctx.textAlign = "right";
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
ctx.textAlign = "left";
|
||
|
|
}
|
||
|
|
|
||
|
|
ctx.textBaseline = "middle";
|
||
|
|
|
||
|
|
ctx.fillText(data.labels[k],opposite,-adjacent);
|
||
|
|
|
||
|
|
}
|
||
|
|
ctx.restore();
|
||
|
|
};
|
||
|
|
function calculateDrawingSizes(){
|
||
|
|
maxSize = (Min([width,height])/2);
|
||
|
|
|
||
|
|
labelHeight = config.scaleFontSize*2;
|
||
|
|
|
||
|
|
var labelLength = 0;
|
||
|
|
for (var i=0; i<data.labels.length; i++){
|
||
|
|
ctx.font = config.pointLabelFontStyle + " " + config.pointLabelFontSize+"px " + config.pointLabelFontFamily;
|
||
|
|
var textMeasurement = ctx.measureText(data.labels[i]).width;
|
||
|
|
if(textMeasurement>labelLength) labelLength = textMeasurement;
|
||
|
|
}
|
||
|
|
|
||
|
|
//Figure out whats the largest - the height of the text or the width of what's there, and minus it from the maximum usable size.
|
||
|
|
maxSize -= Max([labelLength,((config.pointLabelFontSize/2)*1.5)]);
|
||
|
|
|
||
|
|
maxSize -= config.pointLabelFontSize;
|
||
|
|
maxSize = CapValue(maxSize, null, 0);
|
||
|
|
scaleHeight = maxSize;
|
||
|
|
//If the label height is less than 5, set it to 5 so we don't have lines on top of each other.
|
||
|
|
labelHeight = Default(labelHeight,5);
|
||
|
|
};
|
||
|
|
function getValueBounds() {
|
||
|
|
var upperValue = Number.MIN_VALUE;
|
||
|
|
var lowerValue = Number.MAX_VALUE;
|
||
|
|
|
||
|
|
for (var i=0; i<data.datasets.length; i++){
|
||
|
|
for (var j=0; j<data.datasets[i].data.length; j++){
|
||
|
|
if (data.datasets[i].data[j] > upperValue){upperValue = data.datasets[i].data[j]}
|
||
|
|
if (data.datasets[i].data[j] < lowerValue){lowerValue = data.datasets[i].data[j]}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66)));
|
||
|
|
var minSteps = Math.floor((scaleHeight / labelHeight*0.5));
|
||
|
|
|
||
|
|
return {
|
||
|
|
maxValue : upperValue,
|
||
|
|
minValue : lowerValue,
|
||
|
|
maxSteps : maxSteps,
|
||
|
|
minSteps : minSteps
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var Pie = function(data,config,ctx){
|
||
|
|
var segmentTotal = 0;
|
||
|
|
|
||
|
|
//In case we have a canvas that is not a square. Minus 5 pixels as padding round the edge.
|
||
|
|
var pieRadius = Min([height/2,width/2]) - 5;
|
||
|
|
|
||
|
|
for (var i=0; i<data.length; i++){
|
||
|
|
segmentTotal += data[i].value;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
animationLoop(config,null,drawPieSegments,ctx);
|
||
|
|
|
||
|
|
function drawPieSegments (animationDecimal){
|
||
|
|
var cumulativeAngle = -Math.PI/2,
|
||
|
|
scaleAnimation = 1,
|
||
|
|
rotateAnimation = 1;
|
||
|
|
if (config.animation) {
|
||
|
|
if (config.animateScale) {
|
||
|
|
scaleAnimation = animationDecimal;
|
||
|
|
}
|
||
|
|
if (config.animateRotate){
|
||
|
|
rotateAnimation = animationDecimal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (var i=0; i<data.length; i++){
|
||
|
|
var segmentAngle = rotateAnimation * ((data[i].value/segmentTotal) * (Math.PI*2));
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(width/2,height/2,scaleAnimation * pieRadius,cumulativeAngle,cumulativeAngle + segmentAngle);
|
||
|
|
ctx.lineTo(width/2,height/2);
|
||
|
|
ctx.closePath();
|
||
|
|
ctx.fillStyle = data[i].color;
|
||
|
|
ctx.fill();
|
||
|
|
|
||
|
|
if(config.segmentShowStroke){
|
||
|
|
ctx.lineWidth = config.segmentStrokeWidth;
|
||
|
|
ctx.strokeStyle = config.segmentStrokeColor;
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
cumulativeAngle += segmentAngle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var Doughnut = function(data,config,ctx){
|
||
|
|
var segmentTotal = 0;
|
||
|
|
|
||
|
|
//In case we have a canvas that is not a square. Minus 5 pixels as padding round the edge.
|
||
|
|
var doughnutRadius = Min([height/2,width/2]) - 5;
|
||
|
|
|
||
|
|
var cutoutRadius = doughnutRadius * (config.percentageInnerCutout/100);
|
||
|
|
|
||
|
|
for (var i=0; i<data.length; i++){
|
||
|
|
segmentTotal += data[i].value;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
animationLoop(config,null,drawPieSegments,ctx);
|
||
|
|
|
||
|
|
|
||
|
|
function drawPieSegments (animationDecimal){
|
||
|
|
var cumulativeAngle = -Math.PI/2,
|
||
|
|
scaleAnimation = 1,
|
||
|
|
rotateAnimation = 1;
|
||
|
|
if (config.animation) {
|
||
|
|
if (config.animateScale) {
|
||
|
|
scaleAnimation = animationDecimal;
|
||
|
|
}
|
||
|
|
if (config.animateRotate){
|
||
|
|
rotateAnimation = animationDecimal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (var i=0; i<data.length; i++){
|
||
|
|
var segmentAngle = rotateAnimation * ((data[i].value/segmentTotal) * (Math.PI*2));
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(width/2,height/2,scaleAnimation * doughnutRadius,cumulativeAngle,cumulativeAngle + segmentAngle,false);
|
||
|
|
ctx.arc(width/2,height/2,scaleAnimation * cutoutRadius,cumulativeAngle + segmentAngle,cumulativeAngle,true);
|
||
|
|
ctx.closePath();
|
||
|
|
ctx.fillStyle = data[i].color;
|
||
|
|
ctx.fill();
|
||
|
|
|
||
|
|
if(config.segmentShowStroke){
|
||
|
|
ctx.lineWidth = config.segmentStrokeWidth;
|
||
|
|
ctx.strokeStyle = config.segmentStrokeColor;
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
cumulativeAngle += segmentAngle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var Line = function(data,config,ctx){
|
||
|
|
var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString, valueHop,widestXLabel, xAxisLength,yAxisPosX,xAxisPosY, rotateLabels = 0;
|
||
|
|
|
||
|
|
calculateDrawingSizes();
|
||
|
|
|
||
|
|
valueBounds = getValueBounds();
|
||
|
|
//Check and set the scale
|
||
|
|
labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : "";
|
||
|
|
if (!config.scaleOverride){
|
||
|
|
|
||
|
|
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
calculatedScale = {
|
||
|
|
steps : config.scaleSteps,
|
||
|
|
stepValue : config.scaleStepWidth,
|
||
|
|
graphMin : config.scaleStartValue,
|
||
|
|
labels : []
|
||
|
|
}
|
||
|
|
populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth);
|
||
|
|
}
|
||
|
|
|
||
|
|
scaleHop = Math.floor(scaleHeight/calculatedScale.steps);
|
||
|
|
calculateXAxisSize();
|
||
|
|
animationLoop(config,drawScale,drawLines,ctx);
|
||
|
|
|
||
|
|
function drawLines(animPc){
|
||
|
|
for (var i=0; i<data.datasets.length; i++){
|
||
|
|
ctx.strokeStyle = data.datasets[i].strokeColor;
|
||
|
|
ctx.lineWidth = config.datasetStrokeWidth;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(yAxisPosX, xAxisPosY - animPc*(calculateOffset(data.datasets[i].data[0],calculatedScale,scaleHop)))
|
||
|
|
|
||
|
|
for (var j=1; j<data.datasets[i].data.length; j++){
|
||
|
|
if (config.bezierCurve){
|
||
|
|
ctx.bezierCurveTo(xPos(j-0.5),yPos(i,j-1),xPos(j-0.5),yPos(i,j),xPos(j),yPos(i,j));
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
ctx.lineTo(xPos(j),yPos(i,j));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ctx.stroke();
|
||
|
|
if (config.datasetFill){
|
||
|
|
ctx.lineTo(yAxisPosX + (valueHop*(data.datasets[i].data.length-1)),xAxisPosY);
|
||
|
|
ctx.lineTo(yAxisPosX,xAxisPosY);
|
||
|
|
ctx.closePath();
|
||
|
|
ctx.fillStyle = data.datasets[i].fillColor;
|
||
|
|
ctx.fill();
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
ctx.closePath();
|
||
|
|
}
|
||
|
|
if(config.pointDot){
|
||
|
|
ctx.fillStyle = data.datasets[i].pointColor;
|
||
|
|
ctx.strokeStyle = data.datasets[i].pointStrokeColor;
|
||
|
|
ctx.lineWidth = config.pointDotStrokeWidth;
|
||
|
|
for (var k=0; k<data.datasets[i].data.length; k++){
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(yAxisPosX + (valueHop *k),xAxisPosY - animPc*(calculateOffset(data.datasets[i].data[k],calculatedScale,scaleHop)),config.pointDotRadius,0,Math.PI*2,true);
|
||
|
|
ctx.fill();
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function yPos(dataSet,iteration){
|
||
|
|
return xAxisPosY - animPc*(calculateOffset(data.datasets[dataSet].data[iteration],calculatedScale,scaleHop));
|
||
|
|
}
|
||
|
|
function xPos(iteration){
|
||
|
|
return yAxisPosX + (valueHop * iteration);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function drawScale(){
|
||
|
|
//X axis line
|
||
|
|
ctx.lineWidth = config.scaleLineWidth;
|
||
|
|
ctx.strokeStyle = config.scaleLineColor;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(width-widestXLabel/2+5,xAxisPosY);
|
||
|
|
ctx.lineTo(width-(widestXLabel/2)-xAxisLength-5,xAxisPosY);
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
|
||
|
|
if (rotateLabels > 0){
|
||
|
|
ctx.save();
|
||
|
|
ctx.textAlign = "right";
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
ctx.textAlign = "center";
|
||
|
|
}
|
||
|
|
ctx.fillStyle = config.scaleFontColor;
|
||
|
|
for (var i=0; i<data.labels.length; i++){
|
||
|
|
ctx.save();
|
||
|
|
if (rotateLabels > 0){
|
||
|
|
ctx.translate(yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize);
|
||
|
|
ctx.rotate(-(rotateLabels * (Math.PI/180)));
|
||
|
|
ctx.fillText(data.labels[i], 0,0);
|
||
|
|
ctx.restore();
|
||
|
|
}
|
||
|
|
|
||
|
|
else{
|
||
|
|
ctx.fillText(data.labels[i], yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize+3);
|
||
|
|
}
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(yAxisPosX + i * valueHop, xAxisPosY+3);
|
||
|
|
|
||
|
|
//Check i isnt 0, so we dont go over the Y axis twice.
|
||
|
|
if(config.scaleShowGridLines && i>0){
|
||
|
|
ctx.lineWidth = config.scaleGridLineWidth;
|
||
|
|
ctx.strokeStyle = config.scaleGridLineColor;
|
||
|
|
ctx.lineTo(yAxisPosX + i * valueHop, 5);
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
ctx.lineTo(yAxisPosX + i * valueHop, xAxisPosY+3);
|
||
|
|
}
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
//Y axis
|
||
|
|
ctx.lineWidth = config.scaleLineWidth;
|
||
|
|
ctx.strokeStyle = config.scaleLineColor;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(yAxisPosX,xAxisPosY+5);
|
||
|
|
ctx.lineTo(yAxisPosX,5);
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
ctx.textAlign = "right";
|
||
|
|
ctx.textBaseline = "middle";
|
||
|
|
for (var j=0; j<calculatedScale.steps; j++){
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(yAxisPosX-3,xAxisPosY - ((j+1) * scaleHop));
|
||
|
|
if (config.scaleShowGridLines){
|
||
|
|
ctx.lineWidth = config.scaleGridLineWidth;
|
||
|
|
ctx.strokeStyle = config.scaleGridLineColor;
|
||
|
|
ctx.lineTo(yAxisPosX + xAxisLength + 5,xAxisPosY - ((j+1) * scaleHop));
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
ctx.lineTo(yAxisPosX-0.5,xAxisPosY - ((j+1) * scaleHop));
|
||
|
|
}
|
||
|
|
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
if (config.scaleShowLabels){
|
||
|
|
ctx.fillText(calculatedScale.labels[j],yAxisPosX-8,xAxisPosY - ((j+1) * scaleHop));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
function calculateXAxisSize(){
|
||
|
|
var longestText = 1;
|
||
|
|
//if we are showing the labels
|
||
|
|
if (config.scaleShowLabels){
|
||
|
|
ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily;
|
||
|
|
for (var i=0; i<calculatedScale.labels.length; i++){
|
||
|
|
var measuredText = ctx.measureText(calculatedScale.labels[i]).width;
|
||
|
|
longestText = (measuredText > longestText)? measuredText : longestText;
|
||
|
|
}
|
||
|
|
//Add a little extra padding from the y axis
|
||
|
|
longestText +=10;
|
||
|
|
}
|
||
|
|
xAxisLength = width - longestText - widestXLabel;
|
||
|
|
valueHop = Math.floor(xAxisLength/(data.labels.length-1));
|
||
|
|
|
||
|
|
yAxisPosX = width-widestXLabel/2-xAxisLength;
|
||
|
|
xAxisPosY = scaleHeight + config.scaleFontSize/2;
|
||
|
|
}
|
||
|
|
function calculateDrawingSizes(){
|
||
|
|
maxSize = height;
|
||
|
|
|
||
|
|
//Need to check the X axis first - measure the length of each text metric, and figure out if we need to rotate by 45 degrees.
|
||
|
|
ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily;
|
||
|
|
widestXLabel = 1;
|
||
|
|
for (var i=0; i<data.labels.length; i++){
|
||
|
|
var textLength = ctx.measureText(data.labels[i]).width;
|
||
|
|
//If the text length is longer - make that equal to longest text!
|
||
|
|
widestXLabel = (textLength > widestXLabel)? textLength : widestXLabel;
|
||
|
|
}
|
||
|
|
if (width/data.labels.length < widestXLabel){
|
||
|
|
rotateLabels = 45;
|
||
|
|
if (width/data.labels.length < Math.cos(rotateLabels) * widestXLabel){
|
||
|
|
rotateLabels = 90;
|
||
|
|
maxSize -= widestXLabel;
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
maxSize -= Math.sin(rotateLabels) * widestXLabel;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
maxSize -= config.scaleFontSize;
|
||
|
|
}
|
||
|
|
|
||
|
|
//Add a little padding between the x line and the text
|
||
|
|
maxSize -= 5;
|
||
|
|
|
||
|
|
|
||
|
|
labelHeight = config.scaleFontSize;
|
||
|
|
|
||
|
|
maxSize -= labelHeight;
|
||
|
|
//Set 5 pixels greater than the font size to allow for a little padding from the X axis.
|
||
|
|
|
||
|
|
scaleHeight = maxSize;
|
||
|
|
|
||
|
|
//Then get the area above we can safely draw on.
|
||
|
|
|
||
|
|
}
|
||
|
|
function getValueBounds() {
|
||
|
|
var upperValue = Number.MIN_VALUE;
|
||
|
|
var lowerValue = Number.MAX_VALUE;
|
||
|
|
for (var i=0; i<data.datasets.length; i++){
|
||
|
|
for (var j=0; j<data.datasets[i].data.length; j++){
|
||
|
|
if ( data.datasets[i].data[j] > upperValue) { upperValue = data.datasets[i].data[j] };
|
||
|
|
if ( data.datasets[i].data[j] < lowerValue) { lowerValue = data.datasets[i].data[j] };
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66)));
|
||
|
|
var minSteps = Math.floor((scaleHeight / labelHeight*0.5));
|
||
|
|
|
||
|
|
return {
|
||
|
|
maxValue : upperValue,
|
||
|
|
minValue : lowerValue,
|
||
|
|
maxSteps : maxSteps,
|
||
|
|
minSteps : minSteps
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var Bar = function(data,config,ctx){
|
||
|
|
var maxSize, scaleHop, calculatedScale, labelHeight, scaleHeight, valueBounds, labelTemplateString, valueHop,widestXLabel, xAxisLength,yAxisPosX,xAxisPosY,barWidth, rotateLabels = 0;
|
||
|
|
|
||
|
|
calculateDrawingSizes();
|
||
|
|
|
||
|
|
valueBounds = getValueBounds();
|
||
|
|
//Check and set the scale
|
||
|
|
labelTemplateString = (config.scaleShowLabels)? config.scaleLabel : "";
|
||
|
|
if (!config.scaleOverride){
|
||
|
|
|
||
|
|
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
calculatedScale = {
|
||
|
|
steps : config.scaleSteps,
|
||
|
|
stepValue : config.scaleStepWidth,
|
||
|
|
graphMin : config.scaleStartValue,
|
||
|
|
labels : []
|
||
|
|
}
|
||
|
|
populateLabels(labelTemplateString, calculatedScale.labels,calculatedScale.steps,config.scaleStartValue,config.scaleStepWidth);
|
||
|
|
}
|
||
|
|
|
||
|
|
scaleHop = Math.floor(scaleHeight/calculatedScale.steps);
|
||
|
|
calculateXAxisSize();
|
||
|
|
animationLoop(config,drawScale,drawBars,ctx);
|
||
|
|
|
||
|
|
function drawBars(animPc){
|
||
|
|
ctx.lineWidth = config.barStrokeWidth;
|
||
|
|
for (var i=0; i<data.datasets.length; i++){
|
||
|
|
ctx.fillStyle = data.datasets[i].fillColor;
|
||
|
|
ctx.strokeStyle = data.datasets[i].strokeColor;
|
||
|
|
for (var j=0; j<data.datasets[i].data.length; j++){
|
||
|
|
var barOffset = yAxisPosX + config.barValueSpacing + valueHop*j + barWidth*i + config.barDatasetSpacing*i + config.barStrokeWidth*i;
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(barOffset, xAxisPosY);
|
||
|
|
ctx.lineTo(barOffset, xAxisPosY - animPc*calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop)+(config.barStrokeWidth/2));
|
||
|
|
ctx.lineTo(barOffset + barWidth, xAxisPosY - animPc*calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop)+(config.barStrokeWidth/2));
|
||
|
|
ctx.lineTo(barOffset + barWidth, xAxisPosY);
|
||
|
|
if(config.barShowStroke){
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
ctx.closePath();
|
||
|
|
ctx.fill();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
function drawScale(){
|
||
|
|
//X axis line
|
||
|
|
ctx.lineWidth = config.scaleLineWidth;
|
||
|
|
ctx.strokeStyle = config.scaleLineColor;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(width-widestXLabel/2+5,xAxisPosY);
|
||
|
|
ctx.lineTo(width-(widestXLabel/2)-xAxisLength-5,xAxisPosY);
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
|
||
|
|
if (rotateLabels > 0){
|
||
|
|
ctx.save();
|
||
|
|
ctx.textAlign = "right";
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
ctx.textAlign = "center";
|
||
|
|
}
|
||
|
|
ctx.fillStyle = config.scaleFontColor;
|
||
|
|
for (var i=0; i<data.labels.length; i++){
|
||
|
|
ctx.save();
|
||
|
|
if (rotateLabels > 0){
|
||
|
|
ctx.translate(yAxisPosX + i*valueHop,xAxisPosY + config.scaleFontSize);
|
||
|
|
ctx.rotate(-(rotateLabels * (Math.PI/180)));
|
||
|
|
ctx.fillText(data.labels[i], 0,0);
|
||
|
|
ctx.restore();
|
||
|
|
}
|
||
|
|
|
||
|
|
else{
|
||
|
|
ctx.fillText(data.labels[i], yAxisPosX + i*valueHop + valueHop/2,xAxisPosY + config.scaleFontSize+3);
|
||
|
|
}
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(yAxisPosX + (i+1) * valueHop, xAxisPosY+3);
|
||
|
|
|
||
|
|
//Check i isnt 0, so we dont go over the Y axis twice.
|
||
|
|
ctx.lineWidth = config.scaleGridLineWidth;
|
||
|
|
ctx.strokeStyle = config.scaleGridLineColor;
|
||
|
|
ctx.lineTo(yAxisPosX + (i+1) * valueHop, 5);
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
//Y axis
|
||
|
|
ctx.lineWidth = config.scaleLineWidth;
|
||
|
|
ctx.strokeStyle = config.scaleLineColor;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(yAxisPosX,xAxisPosY+5);
|
||
|
|
ctx.lineTo(yAxisPosX,5);
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
ctx.textAlign = "right";
|
||
|
|
ctx.textBaseline = "middle";
|
||
|
|
for (var j=0; j<calculatedScale.steps; j++){
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(yAxisPosX-3,xAxisPosY - ((j+1) * scaleHop));
|
||
|
|
if (config.scaleShowGridLines){
|
||
|
|
ctx.lineWidth = config.scaleGridLineWidth;
|
||
|
|
ctx.strokeStyle = config.scaleGridLineColor;
|
||
|
|
ctx.lineTo(yAxisPosX + xAxisLength + 5,xAxisPosY - ((j+1) * scaleHop));
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
ctx.lineTo(yAxisPosX-0.5,xAxisPosY - ((j+1) * scaleHop));
|
||
|
|
}
|
||
|
|
|
||
|
|
ctx.stroke();
|
||
|
|
if (config.scaleShowLabels){
|
||
|
|
ctx.fillText(calculatedScale.labels[j],yAxisPosX-8,xAxisPosY - ((j+1) * scaleHop));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
function calculateXAxisSize(){
|
||
|
|
var longestText = 1;
|
||
|
|
//if we are showing the labels
|
||
|
|
if (config.scaleShowLabels){
|
||
|
|
ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily;
|
||
|
|
for (var i=0; i<calculatedScale.labels.length; i++){
|
||
|
|
var measuredText = ctx.measureText(calculatedScale.labels[i]).width;
|
||
|
|
longestText = (measuredText > longestText)? measuredText : longestText;
|
||
|
|
}
|
||
|
|
//Add a little extra padding from the y axis
|
||
|
|
longestText +=10;
|
||
|
|
}
|
||
|
|
xAxisLength = width - longestText - widestXLabel;
|
||
|
|
valueHop = Math.floor(xAxisLength/(data.labels.length));
|
||
|
|
|
||
|
|
barWidth = (valueHop - config.scaleGridLineWidth*2 - (config.barValueSpacing*2) - (config.barDatasetSpacing*data.datasets.length-1) - ((config.barStrokeWidth/2)*data.datasets.length-1))/data.datasets.length;
|
||
|
|
|
||
|
|
yAxisPosX = width-widestXLabel/2-xAxisLength;
|
||
|
|
xAxisPosY = scaleHeight + config.scaleFontSize/2;
|
||
|
|
}
|
||
|
|
function calculateDrawingSizes(){
|
||
|
|
maxSize = height;
|
||
|
|
|
||
|
|
//Need to check the X axis first - measure the length of each text metric, and figure out if we need to rotate by 45 degrees.
|
||
|
|
ctx.font = config.scaleFontStyle + " " + config.scaleFontSize+"px " + config.scaleFontFamily;
|
||
|
|
widestXLabel = 1;
|
||
|
|
for (var i=0; i<data.labels.length; i++){
|
||
|
|
var textLength = ctx.measureText(data.labels[i]).width;
|
||
|
|
//If the text length is longer - make that equal to longest text!
|
||
|
|
widestXLabel = (textLength > widestXLabel)? textLength : widestXLabel;
|
||
|
|
}
|
||
|
|
if (width/data.labels.length < widestXLabel){
|
||
|
|
rotateLabels = 45;
|
||
|
|
if (width/data.labels.length < Math.cos(rotateLabels) * widestXLabel){
|
||
|
|
rotateLabels = 90;
|
||
|
|
maxSize -= widestXLabel;
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
maxSize -= Math.sin(rotateLabels) * widestXLabel;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
maxSize -= config.scaleFontSize;
|
||
|
|
}
|
||
|
|
|
||
|
|
//Add a little padding between the x line and the text
|
||
|
|
maxSize -= 5;
|
||
|
|
|
||
|
|
|
||
|
|
labelHeight = config.scaleFontSize;
|
||
|
|
|
||
|
|
maxSize -= labelHeight;
|
||
|
|
//Set 5 pixels greater than the font size to allow for a little padding from the X axis.
|
||
|
|
|
||
|
|
scaleHeight = maxSize;
|
||
|
|
|
||
|
|
//Then get the area above we can safely draw on.
|
||
|
|
|
||
|
|
}
|
||
|
|
function getValueBounds() {
|
||
|
|
var upperValue = Number.MIN_VALUE;
|
||
|
|
var lowerValue = Number.MAX_VALUE;
|
||
|
|
for (var i=0; i<data.datasets.length; i++){
|
||
|
|
for (var j=0; j<data.datasets[i].data.length; j++){
|
||
|
|
if ( data.datasets[i].data[j] > upperValue) { upperValue = data.datasets[i].data[j] };
|
||
|
|
if ( data.datasets[i].data[j] < lowerValue) { lowerValue = data.datasets[i].data[j] };
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var maxSteps = Math.floor((scaleHeight / (labelHeight*0.66)));
|
||
|
|
var minSteps = Math.floor((scaleHeight / labelHeight*0.5));
|
||
|
|
|
||
|
|
return {
|
||
|
|
maxValue : upperValue,
|
||
|
|
minValue : lowerValue,
|
||
|
|
maxSteps : maxSteps,
|
||
|
|
minSteps : minSteps
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function calculateOffset(val,calculatedScale,scaleHop){
|
||
|
|
var outerValue = calculatedScale.steps * calculatedScale.stepValue;
|
||
|
|
var adjustedValue = val - calculatedScale.graphMin;
|
||
|
|
var scalingFactor = CapValue(adjustedValue/outerValue,1,0);
|
||
|
|
return (scaleHop*calculatedScale.steps) * scalingFactor;
|
||
|
|
}
|
||
|
|
|
||
|
|
function animationLoop(config,drawScale,drawData,ctx){
|
||
|
|
var animFrameAmount = (config.animation)? 1/CapValue(config.animationSteps,Number.MAX_VALUE,1) : 1,
|
||
|
|
easingFunction = animationOptions[config.animationEasing],
|
||
|
|
percentAnimComplete =(config.animation)? 0 : 1;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
if (typeof drawScale !== "function") drawScale = function(){};
|
||
|
|
|
||
|
|
requestAnimFrame(animLoop);
|
||
|
|
|
||
|
|
function animateFrame(){
|
||
|
|
var easeAdjustedAnimationPercent =(config.animation)? CapValue(easingFunction(percentAnimComplete),null,0) : 1;
|
||
|
|
clear(ctx);
|
||
|
|
if(config.scaleOverlay){
|
||
|
|
drawData(easeAdjustedAnimationPercent);
|
||
|
|
drawScale();
|
||
|
|
} else {
|
||
|
|
drawScale();
|
||
|
|
drawData(easeAdjustedAnimationPercent);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function animLoop(){
|
||
|
|
//We need to check if the animation is incomplete (less than 1), or complete (1).
|
||
|
|
percentAnimComplete += animFrameAmount;
|
||
|
|
animateFrame();
|
||
|
|
//Stop the loop continuing forever
|
||
|
|
if (percentAnimComplete <= 1){
|
||
|
|
requestAnimFrame(animLoop);
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
if (typeof config.onAnimationComplete == "function") config.onAnimationComplete();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
//Declare global functions to be called within this namespace here.
|
||
|
|
|
||
|
|
|
||
|
|
// shim layer with setTimeout fallback
|
||
|
|
var requestAnimFrame = (function(){
|
||
|
|
return window.requestAnimationFrame ||
|
||
|
|
window.webkitRequestAnimationFrame ||
|
||
|
|
window.mozRequestAnimationFrame ||
|
||
|
|
window.oRequestAnimationFrame ||
|
||
|
|
window.msRequestAnimationFrame ||
|
||
|
|
function(callback) {
|
||
|
|
window.setTimeout(callback, 1000 / 60);
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
|
||
|
|
function calculateScale(drawingHeight,maxSteps,minSteps,maxValue,minValue,labelTemplateString){
|
||
|
|
var graphMin,graphMax,graphRange,stepValue,numberOfSteps,valueRange,rangeOrderOfMagnitude,decimalNum;
|
||
|
|
|
||
|
|
valueRange = maxValue - minValue;
|
||
|
|
|
||
|
|
rangeOrderOfMagnitude = calculateOrderOfMagnitude(valueRange);
|
||
|
|
|
||
|
|
graphMin = Math.floor(minValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude);
|
||
|
|
|
||
|
|
graphMax = Math.ceil(maxValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude);
|
||
|
|
|
||
|
|
graphRange = graphMax - graphMin;
|
||
|
|
|
||
|
|
stepValue = Math.pow(10, rangeOrderOfMagnitude);
|
||
|
|
|
||
|
|
numberOfSteps = Math.round(graphRange / stepValue);
|
||
|
|
|
||
|
|
//Compare number of steps to the max and min for that size graph, and add in half steps if need be.
|
||
|
|
while(numberOfSteps < minSteps || numberOfSteps > maxSteps) {
|
||
|
|
if (numberOfSteps < minSteps){
|
||
|
|
stepValue /= 2;
|
||
|
|
numberOfSteps = Math.round(graphRange/stepValue);
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
stepValue *=2;
|
||
|
|
numberOfSteps = Math.round(graphRange/stepValue);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var labels = [];
|
||
|
|
populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue);
|
||
|
|
|
||
|
|
return {
|
||
|
|
steps : numberOfSteps,
|
||
|
|
stepValue : stepValue,
|
||
|
|
graphMin : graphMin,
|
||
|
|
labels : labels
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function calculateOrderOfMagnitude(val){
|
||
|
|
return Math.floor(Math.log(val) / Math.LN10);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
//Populate an array of all the labels by interpolating the string.
|
||
|
|
function populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue) {
|
||
|
|
if (labelTemplateString) {
|
||
|
|
//Fix floating point errors by setting to fixed the on the same decimal as the stepValue.
|
||
|
|
for (var i = 1; i < numberOfSteps + 1; i++) {
|
||
|
|
labels.push(tmpl(labelTemplateString, {value: (graphMin + (stepValue * i)).toFixed(getDecimalPlaces(stepValue))}));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//Max value from array
|
||
|
|
function Max( array ){
|
||
|
|
return Math.max.apply( Math, array );
|
||
|
|
};
|
||
|
|
//Min value from array
|
||
|
|
function Min( array ){
|
||
|
|
return Math.min.apply( Math, array );
|
||
|
|
};
|
||
|
|
//Default if undefined
|
||
|
|
function Default(userDeclared,valueIfFalse){
|
||
|
|
if(!userDeclared){
|
||
|
|
return valueIfFalse;
|
||
|
|
} else {
|
||
|
|
return userDeclared;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
//Is a number function
|
||
|
|
function isNumber(n) {
|
||
|
|
return !isNaN(parseFloat(n)) && isFinite(n);
|
||
|
|
}
|
||
|
|
//Apply cap a value at a high or low number
|
||
|
|
function CapValue(valueToCap, maxValue, minValue){
|
||
|
|
if(isNumber(maxValue)) {
|
||
|
|
if( valueToCap > maxValue ) {
|
||
|
|
return maxValue;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(isNumber(minValue)){
|
||
|
|
if ( valueToCap < minValue ){
|
||
|
|
return minValue;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return valueToCap;
|
||
|
|
}
|
||
|
|
function getDecimalPlaces (num){
|
||
|
|
var numberOfDecimalPlaces;
|
||
|
|
if (num%1!=0){
|
||
|
|
return num.toString().split(".")[1].length
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function mergeChartConfig(defaults,userDefined){
|
||
|
|
var returnObj = {};
|
||
|
|
for (var attrname in defaults) { returnObj[attrname] = defaults[attrname]; }
|
||
|
|
for (var attrname in userDefined) { returnObj[attrname] = userDefined[attrname]; }
|
||
|
|
return returnObj;
|
||
|
|
}
|
||
|
|
|
||
|
|
//Javascript micro templating by John Resig - source at http://ejohn.org/blog/javascript-micro-templating/
|
||
|
|
var cache = {};
|
||
|
|
|
||
|
|
function tmpl(str, data){
|
||
|
|
// Figure out if we're getting a template, or if we need to
|
||
|
|
// load the template - and be sure to cache the result.
|
||
|
|
var fn = !/\W/.test(str) ?
|
||
|
|
cache[str] = cache[str] ||
|
||
|
|
tmpl(document.getElementById(str).innerHTML) :
|
||
|
|
|
||
|
|
// Generate a reusable function that will serve as a template
|
||
|
|
// generator (and which will be cached).
|
||
|
|
new Function("obj",
|
||
|
|
"var p=[],print=function(){p.push.apply(p,arguments);};" +
|
||
|
|
|
||
|
|
// Introduce the data as local variables using with(){}
|
||
|
|
"with(obj){p.push('" +
|
||
|
|
|
||
|
|
// Convert the template into pure JavaScript
|
||
|
|
str
|
||
|
|
.replace(/[\r\t\n]/g, " ")
|
||
|
|
.split("<%").join("\t")
|
||
|
|
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
|
||
|
|
.replace(/\t=(.*?)%>/g, "',$1,'")
|
||
|
|
.split("\t").join("');")
|
||
|
|
.split("%>").join("p.push('")
|
||
|
|
.split("\r").join("\\'")
|
||
|
|
+ "');}return p.join('');");
|
||
|
|
|
||
|
|
// Provide some basic currying to the user
|
||
|
|
return data ? fn( data ) : fn;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|