I. Overview
1.Expected Result
In the application requirements of the chart, sometimes it is necessary to drill to the corresponding page according to the chart type, as shown in the following figure:
2.Implementation
Use iframe to drill through the current page and display it in a pop-up box.
var iframe = $("<iframe id='001' name='001' width='100%' height='100%' scrolling='yes' frameborder='0'>")
// iframe the naming and width and height of parameters
if (parameter =='category 1') { //Judge the clicked point, and pop up a detailed dialog box according to the selected latitude
iframe.attr("src", "report?viewlet=/Details 1.cpt&op=view¶meter=" + parameter + "")
}
..........else
........
var o = {
title: wd, //The title of the dialog box
width: 1265, //Width uniform width and height
height: 370 //high}
FR.showDialog(o.title, o.width, o.height, iframe, o) //pop-up dialogue box
II. Steps
1.Create a new template
In the FineReport designer, click File> New Dashboard, select the radar chart in the chart block and drag it into the dashboard, as shown in the figure below:
2.Data Preparation
1)Create a new Embedded, as shown in the figure below:
2)Click the Edit in the center of the dashboard with the left mouse button, and select Component Settings>Data in the attributes pane on the right. The data settings of the radar chart are shown in the following figure:
3.Add hyperlink
On the right side of the attributes pane, select Component Settings>Special Effect, and add a JavaScript hyperlink on the Hyperlink, which needs to add the two parameters wd and jd.
parameter | value | Notes |
---|---|---|
wd | CATEGORY | Take the clicked point on the radar chart |
jd | $jd | Take the parameter to drop down of selected parameter |
As shown below:
The JS code is as follows:
var iframe = $("<iframe id='001' name='001' width='100%' height='100%' scrolling='yes' frameborder='0'>") // iframeThe naming and width and height of parameters
if (wd == 'Product') { //Judge the clicked point, and pop up a detailed dialog box according to the selected latitude
iframe.attr("src", "report?viewlet=/demo/analytics/sales/Revenue_by_product.frm&op=view&jd=" + jd + "")}
else if (wd == 'Branch office') {
iframe.attr("src", "report?viewlet=/demo/analytics/sales/Revenue_by_branch.frm&op=view&jd=" + jd + "")}
else if (wd == 'Region') {
iframe.attr("src", "report?viewlet=/demo/analytics/sales/Revenue_by_region.frm.frm&op=view&jd=" + jd + "")}
else if (wd == 'Time') {
iframe.attr("src", "report?viewlet=/demo/analytics/sales/Statistic_revenue_by_time.frm&op=view&jd=" + jd + "")}
var o = { title: wd, //The title of the dialog box
width: 900, //Width uniform width and height
height: 300 //high
}
FR.showDialog(o.title, o.width, o.height, iframe, o) //pop-up dialogue box
If the user needs to individually define the width and height of each pop-up box, the JS code is as follows:
var url = "";
var title = "";
var o = "";
if(wd=="Product"){
url = "report?viewlet=/demo/analytics/sales/Revenue_by_product.frm&op=view&jd=" + jd + "";
title = wd;
o = {width : 400, //Dialog width
height: 400 //Dialog height
};}
if(wd=="Branch office"){
url = "report?viewlet=/demo/analytics/sales/Revenue_by_branch.frm&op=view&jd=" + jd + "";
title = wd;
o = {width : 600, //Dialog width
height: 300 //Dialog height
};}
if(wd=="Region"){
url = "report?viewlet=/demo/analytics/sales/Revenue_by_region.frm&op=view&jd=" + jd + "";
title = wd;
o = {width : 900, //Dialog width
height: 400 //Dialog height
};}
if(wd=="Time"){
url = "report?viewlet=/demo/analytics/sales/Statistic_revenue_by_time.frm&op=view&jd=" + jd + "";
title = wd;
o = {width : 1000, //Dialog width
height: 200 //Dialog height
};}
var iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='yes' frameborder='0'>");
// The name of the iframe parameter in the dialog box, the default width and height ratio is 100%, scroll down
iframe.attr("src", url); // Add src attribute to iframe
//pop-up dialogue box
FR.showDialog(title, o.width, o.height, iframe,o);
When previewing in the decision-making platform,an error may appear when opening a pop-up box, and the link to the details when accessed for the first time is incorrect
Solution: modify JavaScript
Add url parameter: dynamically obtain access address
formula= "http://"+serverName+":"+serverPort+servletURL+"?viewlet="
serverName Refers to the server address or name. In the example address, serverName refers to: localhost, which is the IP of the access machine.
serverPortRefers to the accessed port. In the example address, serverPort refers to: 8075.
servletURLRefers to the URL of the servlet. In the example address, servletURL refers to: /webroot/decision/view/report. For the specific application scenarios of the parameter ${servletURL},plaease refer to:Web Page Widget
Modify link:
iframe.attr("src", url"+/test/Details 1.cpt&op=view&jd=" + jd + "")
4.Effect view
Save the template, click the PC preview, the effect is the same as the "expected effect" in chapter I.1. of this article.
Note: This method does not support mobile terminals.
III.Completed Template
Click to download the template:
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-en\JS\Chart JS Example\JS_implements_drill_through_charts_by_category.frm
JS_implements_drill-through_charts_by_category .frm