Component Linkage by Click in FVS

This document applies to users who have installed the FineVis Data Visualization plugin to learn FineVis functions.

Version

Application Scenario

In FVS templates, you can click a component to pass parameters for linkage with other components. For example:

• Use the title component as a button, which can be clicked for linkage with other components.

• Use the chart component, in which the categories or series can be clicked for linkage with other components.

• Use the table component, in which the cells can be clicked for linkage with other charts or tables.

The following figure shows the effect.

Function Description

Component Linkage

Note:

The Click event is not supported by some components. For details, see FVS Component Interaction Attribute.

When using the title component or chart component to link with other components, select the component, choose Interaction > Interaction Event > Add Event > Click in the right configuration panel, and set the component linkage execution action for the Click event.

(1) Select a component, and choose Interaction > Interaction Event > Add Event > Click in the right configuration panel to add a click event.

(2) Click Component Linkage to add a component linkage execution action for the Click event. In the pop-up action execution settings box, you can set Action Name, Scope, Object, and Parameter Setting, as shown in the following figure.

(3) The following table describes each setting item.

Setting Item	Description
Action Name	The action name can be customized.
Scope	Global: The click behavior applies to the entire template, passing parameters to every component in the template. Object: The click behavior applies only to selected components, passing parameters only to the selected components. You can only select components on the same tab page.
Object	This item appears only when Scope is set to Object. The options are other components on the same page as this component. Multiple selections are supported.
Parameter Setting	(1) Parameter Name, Parameter Type, and Parameter Content can be set. (2) Three parameter types are supported: Component Field: Parameter content can be component content, such as map area names and bar chart series names. Custom Formula: Parameter content can be in the format of formulas. Custom Content: Parameter content can be direct text. Note: If you set Parameter Type to Custom Formula, cell data can be referenced in the value of Parameter Content. For details, see Cell Data as Data Source.

Hyperlinks of the Table Cells

In plugins of version V1.7.1 and later, the cells in the table component can be hyperlinked to Object on Current Page. However, the table component can only be linked with chart components or table components on the same tab page.

Note:

If a chart is inserted into cells, and you want to hyperlink it using the Object on Current Page function under Special Effect > Interaction > Hyperlink, you need to upgrade the FineReport designer to version 11.0.8.1 first.

• Adding hyperlinks for a cell

  
  

• Adding hyperlinks for a chart inserted into cells

• 

Creating a Template

(1) Choose File > New FineVis Visualization Dashboard in the menu bar of the designer, and create a blank dashboard, as shown in the following figure.

(2) Customize the name of the dashboard, canvas size, and template style as required, and click Create Dashboard, as shown in the following figure.

Preparing Data

(1) Create a database query ds1 with the SQL query statement SELECT * FROM Sales_Volume to extract all data from the Sales_Volume table, as shown in the following figure.

(2) Create a database query ds2 with the SQL query statement SELECT * FROM Sales_Volume ${if(len(area) == 0,"","where Region = '" + area + "'")}. This statement indicates that if the area parameter $area is empty, all data from the Sales_Volume table will be obtained; otherwise, data will be obtained according to $area, as shown in the following figure.

Adding Components

(1) Add a pie chart, a bar chart, two tables, and four title components to the canvas. Take the pie chart as an example, as shown in the following figure.

(2) Adjust the position and size of the components. The pie chart and the first table are the objects for setting hyperlinks, while the bar chart and the second table are the objects to be linked. The layout is as follows:

(3) Set Title Content to Pie Chart, Bar Chart, Table 1, and Table 2 respectively for the four title components. Take the Pie Chart title component as an example, as shown in the following figure.

(4) Set Name to Pie Chart, Bar Chart, Table 1, and Table 2 for the pie chart, bar chart, and table components, respectively. Take the Pie Chart component as an example, as shown in the following figure.

Setting the Component Content

Pie Chart and Bar Chart

(1) Select the pie chart and bar chart components on the canvas, and configure their content in the right configuration panel.

(2) Bind the pie chart component to the ds1 dataset, which does not contain parameters, and set Category to None, Series Name to Field Value, Series to Region, and Value to Sales_Volume.

