Creation Methods for Tree Widgets

In the FineVis Data Visualization plugin V1.17.1, the Dropdown Tree and Tree View widgets were added. The two widgets are defined in the same way but displayed differently in the browser preview, as shown in the following figure.

This document describes the differences and applications of the three methods for creating a tree. The examples use the Dropdown Tree widget, and you can configure the Tree View widget in the same way.

1. Automatic Creation

This method automatically creates a dropdown tree from the hierarchy of a tree dataset, with no need to define data layer by layer.

2. Basic Layered Creation

This method requires you to define a dropdown tree layer by layer through Option Source and define layer parameters in datasets, so that the value of the previous layer can be passed to the parameter in the next layer to filter data.

For Basic Layered Creation, you can select Performance First to improve loading efficiency. This option is deselected by default.

When this option is selected, a layer with no child nodes still displays the icon, but expands to an empty list.

3. Fast Layered Creation

This method defines the hierarchy of a dropdown tree through Dataset. Unlike Basic Layered Creation, it arranges data by hierarchy level instead of using layer parameters, and you only need to bind a data column and configure Dependent Layer and Dependent Field for each layer.

4. The following table provides a detailed comparison.

After converting a common dataset to a tree dataset, you can select the tree dataset directly in the Dropdown Tree widget to automatically create the tree hierarchy. The tree dataset must have an explicit parent-child relationship, as shown in the following figure.

When creating a tree, ensure that no cycle exists in the data. Otherwise, tree creation will fail, and the following error will be logged: "Tree widget creation failed. A cycle exists in the data of the original identifier field."

Data Preparation

Prepare a table that can construct a tree dataset. In this example, the CorporationDepartment table in the built-in FRDemo database is used.

Note: 

For details about table requirements for constructing tree datasets, see Tree Dataset Integrity Check.

Create an FVS dashboard and a Database Query dataset ds1 with the SQL statement SELECT * FROM CorporationDepartment. The following figure shows the table structure.

Table analysis:

• The first row indicates that the identifier of Headquarter is 1, and its parent identifier is empty. This means Headquarter is the root department with no parent department. As a general rule, the parent identifier of a root department is left empty.

• The second row indicates that the original identifier of Human resources department is 11, and its parent identifier is 1. You can use this identifier to look up the parent department, which is Headquarter in this example.

The system goes through this dataset row by row. For each row, it matches the SuperiorID value against the DepartmentID field to locate the parent row, and then reads the corresponding department name from the Department_name field in that matched row. In this way, the parent-child relationships are established.

Note: 

Every value in SuperiorID (except empty ones) must have a matching value in DepartmentID. In the preceding figure, all SuperiorID values have matching values in DepartmentID.

Tree Dataset Creation

Create a tree dataset Tree with ds1, as shown in the following figure.

Drop-Down Tree Widget Design

Effect Preview

Click Preview. The following figure shows the effect.

Basic Layered Creation requires you to bind a different dataset to each layer on the Option Source editing page. It is essentially dynamic SQL in FineReport. You need to define each SQL statement as an individual dataset.

In Basic Layered Creation, layers are defined as follows:

1. Layer 1: You need to define the actual value and display value of the drop-down box through Option Source.

2. Layer 2: You need to define a dataset with a data query that returns the required column, filtered by the value of the layer1 parameter. SELECT Field FROM Table WHERE Layer 1 field = '${layer1}'

Note:

1. layer1 represents the value of layer 1. Each layer references the value of the previous layer through the corresponding layer parameter. For example, the SQL statement for layer 3 is SELECT Field FROM Table WHERE Layer 2 field = '${layer2}'. layer1, layer2, and other layer parameters are fixed system parameters that cannot be changed.

2. The layer parameters can be used only for tree creation, not for parameter filtering.

Data Preparation

Create an FVS dashboard and three datasets with the following SQL statements:

ds1: SELECT Owner_region FROM SOrder WHERE Owner_region!=''. This statement queries all regions.

ds2: SELECT Owner_country FROM SOrder where Owner_country!='' and Owner_region='${layer1}'. This statement queries shipper countries based on the value of layer1.

ds3: SELECT Owner_city FROM SOrder where Owner_city!='' and Owner_region = '${layer1}'and Owner_country='${layer2}'This statement queries shipper cities based on the values of layer1 and layer2.

Drop-down Tree Widget Design

1. Add a Dropdown Tree widget to the canvas, click the icon to open the Tree Creation setting window, set Creation Method to Basic Layered Creation, and click the icon to add a layer, as shown in the following figure.

2. Select a layer, and select the corresponding dataset as its data source: ds1 for layer 1, ds2 for layer 2, and ds3 for layer 3, as shown in the following figure.

Effect Preview

Click Preview. The following figure shows the effect.

Data Preparation

Create an FVS dashboard and a dataset with the SQL statement: SELECT Owner_region,Owner_country,Owner_city FROM SOrder WHERE Owner_region!=''. The following figure shows the table structure.

Drop-down Tree Widget Design

1. Add a Dropdown Tree widget to the canvas, click the icon to open the Tree Creation setting window. Creation Method defaults to Fast Layered Creation. Click the icon to add a layer, as shown in the following figure.

2. Set corresponding Actual Value, Display Value, Dependent Layer, and Dependent Field for each layer, as shown in the following figure.

• Layer 1:

• Layer 2:

• Layer 3:

Effect Preview

Click Preview. The following figure shows the effect.

For details, you can download the example templates:

Dropdown Tree_Fast Layered Creation.fvs

Dropdown Tree_Automatic Creation.fvs

Dropdown Tree_Basic Layered Creation.fvs