JS Custom Waterball Chart

1.1 Application scenarios

The extended chart of FineReport supports waterball chart that shows percentage data. For details, please refer to the document: Water Ball. In fact, it is possible to customize a waterball chart through JS code.

The effect of custom waterball chart is shown in the following figure:

1.2 Function introduction

• The chart calculate and display the percentage data based on a indicator value and a target value, and the water level changes according to the percentage data.

• Support custom title above the percentage data.

• Only a single percentage data can be displayed. Carousel effects are not supported.

• You can customizable font, wave and border color.

Note: Percentage data=indicator value/target value.

2.1 Report design

1) Create a blank dashboard, edit the body, set the background to black, set the layout type to Absolute Layout, and set the zooming mode to Area Fixed. Drag and drop an absolute layout block to the body.

2) Set the zooming mode of absolute layout block as Area Fixed. Change its position and size. Edit the block and add a report block in the absolute layout block.

3) Design the report block

4) Set the name of the report block as report and uncheck Visible.

2.2 Import JS file

1) Download the JS file:

canvas.js

And place the JS file in directory %FR_HOME%\webapps\webroot\help\css\.

2) Click Server > Server Configuration Manager, select Reference JavaScript, and select the JS file just now.

2.3 Add JS event

1) Select the form of dashboard and add an After Initialization event

The JS code is as follows:

var head = document.getElementsByTagName('head')[0];
if(!isInclude("canvas.js")){
var script = document.createElement('script');
script.type ='text/javascript';
script.src ='css/canvas.js';
head.appendChild(script);
}
function isInclude(name){
var js = /js$/i.test(name);
var es=document.getElementsByTagName(js?'script':'link');
for(var i=0;i<es.length;i++)
if(es[i][js?'src':'href'].indexOf(name)!=-1)return true;
return false;
}
window._form = this.options.form;
Show Code

2) Select the absolute layout block absolute0 and add an After Initialization event

The JS code is as follows:

var minVal = FR.remoteEvaluate('=report~A2');
var maxVal = FR.remoteEvaluate('=report~B2');
var timer = setInterval(function(){
if(typeof runcanvas !== "function"){
return false;
}
clearInterval(timer);
runcanvas({"minVal":minVal[0],"maxVal":maxVal[0],
"absolute":"ABSOLUTE0","wordStyle":"20px bold Arial",
"wordColor":"#ffffff",
"aColor":["#329FFF","rgba(50,159,255,.6)"],
"bColor":['rgba(50,159,255,.3)','rgba(50,159,255,.3)'],
"lineColor":"#329FFF",
"name":"Custom Waterball","nameStyle":"15px normal Arial",
"nameColor":"#ffffff"
});
},100);
var t;
$(window).resize(function(){
clearInterval(t);
t = setInterval(function(){
runcanvas({"minVal":minVal[0],"maxVal":maxVal[0],
"absolute":"ABSOLUTE0","wordStyle":"20px bold Arial",
"wordColor":"#ffffff",
"aColor":["#329FFF","rgba(50,159,255,.6)"],
"bColor":['rgba(50,159,255,.3)','rgba(50,159,255,.3)'],
"lineColor":"#329FFF",
"name":"Custom Waterball","nameStyle":"15px normal Arial",
"nameColor":"#ffffff"
});
clearInterval(t);
},300);
})
Show Code

2.4 Effect preview

Save the report, click Dashboard Preview, and the effect of the custom waterball chart is as shown below:

Note: Mobile Preview is not supported.

Custom Waterball.frm