This article describes how to add a Date/Time Range Picker control to a page during the page design process. For details on how to use the Date/Time Range Picker during run time, see: Using Time Pickers.
Overview
The Date/Time Range Picker provides 2 date/time pickers, and lets the user select two different date/times. These are usually used to provide a start time and end time for other controls on the page, such as a chart or trend.
The user can select the start time to be a specific date or time, or they can specify a duration that precedes the end time (e.g. 12 hours from the end time).
The user can specify the end time as a specific date and time, or select the current date and time (i.e. "Now").
The following diagram shows a Date/Time Range Picker control being configured:
| Start Date/Time: | The start of the time range that is initially displayed when the page first loads. This is displayed on the left. This must be created as an event with a type of Datetime. By default, this event is called startTime. You can choose a date and time using the date picker. |
| End Date/Time: | The end of the time range that is initially displayed when the page first loads. This is displayed on the right. This must also be created as an event with a type of Datetime. By default, this event is called endTime. |
Tutorial
The Date/Time Range Picker is a useful control that enables users to change the type of data that is returned to other controls on a page.
In this tutorial, we'll look at adding a Date/Time Range Picker that will change what is displayed on a chart as the user selects different times.
Let's go through this process, step-by-step.
Step by Step: Creating a Time Menu that Drives a Line Chart
Before you start, open a new tab in Explorer and click the “Create a New Page in Studio Mode” thumbnail. Choose the grid layout - you can adjust the rows and columns if you like but it's not important for this exercise.
If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.
Step 1. Add the Date/Time Range Picker to the page
Drag and drop the Date/Time Range Picker component onto a grid cell.
Step 2. Configure the Date/Time Range Picker
By default, the Date/Time Range Picker uses events to configure all its options. In fact, you'll notice that the events all come preconfigured with event names. This is because these events are so often used, and by other controls on the page, that it's often unnecessary to bother changing the names. It's best to leave the names as is, but you can change them if you want. If you do change them, you'll need to remember this for the next steps.
Step 3. Create the events
This step provides the hooks for the Date/Time Range Picker to send and receive signals to and from other controls on the page.
- Click the Set Defaults button on the far right side of the Studio toolbar.
- Create an event called "startTime" with a Datetime set to 1 February 2015 12:00:00 AM.
- Create an event called "endTime" with a Datetime set to 16 February 2015 12:00:00 AM.
- Create an event called "tags" with a Text value set to:
(SeriesExp(Sin(Integer(Time()))) * 100) + (SeriesExp(Random()) - 50),(SeriesExp(Sin(Integer(Time()))) * 100) + {DecimalTag},SeriesExp(Sin(Integer(Time()))) * 100
The Tags event is what we will use to retrieve time series data in the next step.
- You can create an event at any time. In creating these events, we make them available not only to the Time Menu but also to any other controls we may want to place on the page.
Step 4. Add and Configure Data
Date/Time Range Pickers don't normally do anything by themselves - you use them to drive other components. Ultimately, we want the Date/Time Range Picker to change the returned data depending on what dates the user selects. Let's add some data that we will use to return data to a chart. Add a model and configure it as follows:
- Name: Time Series Data
- Using: Tags
- Tags: (Event) tags
- Group By: None
Remember that we created the tags event in the previous step. This is the tag that will be plotted on the line chart in the next step.
- You can leave the parameters with their default values. We have 2 parameters that can listen to events published by the Time Menu: StartTime and EndTime. This is what ultimately causes the chart to change when the user selects different dates.
Step 5. Add and configure a chart
Let's add a chart that will make use of the Date/Time Range Picker. Drag and drop a Chart onto another cell on the page. Configure the chart as follows:
- Source Data: Time Series Data
- For the chart series:
- Type: Line series
- Y Field: (Text) Value
- Name Field: (Text) Tag
- Colour: (Text) (leave this blank)
- For the X Axis:
- Field: (Text) Timestamp
- Data Type: Time
Step 6. All done!
Great work! You now have a fully functioning Date/Time Range Picker that drives a time series line chart.
- Click the preview
button on the Studio toolbar to see what your page will look like in run-time. - When the Date/Time Range Picker first loads, the chart displays data for the corresponding default date.
- Change the Start Time and see how the chart changes to display the related data.
Don't forget to save your page!