vtenext/include/chartjs/VTEChart.js

/* crmv@82770 */
/* Some extensions to standard charts */

Chart.types.Doughnut.extend({
	name: "VTEDoughnut",
	
	defaults: this.defaultConfig,
		
	draw: function() {
		var me = this,
			ctx = me.chart.ctx;

		// add some default options
		var options = Chart.helpers.merge({
			drawTotal: false,
			drawLabels: false,
			totalTemplate: '<%=total%>',
			labelTemplate: '<%=percentage%>%',
			labelLightColor: '#ffffff',
			labelDarkColor: '#000000',
		}, me.options);
		
		// call parent
		Chart.types.Doughnut.prototype.draw.apply(me, arguments);
		
		// check if I have to draw something
		if (!options.drawTotal && !options.drawLabels) return;
		
		// calculate the total
		var total = 0;
		for (var i = 0; i < me.segments.length; i++) { 
			total += parseFloat(me.segments[i].value);
		}
		
		//draw the total
		if (options.drawTotal) {
			ctx.fillStyle = options.labelDarkColor;
			ctx.textBaseline = 'middle';
			ctx.textAlign = 'center';
			ctx.font="12px Verdana";
			var text = Chart.helpers.template(options.totalTemplate, {total: total});
			ctx.fillText(text, me.chart.width / 2, me.chart.height / 2, 100);
		}

		// draw the parcentage on the slices
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		ctx.font = 'normal 10px Verdana';
		for(var i = 0; i < me.segments.length; i++){
			var value = parseFloat(me.segments[i].value),
				color = me.segments[i].fillColor,
				percentage = ((value / total) * 100).toFixed(1);

			// check if there is no enough contrast
			if (colorDistance(options.labelDarkColor, color) < 50) {
				ctx.fillStyle = options.labelLightColor;
			} else {
				ctx.fillStyle = options.labelDarkColor;
			}
							
			if (percentage > 3) {
				var centreAngle = me.segments[i].startAngle + ((me.segments[i].endAngle - me.segments[i].startAngle) / 2),
					rangeFromCentre = (me.segments[i].outerRadius - me.segments[i].innerRadius) / 2 + me.segments[i].innerRadius;
				var x = me.segments[i].x + (Math.cos(centreAngle) * rangeFromCentre);
				var y = me.segments[i].y + (Math.sin(centreAngle) * rangeFromCentre);

				var obj = {
					percentage: percentage,
					value: value,
					total: total,
					label: me.segments[i].label
				}
				var text = Chart.helpers.template(options.labelTemplate, obj);
				ctx.fillText(text, x, y);
			}
		}
	}
});


/* Some extensions to standard charts */

Chart.types.Pie.extend({
	name: "VTEPie",
	
	defaults: this.defaultConfig,
		
	draw: function() {
		var me = this,
			ctx = me.chart.ctx;

		// add some default options
		var options = Chart.helpers.merge({
			drawTotal: false,
			drawLabels: false,
			totalTemplate: '<%=total%>',
			labelTemplate: '<%=percentage%>%',
			labelLightColor: '#ffffff',
			labelDarkColor: '#000000',
		}, me.options);
			
		// call parent
		Chart.types.Pie.prototype.draw.apply(me, arguments);
		
		// check if I have to draw something
		if (!options.drawTotal && !options.drawLabels) return;
		
		// calculate the total
		var total = 0;
		for (var i = 0; i < me.segments.length; i++) { 
			total += parseFloat(me.segments[i].value);
		}
		
		//draw the total
		if (options.drawTotal) {
			ctx.fillStyle = options.labelDarkColor;
			ctx.textBaseline = 'middle';
			ctx.textAlign = 'center';
			ctx.font="12px Verdana";
			var text = Chart.helpers.template(options.totalTemplate, {total: total});
			ctx.fillText(text, me.chart.width / 2, me.chart.height / 2, 100);
		}

		// draw the parcentage on the slices
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		ctx.font = 'normal 10px Verdana';
		for(var i = 0; i < me.segments.length; i++){
			var value = parseFloat(me.segments[i].value),
				color = me.segments[i].fillColor,
				percentage = ((value / total) * 100).toFixed(1);

			// check if there is no enough contrast
			if (colorDistance(options.labelDarkColor, color) < 50) {
				ctx.fillStyle = options.labelLightColor;
			} else {
				ctx.fillStyle = options.labelDarkColor;
			}
							
			if (percentage > 3) {
				var centreAngle = me.segments[i].startAngle + ((me.segments[i].endAngle - me.segments[i].startAngle) / 2),
					rangeFromCentre = me.segments[i].outerRadius * 0.55;
				var x = me.segments[i].x + (Math.cos(centreAngle) * rangeFromCentre);
				var y = me.segments[i].y + (Math.sin(centreAngle) * rangeFromCentre);
				
				var obj = {
					percentage: percentage,
					value: value,
					total: total,
					label: me.segments[i].label
				}
				var text = Chart.helpers.template(options.labelTemplate, obj);
				ctx.fillText(text, x, y);
			}
		}
	}
});