(3) Bind the bar chart component to the ds2 dataset, which contains the parameter $area, and set Category to Region, Series Name to Field Value, Series to Product, and Value to Sales_Volume, as shown in the following figure.

Table 1

(1) Select Table 1 on the canvas, and choose Content > Edit Component on the right configuration panel to enter the component editing page, as shown in the following figure.

(2) Enter text in cells A1 and B1, drag the Region and Sales_Volume fields from the ds1 dataset into cells A2 and B2 respectively, and customize the font and style as required, as shown in the following figure.

(3) Select cell B2 where the Sale_Volume field resides, set Data Setting to Summary, and select Sum, as shown in the following figure.

(4) Merge some cells, as shown in the following figure.

(5) Insert a pie chart into the merged cells, as shown in the following figure.

(6) Bind the pie chart component to the ds1 dataset, which does not contain parameters, and set Category to None, Series Name to Field Value, Series to Region, and Value to Sales_Volume, as shown in the following figure.

(7) Set the pie chart's title and legend to be invisible, and select Use Label to display Series, making it easier to visually identify the pie chart series, as shown in the following figure.

(8) Click Return to FineVis Visualization Dashboard in the upper left corner to return to the dashboard after the configuration is complete.

Table 2

(1) Select Table 2 on the canvas, and choose Content > Edit Component on the right configuration panel to enter the table editing page, as shown in the following figure.

(2) Enter text in cells A1 to C1, drag the Region, Product, and Sales_Volume fields from the ds2 dataset into cells A2 to C2 respectively, and customize the font and style as required, as shown in the following figure.

(3) Select cell C2 where the Sale_Volume field resides, set Data Setting to Summary, and select Sum, as shown in the following figure.

(4) Click Return to FineVis Visualization Dashboard in the upper left corner to return to the dashboard after the configuration is complete.

Setting Component Linkage

Pie Chart

(1) Select the pie chart component on the canvas and choose Interaction > Interaction Event > Add Event > Click in the right configuration panel, as shown in the following figure.

(2) Add a Component Linkage execution action, and configure Action Name, Scope, and Object.

(3) In the Parameter Setting window, add a parameter area, and set Parameter Name to area, Parameter Type to Component Field, and Parameter Content to Series Name. In this way, when you click a series in the pie chart, the series name will be passed as the value of the parameter area to the selected linkage object, achieving a dynamic linkage effect, as shown in the following figure.

Table 1

(1) Select Table 1 on the canvas, and choose Content > Edit Component on the right configuration panel to enter the component editing page.

(2) Select cell A2 where the Region field resides, click Hyperlink on the right, and add an Object on Current Page link.

(3) In the pop-up settings box, set Object on Current Page to Bar Chart, add a parameter, set Parameter to area, and Parameter Value to Formula, and enter $$$, which indicates the current cell value. After completing the settings, click the blank area outside the settings box to close the page, as shown in the following figure.

Note:

When setting a hyperlink for the first time, the cell font color will change. After completing the settings, you can restore the font color to the original color. The font color will not change during subsequent hyperlink modifications.

(4) Similarly, add another Object on Current Page hyperlink to cell A2.

(5) Set Object on Current Page to Table 2, add a parameter, set Parameter to area, and Parameter Value to Formula, and enter $$$, as shown in the following figure.

(6) Double-click the hyperlink names in the list and rename them Link to the Bar Chart and Link to Table 2, respectively, as shown in the following figure.

(7) To set hyperlinks for a chart inserted into cells, select the chart and configure hyperlinks under Cell Element > Special Effect > Interaction > Add Hyperlink, instead of under Hyperlink > Add Hyperlink.

(8) The hyperlink settings are the same as above, but the parameter value must be selected based on the actual situation. In this example, since you want to click the series of the pie chart for component linkage, the parameter value must be set to SERIES, as shown in the following figure.

(9) Click Return to FineVis Visualization Dashboard in the upper left corner to return to the dashboard after the configuration is complete.

Effect Preview

PC

Save the template and click Preview. The effect is the same as that shown in section "Application Scenario."

Mobile Terminal

For details about the preview method, see FVS Template Preview and Mounting. The following figure shows the effect.

Download the completed template by clicking Component Linkage by Click in FVS.fvs.