Widget Linkage and Query in FVS

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

Version

Application Scenario

In an FVS visualization dashboard, when there are multiple widgets, the options of a subsequent widget can change according to the value selected for the prior widget. After selecting the corresponding option, the content of other components can change accordingly to display the corresponding data.

The following figure shows the effect: The City options change according to the selected value of Area, the Customer options change according to the selected values of Area and City, and the table automatically displays the corresponding data according to the selected values of Area, City, and Customer.

Implementation Method

Define dataset parameters in a dataset, add widgets to the canvas, and then bind widgets to the data dictionaries with parameters. In this way, data of the subsequent widgets can be filtered based on the selected options of the prior widgets.

Automatic query of table data can be implemented by adding filter conditions to the cells.

Note:

V4.1.0 allows the previous filter value of the linked sub widget to be automatically cleared when you re-select the value of the main widget if the drop-down widgets are linked. After the value of the main widget is switched, the system will automatically clear the currently selected value of the linked sub widget that is not in the post-update options, and retain the selected value that is in the post-update options.

Template Creation

(1) Choose File > New FineVis Visualization Dashboard in the upper left corner of the FineReport designer.

(2) Click Create Blank FVS Dashboard, customize the template name and size, and choose Built-in Style > Dark Blue in Template Style.

(3) Click Create Dashboard.

Data Preparation

Create three database queries with the following SQL query statements.

Order: select OrderDetails_new."Product ID",OrderDetails_new.Price,OrderDetails_new.Amount,OrderDetails_new.PurchasePrice,Orders_new.OrderID,Orders_new.CustomerID,Orders_new.OrderDate,Orders_new.DateShipped,Orders_new.ArrivalDate,Orders_new.Shipper,Orders_new.ShipperCity,Orders_new.ShipperCountry,Orders_new.ShipperName from OrderDetails_new,Orders_new where Orders_new.OrderID=OrderDetails_new."Order ID"

City: select ShipperCity from Orders_new where ShipperCountry='${area}'

Customer: select CustomerID from Orders_new where ShipperCity='${city}' and ShipperCountry='${area}'

The Order dataset mainly associates different data tables; the City dataset defines the area parameter $area, indicating that the city options are obtained according to $area; the Customer dataset defines the city parameter $city and the area parameter $area, indicating that the customer options are obtained according to $area and $city.

Take the Order dataset as an example, as shown in the following figure.

Designing a Visualization Dashboard

(1) Drag four Title components, three Dropdown Box widgets, and one Table component into the canvas, and adjust the component positions, as shown in the following figure.

(2) Set Title Content to Area:, City:, and Customer: respectively for the Title components. The following figure takes the Area title component as an example.

Set Bound Parameter to area, city, and customer, respectively for the Dropdown Box widgets to bind the widgets with the parameters. The following figure takes the area parameter as an example.

Note:

Ensure that the values of Bound Parameter for the Dropdown Box widgets are consistent with the parameter names defined in section "Data Preparation."

(3) Set the option value sources for the three Dropdown Box widgets, as shown in the following table.

Take the area widget as an example. The setting steps are shown in the following figure.

Designing a Table

Setting the Table Style

(1) Select the Title1_Page1_c3 component and set Title Content to Shipper's Order Information, as shown in the following figure.

(2) Select the table component and click Edit Component on the right to go to the table editing page, as shown in the following figure.

(3) Drag OrderID, CustomerID, OrderDate, ShipperName, DateShipped, ArrivalDate, and Price from the Order dataset into cells A2 to G2, and enter the corresponding header information, as shown in the following figure.

Setting Filtering

Since the data in the table and the data bound to the Dropdown Box widgets’ option values do not come from the same dataset, there is no filtering relationship between them. So, you need to manually add filtering conditions to the cells.

Double-click cell A2 where OrderID is located to open the data column settings page, click the Filter tab, and add three filtering conditions connected by AND:

Condition one: ShipperCountry Equal to F(x) if(len($area)== 0,nofilter,$area)

Condition two: ShipperCity Equal to F(x) if(len($city)== 0,nofilter,$city)

Condition three: CustomerID Equal to F(x) if(len($customer)==0,nofilter,$customer)

Note:

1. The parameter $customer can directly reference the values of the customer Dropdown Box widget.

2. In the formula, nofilter means no filtering, that is, when the parameter is empty, all data is displayed without filtering. When the parameter is not empty, the corresponding data is displayed, as shown in the following figure.

Effect Display

PC

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

Mobile Terminal

Adjust components for the mobile terminal and enable the FVS Mobile Layout. For details about the preview method, see FVS Template Preview and Mounting. The following figure shows the effect. 

Download the completed template by clicking Widget Linkage and Query.fvs.