Overview
This document is applicable to users who have installed the FineVis Data Visualization plugin to learn plugin functions.
Version
| Report Server Version | Plugin Version | Functional Change |
|---|---|---|
11.0.6 | V1.x | |
11.0.16 | V2.0.0 | Displayed the Select All button by default during the preview in historical versions. Added a configuration item, which allowed you to determine whether to display the Select All button or not. |
11.0.16 | V2.0.1 | Added Content Style for widget setting. For details, see section "Content Style." |
11.0.22 | V2.8.0 | Separated parameters from widget names, and added a new logic for parameter binding. For details, see section "Content." |
11.0.22 | V2.10.0 | Combined the radio button group widget and the checkbox group widget into the button group widget, which is moved to Widget > List. |
Function Introduction
The button group widget supports component linkage through parameters by selecting different options during the template preview. The following figure shows the effect.
For details about the component animation, see FVS Cross-page Component Animation.
For details about the component style, see FVS Component Style and Attribute.
Function Description
Widget Content
The following figure shows the setting items on the Content tab page of a button group widget.
Content
The following table describes these setting items.
| Setting Item | Description |
|---|---|
Bound Parameter | The value is a parameter name, which is used to bind a parameter to the widget. The value is empty by default, and you need to set this parameter based on the actual parameter to be bound. Binding an existing parameter is supported. You can also enter a new value to create a parameter. |
Option Source | Option Source allows you to bind the options to the widget. It is mandatory, otherwise, the widget will not display any options. For details, see Data Dictionary. |
If you select Remove Duplicates, the duplicate options in the drop-down list will be merged. Otherwise, the duplicate options will be retained. Remove Duplicates is selected by default. | |
Option | If Multiselect is selected, the buttons will be displayed as checkboxes for multiple selections. Otherwise, the buttons will be displayed as radio buttons for a single selection. Multiselect is deselected by default. |
Support Select All is available only after Multiselect is selected, and it is selected by default. After Support Select All is selected, you can select all options by clicking the Select All button. | |
Returned Value | Array: The returned value is an array. For example, if you select three values, the returned value will be [value 1,value 2,value 3]. |
String: The returned value is a string, and you need to define Separator, Starter, and Terminator. That is to say, multiple selected values are concatenated into a single string through the separator. For example, if the separator is defined as a comma (,) and the starter and terminator symbols are both defined as single quotation marks ('), the returned value will be 'value1,value2,value3'.
| |
Default Value | You can set the default selected options in the button group widget in the following three ways. 1. Custom String: You can enter the text directly. If you enter multiple values, multiple options will be selected by default. When you enter multiple values, the format needs to be the same as that of the returned value of the widget. If the format of the returned value is not modified, use commas (,) to separate each value. Example: East China,North China.
2. Field: You can select the field in the dataset. If multiple values exist in the selected field, multiple options will be selected by default.
3. Formula: You can click fx on the right to enter the formula. If the formula corresponds to multiple values, multiple options will be selected by default.
|
Permission | It is used to set whether the widget is editable during the initial page preview. Allow Edit is selected by default. |
Validation | Null Value Validation is used to set whether the value of the widget is allowed to be null. If you select Allow Null, you can deselect all options. If you do not select Allow Null, you can set Validation Prompt, which is displayed during the template preview. Allow Null is selected by default. |
Content Style
1. Radio button
Four style templates are available for radio buttons: Default, Capsule Button, Inline Button, and Graphic Button. The setting items of Content Style vary with the selected style template.
| Style Template | Other Setting Items |
|---|---|
Default | You can set Layout Mode and Font Style for the options. Three layout modes are available:
|
Capsule Button | You can set Layout Mode, Font Style, Button Style, and Rounded Corner. Three layout modes are available: Auto Fill, Fixed Column Quantity, and Fixed Row Quantity.
|
Inline Button | You can set Layout Mode, Font Style, Button Style, and Rounded Corner. Two layout modes are available: Natural and Equal. Filling by column/row is not supported.
|
Graphic Button | You can set Layout Mode, Font Style, and Button Style. Three layout modes are available: Auto Fill, Fixed Column Quantity, and Fixed Row Quantity. The display logic of Button Icon in Button Style should be noted:
|
2. Checkbox
Two style templates are available for checkboxes: Default, and Capsule Button.
| Style Template | Other Setting Items |
|---|---|
Default | You can set Layout Mode and Font Style for the options. Three layout modes are available:
|
Capsule Button | You can set Layout Mode, Font Style, Button Style, and Rounded Corner. Three layout modes are available: Auto Fill, Fixed Column Quantity, and Fixed Row Quantity.
|
Widget Interaction Event
Choose Interaction > Add Event to add a JavaScript event to achieve more effects. The button group widget supports two types of interaction events: After Initialization and Edit End, as shown in the following figure.
The corresponding JavaScript event setting box will pop up after you click one of the events, as shown in the following figure.
Note: For details about the JavaScript events supported by the FVS dashboard, see JS Events Supported by FVS Dashboard.
Example
Template Preparation
1. Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer.
2. Create a database query named ds1, input the SQL query statement SELECT * FROM Sales_Volume where Salesperson in ('${spe}'), and set the default value of the parameter spe to Mike, which means extracting sales data of the salesperson Mike by default, as shown in the following figure.
Adding a Button Group Widget
1. Choose Widget > List > Button Group in the component area, and drag the widget into the canvas.
On the right Content configuration panel, set Bound Parameter to spe to match the widget with the parameter spe defined in the dataset, as shown in the following figure.
2. Click the button to open the Option Source setting box, and bind the option source to the widget. Select Database Table from the drop-down list of Type Setting, select FRDemo from the drop-down list of Database, select Sales_Volume from the drop-down list of Database Table, and set Column Name of Actual Value and Display Value to Salesperson, as shown in the following figure.
Set the default value to Mike, as shown in the following figure.
3. If you want to set the buttons as checkboxes, you need to select Multiselect.
To match the SQL IN statement, you need to set Returned Value of the widget to String and enter the ',' in Separator.
After setting the separator, set Default Value. The values must maintain the same format. For example, the multiple default values to be set in this example need to be separated by the separator ',', and you need to enter Mike','John, as shown in the following figure.
Set Layout Mode as needed.
Adding a Line Chart
Click Line on the Chart tab page to add a line chart component to the canvas. Bind data with the spe parameter in the dataset to the line chart, as shown in the following figure.
Effect Display
PC
Click Save in the upper right corner of the template, and click Preview.
When the button group is set to the radio button group, the line chart displays the sales volume of the corresponding salesperson, as shown in the following figure.
When the button group is set to the checkbox group, the line chart displays the sales volume of the corresponding salespersons.
Mobile Terminal
For details about the template preview method, see Preview on Mobile Terminal.
The following figure shows the effects of the radio button group widget.
The following figure shows the effects of the checkbox group widget.
Template Download
For details, you can download the template: FVS Button Group Widget Example.fvs.
