JS Realizes Drill-through Chart by Category

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&parameter=" + 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

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.

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.

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