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.
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(); } } |
Extension-SpeedometerRenderer.zip