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 type | Function name | JSON structure |
---|---|---|
Pie | renderPIE_ext | Pie |
Bar | renderBAR_ext | Bar Chart |
Stacked bar | renderBAR_STACK_ext | Stack Bar Chart |
Line | renderLINE_ext | Line Chart |
Scatter | renderSCATTER_ext | Scatter Chart |
Horizontal scatter | renderHSCATTER_ext | Horizontal Scatter Chart |
Horizontal bar | renderHBAR_ext | Horizontal Bar Chart |
Radar | renderRADAR_ext | Radar chart |
Horizontal stacked bar | renderHBAR_STACK_ext | Horizontal Stack Bar Chart |
Histogram | renderHISTOGRAM_ext | Histogram Chart |
Box plot | renderBOX_PLOT_ext | Box Plot Chart |
Heat map | renderMEMBERS_ext | Horizontal Heat Map Chart |
Combined | renderCOMBINED_ext | Combined Chart |
Thermometer | renderTHERMOMETER_ext | Thermometer Chart |
Funnel | renderFUNNEL_ext | Funnel Chart |
Speedometer | renderSPEEDOMETER_ext | Speedometer Chart |
Candle | renderCANDLE_ext | Candle Chart |
Tree map | renderTREE_MAP_ext | Tree Map Chart |
Bullet | renderBULLET_ext | Bullet Chart |
Horizontal bullet | renderHBULLET_ext | Horizontal Bullet Chart |
Gantt | renderGANTT_ext | Gantt Chart |
XY | renderXY_ext | XY 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
Overview
Content Tools