Page tree
Skip to end of metadata
Go to start of metadata

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

  • Empty HTML head and HTML body 
  • Resources
    • chart-renderer.js implementing rendeCHARTTYPE_ext(canvasID, chartJSON, color) function

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
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");
		var W = canvas.width;
		var H = canvas.height;
		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 =[0].values[0].value;
	    var chartData = Math.round(value*3.6);
		function init()
			//Clear the canvas everytime a chart is drawn
			ctx.clearRect(0, 0, W, H);
			//Background 360 degree arc
			ctx.strokeStyle = bgcolor;	
			ctx.lineWidth = 25;
			ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false);
			//gauge will be a simple arc
			//Angle in radians = angle in degrees * PI / 180
			var radians = degrees * Math.PI / 180;
			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
			//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) 
			if(degrees < new_degrees)

Sample extension

  • No labels