The charting engine provided by default Helical Insight Community Edition is D3 and C3 charts.Anyhow, there will be few requirements which cannot be accomplished with help of default properties.In such cases, we can use ‘JS Editor’ option available and write javascript to achieve that requirement.
We can use 4 life cycle events for the report to customize the charts depending on the requirement i.e.
- Pre-Fetch
- Pre-Execution
- Post-Fetch
- Post-Execution
This blog explains Pre-Execution event significance along with few examples.
Code written in Pre-Execution is processed before chart runs. So requirements where script has to collect and process information before charts process and fetch data, Pre-Execution can be used
Examples:
- Consider a tabular chart as shown below
By default, report shows 10 rows at a time.
Requirement : To show 50 rows at a time.
Solution :
Open the report in editor mode and place below script in Editor pane
Script used:
hi_container.set(“preExecution”,function(c){
var viz_Options = c.get(“viz_Options”);
viz_Options[“rowCount”] = [50,100,150,200,250];
c.set(“viz_Options”,viz_Options); });
Inject and save the report
2. Consider donut Chart as shown
By default, this chart displays percentage on slices.
Requirement: To display label name on the slices
Solution :
We have default option to display actual value, but not label name. To display label name, open report in edit mode and use below script in JS Editor
Script :
hi_container.set(“preExecution”, function(a) {
var b = a.get(“viz_Options”);
b.chartOptions.donut = {
width: 150,
label: {
show: true,
threshold: 0.1,
format: function(a, b, c) {
return c +”\n”+(b*100).toFixed(1)+’%’;
}
}
};
a.set(“viz_Options”, b);
});
Inject Script and Save the report
