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 | / |
V11.0.16 | V2.0.1 | Added the Content Style setting to the widget. For details, see "Content Style." |
11.0.22 | V2.5.1 | Added the deletion icon to Graphic in Button Style. For details, see "Content Style." |
Function Description
The radio button group widget supports component linkage by selecting different options during the template preview. The following figure shows the effect.
Note:For details about the component animation, see FVS Cross-page Component Animation.
For details about the component style, see FVS Component Style and Attribute. The widget name can be set in Content.
Function Introduction
Widget Content
The following figure shows the setting items on the Content tab page of a radio button group widget.
1. Content
The following table describes these settings.
Setting Item | Description |
Name | It refers to the widget name, namely the parameter name, with the default name in English. You need to modify the name according to the actual parameter. |
Data Dictionary | It is used to bind the selectable options with the widget. The data dictionary must be set, otherwise the widget will not display any options. For details about how to set the data dictionary, see Data Dictionary. |
If you enable Remove Duplicates, the duplicate options in the drop-down list of a widget will be merged. If you disable the function, the duplicate options will be retained. The function is enabled by default. | |
Default Value | It is used to set the default option selected by the widget. The function includes three value types: 1. Custom String: You can directly enter text.
2. Field: You can select a field in a dataset. Only the first value in the array sequence will be fetched if the return value is an array.
3. Formula: You can click the
|
Permission | It is used to set whether the widget is editable during the initial preview of the page. Edit is ticked by default. |
Validation | It is used to set whether the widget value is allowed to be null. If you enable Allow Null, the widget can have no button selected. If you do not enable the function, you can set Validation Prompt, which is displayed during the page preview. The function is enabled by default. |
2. Content Style
The setting items of the content style vary according to the different style templates. You can select four styles for the button: Default, Capsule, Button, and Graphic.
1. Default: You can set Layout and Font Style.
You can select three layout modes for the button.
Auto Fill: The number of rows and columns will be automatically adjusted according to the content of the options.
Fixed Column: The content of the options can be set to display in X columns, with 1 as the default value.
Fixed Row: The content of the options can be set to display in X rows, with 1 as the default value.
The following figure shows the effect.
2. Capsule: You can set Layout, Font Style, Button Style, and Rounded Corner.
There are three layout modes you can select for the button: Auto Fill, Fixed Column, and Fixed Row.
The following figure shows the effect.
3. Button: You can set Layout, Font Style, Button Style, and Rounded Corner.
There are two layout modes you can select for the button: Proportional and Equal. Filling by column or by row is not supported.
The following figure shows the effect.
4. Graphic: You can set Layout, Font Style and Button Style.
There are three layout modes you can select for the button: Auto Fill, Fixed Column, and Fixed Row.
Note:The display logic of Button Icon in Button Style is as below.
1. The button icons correspond to the options, arranged from left to right and top to bottom.
2. You can click the icon to choose icon resources, which support None, My Resource, Custom Upload, and Online Picture.
3. Multiple icon adding is supported. You can hover the cursor over the icon and click the deletion button in the upper right corner to delete the icon. Deletion is not supported in versions before V2.5.1.
4. If the number of icons is more than that of options, the excess icons will not be displayed. If the number of icons is less than that of options, or if the icon resource is missing, a blank icon will be displayed.
The following figure shows the effect.
Widget Interaction Event
Choose Interaction > Add Event to add JavaScript events to achieve more effects. The radio button group supports two events: After Initialization and Click Event.
Click a certain event. Then the JavaScript event setting box pops up.
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 WHERE Region='${region}', and set the default value of the parameter region to North America, which means extracting sales data of the North America region by default.
Adding a Button Group Widget
1. Choose Widget > Button Group in the left component sidebar, and drag the widget into the canvas.
On the right configuration panel of Content, set the widget name to region to match the defined parameter region in the dataset.
2. Click the button to enter the Data Dictionary setting interface to bind the widget with the data dictionary. Select Database Table from the drop-down list of Type Setting, select FRDemo from the drop-down list of Database, select Sales from the drop-down list of Database Table, and set the Column Name of Actual Value and Display Value to Region. Set Default Value to Custom String and enter North America in the input box below.
Adding a Column Chart
Click the Chart icon in the component area and click Column Chart to add the column chart component to the page. Bind data with the region parameter in the dataset to the column chart, as shown in the following figure.
Effect Display
1. On PC
Click Save in the upper-right corner of the page and click Preview to view the effect. When you tick different buttons, the bar chart will display the sales volume of the corresponding region. The effect is shown in section "Function Description."
2. On Mobile Terminals
For details, see FVS Mobile Attribute. The dashboard is shown in the following figure.
Template Download
You can download the template: FVS Radio Button Group Widget Example.fvs
