FVS Date Time Widget

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

Version

Function Description

When previewing the template, you can select the date in the date time widget which can be linked to other components by parameters. 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. 

Widget Content

Content

The following figure shows the settings on the Content tab page of a date time widget.

The following table describes these settings.

Setting Item	Introduction
Format	Six types are available for the date time format, and each type can be displayed in multiple styles which can be entered manually. Note:  Year-Quarter and Year formats are newly added in V3.3.0.
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. Binding an existing parameter is supported. You can also enter a new value to create a parameter.
Default Value	You can set the default value of the date time, and the following three 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.
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.
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

1. The content style varies by the date time format.

Note:

 In V2.2.1 and earlier versions, you can only set the font style for the 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.

2. When you select Y-M-D as the Format value, you can set the style template on mobile terminals. The settings for the other three formats are the same on the mobile terminal and PC.

Note:

 You are advised to select Normal Calendar and Week View Calendar after Mobile Layout is enabled. When Mobile Layout is not enabled, the visible range of the calendar expansion is determined by the component size.

Widget Interaction Event

You can choose Interaction > Add Event, and add a JavaScript event to achieve more effects. After Initialization and Edit End events can be added in the date time 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: 

For details, see JS Events Supported by FVS Dashboard.

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.

Title Component Adding

Choose Text > Title in the component area to add a title component to the page. Set Title Content to Start Time on the right configuration panel. Copy the title component and paste it into the page. Set the title content to End Time for the new title component, as shown in the following figure.

Data Time Widget Adding

Choose Widget > Date Time in the component area to add a data time widget to the page.

Set Bound Parameter to starttime to match the dataset parameter starttime on the right configuration panel. Select 2011-05-22 as the date time with Custom Date Time selected as Default Value.

Copy the date time widget, and paste it into the page. Set Bound Parameter to endtime to match the dataset parameter endtime for the new widget. Select 2011-06-22 as the date time with Custom Date Time selected as Default Value.

The following figure shows the steps.

Line Chart Component 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.

For details, you can download the template Date Time Widget.fvs