I. Overview
1. Expected Effect
We sometimes need to display the corresponding chart in the two-way folding tree to facilitate dynamic viewing, how to achieve it? Results as shown below:
2. Realization ideas
The two-way folding tree is a dynamic folding tree in the row and column directions. The chart sub-table is embedded in the main table through the web page frame widget, and then the click event is set for the dynamic tree node, and the node value is passed to the chart, so as to realize the two-way folding tree and Chart interaction.
II. Example
1. Make a dynamic folding tree template
1.1 Prepare data
Create a new normal report, create a new database query, the SQL query statement is:select * from Sales_Volume
As shown below:
1.2 Design table
First, design a two-way folding tree. For two-way folding tree, you need to pay attention that the data columns of the folding tree cannot be in the same row or the same column. Please refer to the template for specific settings, focusing on the expansion direction of the cell, parent cell settings and filter conditions. The table style is as shown in the figure below:
1.3 Set click event
In order to achieve the interaction between the two-way folding tree and the chart, you need to add a "button widget" to the tree node and set a "click event", and the value of the tree node is passed to the chart as a parameter through the click event.
Take the "Product" node in the rendering diagram as an example to illustrate the click event settings of the widget:
1) Select the "Product" cell, click Widget Settings, select "Button Widget", and add a click event.
2) Quote the JavaScript script file, click the "+" button, and select %FR_HOME%\webapps\webroot\help\demo.js. The demo.js file associates the tree with the chart template and passes the value of the tree node to the chart template.
3) Add the parameter "cv" with the value of the formula $$$, which represents the value of the current tree node.
4) Enter the JavaScript code and call the method in demo.js.
Note: After the content of the demo.js file is modified, you need to delete the original reference and add the reference again for it to take effect.
The steps are shown in the figure below:
treenode_lb1() is a method in demo.js whose function is to pass parameters. The corresponding content of demo.js is:
function treenode_lb1(treenode, cv) {
if (treenode.selected()) {
if (!window.fr_lb1_param){
window.fr_lb1_param = {};
}
window.fr_lb1_param[cv] = cv;
} else {
window.fr_lb1_param[cv] = null;
}
postParam();
}
Another method in demo.js is to associate the folding tree template with the chart template embedded in the web page frame. The code is as follows:
Note: The following part of ?viewlet= is the URL address when embedding the template preview, and'IFRAME' is the "widget name" of the webpage frame widget.
FR.doHyperlinkByPost('?viewlet=Reuse%252FFolding_tree_sub-chart.cpt',
{diqu:diqu_str,city:city_str,lb1:lb1_str,lb2:lb2_str,lx1:lx1_str,lx2:lx2_str},'IFRAME');
1.4 Embed chart template
The chart template is introduced through a "iframe widget" in the tree template, merge cells below the designed table, add a "iframe" widget, and enter the address bar: ${servletURL}?viewlet=[template name].cpt
That is, the input in this example: ${servletURL}?viewlet=Reuse/Folding_tree_sub-chart.cpt.
Note: The widget name must correspond to the name in the FR.doHyperlinkByPost() method in demo.js. All examples are "iframe".
2. Make a chart template
2.1 Prepare data
Create a new normal report, create a new database query, the SQL query statement is:select * from Sales_Volume
As shown below:
2.2 Design table
In the chart template, it is necessary to set the condition setting according to the parameters of the tree node. Please refer to the template for the specific settings, mainly pay attention to the cell expansion direction, parent cell settings, filter conditions and condition attributes, and columns F is hidden. The table style is as shown in the figure below:
2.3 Insert chart
Select the cell, click the cell element, insert the chart, set the chart type, data, style, etc.
3. Effect preview
Save the report, click "Data Analysis Preview", the effect is the same as the expected effect in section I.1.
Note: Only the "data analysis" preview is supported, and mobile terminals are not supported.
III. Template download
The completed template can refer to: %FR_HOME%\WebReport\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication\Folding_tree_interaction.cpt
Click to download the template:
The completed template can refer to: %FR_HOME%\WebReport\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication\Folding_tree_sub-chart.cpt
Click to download the template:
Previous：Tree dataset checklist
