Overview
Version
| Report Server Version | Plugin Version |
|---|---|
| 11.0.22 | V3.3.0 |
Function Description
When previewing the template, you can select different date ranges in a date range widget. You can link other components through parameters to view data in different ranges. The following figure shows the effect.
Function Introduction
Widget Content
Content
The following figure shows the settings on the Content tab page of a data range widget.
The following table describes these settings.
| Setting Item | Introduction |
|---|---|
| Format | Three types are available for the date format, and each type can be displayed in multiple styles which can be entered manually.
|
Bound Parameter | The value is the 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. You can bind parameters to Start Date and End Date, respectively. Binding an existing parameter is supported. You can also enter a new value to create a parameter. |
| Quick Range | You can configure the setting only when Format is set to Y-M-D. You can select more than one from Yesterday, Today, Tomorrow, Last 7 Days, Last 15 Days, Last Month, Last Year, Since Month Start, Since Quarter Start, and Since Year Start in the drop-down list of Quick Range. |
| Default Value | You can configure Start Date and End Date, respectively. The start date must be earlier than the end date. You can set the default value of the date time, and the following four options are available. 1. Custom Date Time: The value is the date time of the day, displayed in the above date format. You can delete the value, and select a new one, or you can enter the needed value manually.
2. Field: You can select a field in a dataset. Only the first value in the array sequence will be displayed if the returned value is an array.
3. Formula: You can click the xxx icon on the right, and enter the formula. Only the first value in the array sequence will be displayed if the returned value is an array.
4. Quick Range: You can configure the quick range in Start Date. When Quick Range is selected, you can select an option from the drop-down list of Quick Range as the default value while the End Date setting is grayed out and cannot be configured.
|
| Returned Value | Date and String are available for the returned value format which should match the type of the date field in the database table. |
| Watermark | Light gray watermark text is displayed in the widget during the preview, serving as a prompt for the required information to be entered. It disappears after you click the widget and enter the text. The input box of Watermark is empty by default. You can set the values of Start Date and End Date, respectively. |
| Date Range | You can set the values of Start Date and End Date. The start date must be earlier than the end date. After the date range is set, data outside the range is grayed out and cannot be selected. The following three settings are available for Start Date and End Date in Data Range: 1. Unlimited: No limitation is on the date range. 2: Custom: You can select Custom to display the date time of the day in the above date format by default. You can delete the value, and select a new one. 3. Formula: You can click the xxx icon on the right, and enter the formula. Only the first value in the array sequence will be displayed if the returned value is an array. |
| 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: It is used to set whether the value in the widget is allowed to be null. If you select Allow Null, the widget allows a null value. 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
You can only set the font style, such as the font, font size, and font color, for Widget Text.
Note:1. The font in the drop-down options is not affected by the style setting. The font style of the drop-down options is only affected by the FVS template style.
2: If you modify the font color, and then set the FVS template style, the font color will change with the theme. You need to reset the color as needed.
Widget Interaction Event
You can choose Interaction > Add Event, and add a JavaScript event to achieve more effects. After Initialization and Edit End events are supported in the date range widget, 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:
Example
Template Preparation
1. Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer.
2. Create a database query ds1, and enter the following SQL statement：
SELECT * FROM Orders where 1=1
${if(len(starttime)=0,""," and Order Date>='"+starttime+"'")}
${if(len(endtime)=0,""," and Order Date<='"+endtime+"'")}
This statement retrieves the data whose order dates are between the start time and end time from the data table Orders, as shown in the following figure.
Data Range Widget Adding
Choose Widget > Data Range in the component area to add a data time widget to the page.
Configure Bound Parameter in the right configuration area.
Bind the dataset parameter starttime to Start Date.
Bind the dataset parameter endtime to End Date.
Select Custom Date Time as Default Value:
Select 2011-05-22 as the start date.
Select 2011-06-22 as the end date.
Line Chart Adding
1. Choose Chart > Line Chart in the component area to add a Line Chart component to the page, and bind the data to the chart, as shown in the following figure.
2. Select the line chart, choose Content > Style > Axis, and set the axis type to Time Axis for X Axis
Effect Display
PC
Click Save in the upper right corner, and click Preview. After you modify the start time or end time, the line chart will display the data within the corresponding time range. The effect is the same as that shown in section "Function Description."
Mobile Terminal
For details about the preview method, see FVS Template Preview and Mounting. The following figure shows the effect.
Template Download
For details, you can download the template Date Range Widget.fvs
Previous：FVS Date Time Widget
