This feature is available since BellaDati 2.9.4

It is possible to define a custom renderer which will be used to display a specific chart or table. This renderer is defined in an extension. The user then has the option to select the renderer in chart appearance or table appearance settings.

Extension structure

Content of chart-renderer.js

Javascript responsible for rendering specific chart. Each chart type must have own render function. Rendering functions:

Chart typeFunction nameJSON structure
PierenderPIE_extPie
BarrenderBAR_extBar Chart
Stacked barrenderBAR_STACK_extStack Bar Chart
LinerenderLINE_extLine Chart
ScatterrenderSCATTER_extScatter Chart
Horizontal scatterrenderHSCATTER_extHorizontal Scatter Chart
Horizontal barrenderHBAR_extHorizontal Bar Chart
RadarrenderRADAR_extRadar chart
Horizontal stacked barrenderHBAR_STACK_extHorizontal Stack Bar Chart
HistogramrenderHISTOGRAM_extHistogram Chart
Box plotrenderBOX_PLOT_extBox Plot Chart
Heat maprenderMEMBERS_extHorizontal Heat Map Chart
CombinedrenderCOMBINED_extCombined Chart
ThermometerrenderTHERMOMETER_extThermometer Chart
FunnelrenderFUNNEL_extFunnel Chart
SpeedometerrenderSPEEDOMETER_extSpeedometer Chart
CandlerenderCANDLE_extCandle Chart
Tree maprenderTREE_MAP_extTree Map Chart
BulletrenderBULLET_extBullet Chart
Horizontal bulletrenderHBULLET_extHorizontal Bullet Chart
GanttrenderGANTT_extGantt Chart
XYrenderXY_extXY Scatter Plot Chart

 

Function takes trhee parameters: canvas ID and chartJSON holding JSON chart data produced by BellaDati (see Report API) and color of the space that is filled. 

Speedometer chart rendere example:

function renderSPEEDOMETER_ext#EXT_ID#(canvasID, chartJSON, color)
	{
		//canvas initialization
		var canvas = document.getElementById(canvasID);
		var ctx = canvas.getContext("2d");
		//dimensions
		var W = canvas.width;
		var H = canvas.height;
		//Variables
		var degrees = 0;
		var new_degrees = 0;
		var difference = 0;
		var bgcolor = "#d6d7d9";	//color of the space that is not filled
		var text;
		var animation_loop;
      	var value = chartJSON.data.elements[0].values[0].value;
	    var chartData = Math.round(value*3.6);
	    draw();             
		function init()
		{
			//Clear the canvas everytime a chart is drawn
			ctx.clearRect(0, 0, W, H);
			
			//Background 360 degree arc
			ctx.beginPath();
			ctx.strokeStyle = bgcolor;	
			ctx.lineWidth = 25;
			ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false);
			ctx.stroke();
			
			//gauge will be a simple arc
			//Angle in radians = angle in degrees * PI / 180
			var radians = degrees * Math.PI / 180;
			ctx.beginPath();
			ctx.strokeStyle = "#ffdc74";	//color of the filled space
			ctx.lineWidth = 25;
			//The arc starts from the rightmost end. If we deduct 90 degrees from the angles
			//the arc will start from the topmost end
			ctx.arc(W/2, H/2, 100, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); 
			//you can see the arc now
			ctx.stroke();
			
			//Lets add the text
			ctx.fillStyle = "#7c7c7c";	//color of the text
			ctx.font = "50px Open Sans";
			text = Math.round(degrees/360*100) + "%";
			//Lets center the text
			//deducting half of text width from position x
			text_width = ctx.measureText(text).width;
			//adding manual value to position y 
			ctx.fillText(text, W/2 - text_width/2, H/2 + 15);
		}
		
		function draw()
		{
			//Cancel any movement animation if a new chart is requested
			if(typeof animation_loop != undefined) clearInterval(animation_loop);
			
			//get degrees that could be filled
			new_degrees = chartData;
			difference = new_degrees - degrees;
			//This will animate the gauge to new positions
			//The animation will take 1 second
			//time for each frame is 1sec / difference in degrees
			animation_loop = setInterval(animate_to, 1000/difference);
		}
		
		//function to make the chart move to new degrees
		function animate_to()
		{
			//clear animation loop if degrees reaches to new_degrees
			if(degrees == new_degrees || new_degrees === undefined) 
				clearInterval(animation_loop);
					
			if(degrees < new_degrees)
				degrees++;
		
			init();
		}
}

Sample extension

Extension-SpeedometerRenderer.zip