FVS Component Linkage and Animation 

If you have installed the FineVis Data Visualization plugin, you can learn functions related to the FVS template with this document.

Version

Function Description

The application scenario of the template: the sales manager of a certain company reports the annual performance to the senior leadership. He begins by introducing the nationwide business, focusing primarily on four dimensions: profit, sales revenue, collection amount, and taxes. Then, he clicks a key province on the map to drill down the data of that province for presenting the business. He provides detailed information mainly from dimensions such as regional target achievement rate, regional sales revenue, and profit.

This document mainly introduces the implementation process of parameter transferring by clicking the map components and cross-page component animation in the template.

Expected Effect

In the template, component animation is set to follow the page switching, with components entering from and exiting in all four directions.

The map in the template is linked to tables, charts, and titles. When you click a city on the map, the second page appears, and the tables, charts, and titles on the second page display the data of that city.

The following figure shows the effect.

Taking Jiangsu Province as an example, click Jiangsu Province on the map on the first page. Then the second page appears and displays the data of Jiangsu Province.

Component animation is set to follow the first and second pages, with components entering from and exiting in all four directions.

Explanation: A test template is used to clarify the template creating method.

Data Preparation

Create a FVS visualization dashboard. Prepare two datasets ds1 and ds2.

ds1: SELECT * FROM Map

ds2: SELECT * FROM Map where 1=1 ${if(len(province) = 0 || province=='China'," and pid is null","and pid='"+province+"'")} order by Profit_amount desc

The ds2 dataset defines the parameter province. If the value of province is null or China, then the summarized data of province will be retrieved and sorted in descending order by Profit_amount. If the value of province is not null, then province will be matched by the value of the pid field. After that, the data of each city in province will be retrieved and sorted in descending order by Profit_amount.

Component Preparation

Page 1: Drag the Area Map component into the canvas. Bind the component to the dataset ds1.

Page 2: Drag the Column Chart, Title, and Table components into the canvas. The Column Chart and Title components are bound to the dataset ds2. The Table component is bound to the dataset ds1. For the detailed procedure, see section "Setting the Parameter Transferring."

Parameter Transferring Settings

1. Map Setting

Select the map component in the canvas. Click the Interaction tab. Select Page Jump and Component Linkage from the drop-down list of Add Click Event.

Select the drilled-down page from the drop-down box of Trigger Target.

Set Scope of the parameter $province to Global. Set the value of $province to Area Name of the map component.

2. Table Setting

Go to Page 2. Click the table component in the canvas. Click Edit Component. The following figure shows the effect.

To link to the map component, multiple cells need to add filter conditions. The following table shows specific settings.

Cell	Cell Content	Filter Condition  (Double-Clicking the Cell to Set)	Description
A2	ds1.G(Provinces)	(Column Name:Provinces) is equal to  F(x): if(len($province) = 0 || $province = "China",  ds1.select(Provinces, len(pid) = 0), ds1.select(Provinces, pid = $province)).	When the value of province is null or equal to China, the Provinces data of which the  value of the pid field is null will be retrieved  from the dataset ds1. Otherwise, the data will be displayed according to the parameter  province.
B2	ds1.Sum(Sales_volume)	(Column Name:Provinces) is equal to the cell A2.	The B2 cell cannot display data based on the A2 cell, so a filter condition is set to make the B2 cell display data according to the A2 cell. Note: The left parent cell of the C2 cell needs to be set to the B2 cell.

Taking the A2 cell as an example, double-click the cell A2 to bring up the Data Column setting box. The following figure shows the setting steps.

3. Title Setting

Insert the formula: if(len($province) = 0 || $province = "China", "National Data", $province + "Sales Data").

This formula indicates that when the value of the parameter province is null or equal to China, the title displays the name National Data, and when the parameter value is not null, the title displays the corresponding province and sales data.

4. Column Chart Setting

No additional settings are required for the column chart. Just bind the column chart to the dataset ds2.

Component Animation Setting

Take the Area Map component as an example. Click Animation > Animation Setting. Set Entrance Effect to Fly from Right. Set Exit Effect to Exit to Left.

Effect Display

By following the above steps, you can achieve the effect of a complete template. Besides, you can use the FVS built-in material as the background material.

You can download the test template: FVS Map Parameter Transferring.fvs.