Data Linkage During FVS Tab Switchover

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

Version 

Expected Effect 

You may want the table data to change with the tab page when you are creating a dashboard, as shown in the following figure. 

Implementation Method 

Get the title index of a tab page through JS, determine the parameter value corresponding to the index value, and then refresh the component by passing the parameter through the refresh interface to achieve the linkage.

Data Preparation 

Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer, and create a blank dashboard. Create a database query ds1, and enter the following SQL statement.

SELECT * FROM Map

Designing a Tab Component 

Add a Tab component and then add two more tab pages. Drag an area map into each tab. 

Select each map in the right Tab List, set Map Boundary to Jiangsu, Shandong, and Zhejiang respectively, and set GIS Layer to Standard > Mapbox, as shown in the following figure.

Note:

This article mainly demonstrates the linkage between the table data and tab pages, so binding data to the map is unnecessary.

Rename the tab pages as Jiangsu, Shandong, and Zhejiang, and then set Layout of Tab Page Button to Equal, as shown in the following figure.

Adding a Template Parameter 

To achieve linkage, you need to add a template parameter.

Choose Template Parameter from the dropdown list of Template, add a parameter, rename it as area, and set the default value as Jiangsu, corresponding to the map boundary of the first tab page.

Designing a Table 

Drag a table component into the canvas, and adjust its size and position. Click Edit Component on the right to enter the editing page.  

Drag the pid and Sales_volume fields into A1 and A2 cells respectively, and set the font, size, color, etc.

Select the A2 cell, set Data Setting of Sales_volume to Summary > Sum, and set Left Parent Cell to Custom > A1.

Double-click Cell A1 and set the filtering condition to pid Equal to $area. The data are filtered and displayed based on the parameter. 

Adding an Event 

Select the Tab component, set the carousel interval to 3000 ms, and click Add Tab Switching Event and JavaScript. Enter the following JavaScript codes.

var a  = duchamp.getWidgetByName("Tab1_Page1").getShowIndex(); 
//Get the index of the current tab page.
if(a==0){area='Jiangsu Province';}
else if(a==1){area='Shandong Province';}
else if(a==2){area='Zhejiang Province';}  	
duchamp.getWidgetByName("Table1_Page1").refresh({area:area}); 
//Pass parameters to the table component and refresh it.

Effect Display 

On PC

Click Save in the upper right corner of the template, then click Preview.  The effect is shown in the "Expected Effect" section.

Mobile Terminal

For the preview method, see FVS Template Preview and Mounting. The dashboard is shown in the following figure.

You can download the example template. Data linkage during tab page switchover.fvs