First FVS Template

This document is applicable to users who have installed the FineVis Data Visualization plugin to learn relevant functions of FVS templates.

For details about plugin installation and configuration requirements, see FVS Installation and Configuration Requirements.

Version

Expected Effect

This document briefly introduces how to create an FVS dashboard with the component linkage and indicator card effects, as shown in the following figure.

• Component linkage: The bar chart, column chart, and table display the corresponding data within corresponding titles when you click different regional data in the pie chart or map.

• Indicator card: Summary data is displayed through the Rich Text component.

Template Creation

Choose File (in the designer top left corner) > New FineVis Visualization Dashboard > Create a Blank Dashboard, name the template as The First FVS Dashboard, select the default size, and click Create Dashboard.

Data Preparation

Create two database queries and enter the SQL query statements, as shown in the following figure.

Choose the + icon > Database Query, set Name to ds1, and enter the statement SELECT * FROM Sales_Volume to retrieve all data from the table Sales.

Repeat the above step, set Name to ds2, and enter the statement SELECT * FROM Sales_Volume ${if(len(area) == 0,"","where Region = '" + area + "'")} to retrieve data of corresponding regions from the table Sales based on the parameter area. If the parameter is empty, all data is retrieved.

Template Setting

Pie Chart Setting

Add a pie chart, click Content on the right, set Dataset to ds1, Series to Region, Value to Sales_Volume, and Summary to Sum, and modify the pie chart style as needed.

Add a title component with the content as Sales by region above the pie chart.

Column Chart Setting

Add a column chart, click Content, and set Dataset to ds2, Category to Region, Series to Product, Value to Sales_Volume, and Summary to Sum to display the product sales of different regions based on the parameter area.

Add a title component above the column chart, click fx in Content, and enter the formula $area+"Sales by product". Note: Add an equals sign (=) in front of the formula if you directly enter texts in the text entering box.

Bar Chart Setting

Add a bar chart, click Content, and set Dataset to ds2, Category to Salesperson, Series Name to Field Name, Field Name and Series to Sales_Volume, and Summary to Sum to display the sales volume of salespersons in different regions based on the parameter area.

Copy and paste the title component of the column chart by pressing ctrl+C and ctrl+V, and modify the text in the formula.

Table Setting

Add a table and click Edit Component to go to the table edit page.

Enter the table headers in the first row, drag the corresponding fields from the ds2 dataset into the corresponding cells, and set Data Setting of the Sales field to Summary and Sum. After completion, adjust the font size and cell style as needed.

After completion, click Return to FineVis Visualization Dashboard to return to the canvas, adjust the table size, and set Adaptation to Horizontally and Vertically.

After completion, set another title component through quick copy and paste (namely, directly drag the title component of the column chart by holding down the alt/option key) and modify the formula.

Map Setting

Add an area map and set Map Boundary to Southeast Asia and GIS Layer to Standard > Null.

Click Data, set Dataset to ds1, Area Name to Region, Series Name to Field Name, Field Name and Series to Sales_Volume, and Summary to Sum, and modify the map style as needed.

Rich Text Setting

Add a rich text component and enter texts and formulas to obtain summary data, achieving the indicator card effect.

Retrieve dataset data through the function Value. Click the Preview icon on the left to check the column numbers (1 and 5) of the fields Region and Sales in the dataset ds1, and enter the formula sum(VALUE("ds1",5,1,"Indonesia")) to obtain the total sales of Indonesia.

After completion, set another rich text component through quick copy and paste (namely, directly drag the rich text component by holding down the alt/option key) and modify the formula.

Interaction Event Setting

To achieve the final effect, you need to set interaction events for the pie chart and the map respectively. Select the pie chart, choose Interaction > Click on the right configuration panel, click Add Click Event, and select Component Linkage.

In the popup setting box, set Event Name to Linkage, Scope to Global, Parameter Name to area, Parameter Type to Component Field, and Value to Series Name. The linkage setting method of the map is the same with that of the pie chart, except setting Event Name to Region and Value to Area Name.

Saving and Preview

Click Save or Preview in the upper right corner of the template to save the template. If you save the template for the first time, you need to set the storage location. After completion, preview the template and click the pie chart or the map to view the data linkage effect.

Template Beautification

Component Alignment

You can align components through guides. Add red dashed guides (occurs when you hover the cursor over the ruler at the top and left of the canvas) to desired locations.

Add multiple guides and move components near the edge of the guides, which can automatically snap components. Double-click the guides to delete them after completion. They are always displayed on the canvas if not deleted, but not displayed during preview.

Component Name Modification

Modify component names by double-click in Widget Layer or in the component configuration area.

Resource Reuse

FVS has many built-in images and videos that can be used for the component border background, the page background, image components, and video components. Take an image resource as an example to beautify the page background here.

Click the page area, set Background to My Resource in Page, select a background as needed, and click Finish. After completion, set Filling Method and Hue.

Component Animation

Component animations allow components to have special effects every time the template is loaded or pages are switched. Take Entrance Effect as an example since the example template only has one page.

Select the map, click the edit icon, and set Entrance Effect to Fly from Bottom. Select the pie chart and the bar chart together to group them, click the edit icon, and set Entrance Effect to Fly from Right.

Save the template and reload the previewed template in the browser to view the animation effects.

Click to download the template: The First FVS Dashboard.fvs.