Component Linkage of Dashboard-FineReport Help Document

Last update： 2022-02-11

I. Description

In many cases, in addition to displaying data through reports or charts, because the data are all interconnected, we also need to communicate with each other between reports and charts.

For example, we can view the sales in different regions through the control filter, and at the same time, we can click the sector block of the product type to view the sales of the products under the product type. The effect is shown in the following figure:

II. Example

Open template%FR_HOME%\webroot\WEB-INF\reportlets\doc\frm\DashboardStarted.frm, we make modifications based on this template.

Click to download the template:

DashboardStarted.frm

1. New components

As shown in the rendering, drag a pie chart component to the left side of the column chart, as shown in the following figure:

2. New dataset

Create a new dataset ds2: SELECT * FROM sales_volume where region='${region}' and 1=1 ${if(len(product)==0,"","and product_types='"+product+" '")}

3. Component data binding

1) Pie Chart

Select the pie chart component, set its data in the chart property table - data option on the right, select ds1 for the dataset, and select the summation method for the summary method, as shown in the following figure:

2) Column Chart

Select the column chart, modify its data source, the data comes from the newly created ds2 dataset, the category axis is still salesperson, the series name is changed to product, and the series value is still sales_volume, as shown in the following figure:

4. Hyperlink Settings

Effect chart, click the pie chart, the column chart data will change accordingly, indicating that when the pie chart is clicked, the data is passed to the column chart, so that the parameter value of the dataset ds2 bound to the column chart has changed, so The column chart also changes accordingly.

Select the pie chart and clickChart1 - Special Effects > Interaction , add a hyperlink, select the dynamic parameter in the hyperlink mode , click +, enter the parameter product (the same as the parameter name of the SQL statement of ds2), and select the series name for its value, as shown in the following figure:

Note: If it is a direct hyperlink to a different component of the current dashboard, the method of hyperlink should select the current dashboard object.

5. Dashboard style design

In the component list interface at the bottom right of the dashboard , select the main body frame, set all the padding to 10, and set the component spacing to 5, as shown in the following figure:

At the same time, add black borders to the table component and the two chart components respectively, as shown in the figure below, select the table component, click the option button behind the style attribute in the property sheet, and set its border and border color, as shown in the following figure:

Set borders for the other 2 components in the same way.

Note: The linkage effect between the dashboard components is realized by connecting to the current dashboard object based on the hyperlink. The setting method is the same as the chart link of the ordinary cpt report, so it will not be repeated here.