Vision - Date Range
Component Palette Icon:
Description​
The date range component provides an intuitive, drag-and-drop way to select a contiguous range of time. The user is shown a timeline and can drag or stretch the selection box around on the timeline. The selected range is always a whole number of units, where the unit is determined by the current zoom level.
The Start/End dates and Outer Start/End dates will be ignored when the window opens unless the Startup Mode property is set to "None."
Data Density Histogram​
As an advanced optional feature, the date range can display a data density histogram inside the timeline. This is useful for historical data with gaps in it, so that the end user isn't hunting for data. (Tip: this is also great for demos, to make it easy to find historical data in a database that isn't being continuously updated).
To use this feature, bind the Data Density dataset to a query that returns just the timestamps of the target table. These timestamps will be used to fill in the histogram behind the timeline. You can use the Outer Range Start Date and Outer Range End Date properties in your query to limit the overall return size for the query.
Timestamps must be ordered by date (ascending) to display correctly.
Properties​
| Property | Description | Property Type | Scripting | Category |
|---|---|---|---|---|
| Background Color | The background color of the component. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | Color | .background | Appearance |
| Border | The border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border. Note: The border is unaffected by rotation. Changed in 8.1.21 As of 8.1.21, the "Button Border" and "Other Border" options are removed. | Border | .border | Common |
| Box Fill | The fill color for the selection box. | Color | .boxFill | Appearance |
| Cursor | The mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize. | int | .cursorCode | Common |
| Data Density | A dataset that is used to calculate a histogram of data density. | Dataset | .densityData | Data |
| Date Style | The style to display dates in. For international support. | int | .dateStyle | Appearance |
| Editor Background | The background color of the textual date range editor portion of this component. | Color | .editorBackground | Appearance |
| Enabled | If disabled, a component cannot be used. | boolean | .componentEnabled | Common |
| End Date | The ending date of the currently selected range. | Date | .endDate | Data |
| Font | Font of text on this component. | Font | .font | Appearance |
| Foreground Color | The foreground color of the component. | Color | .foreground | Appearance |
| High Density Color | The color used to indicate high data density. See Color Selector. | Color | .highDensityColor | Appearance |
| Max Selection | The maximum size of the selected date range. | String | .maxSelectionSize | Behavior |
| Mouseover Text | The text that is displayed in the tooltip which pops up on mouseover of this component. | String | .toolTipText | Common |
| Name | The name of this component. | String | .name | Common |
| Opaque | If false, backgrounds are not drawn. If true, backgrounds are drawn. | boolean | .opaque | Common |
| Outer Range End | The ending date of the available outer range. | Date | .outerRangeEndDate | Data |
| Outer Range Start | The starting date of the available outer range. | Date | .outerRangeStartDate | Data |
| Quality | The data quality code for any Tag bindings on this component. | QualityCode | .quality | Data |
| Selection Highlight | The focus highlight color for the selection box. See Color Selector. | Color | .selectionHighlight | Appearance |
| Start Date | The starting date of the currently selected range. | Date | .startDate | Data |
| Startup Mode | Controls whether or not this date range automatically assigns itself a starting range based on the current time | int | .startupMode | Behavior |
| Startup Range | If startup mode is Automatic, this will be the starting range of time available for selection. | String | .startupRange | Behavior |
| Startup Selection | If startup mode is Automatic, this will be the starting selected range. | String | .startupSelection | Behavior |
| Styles | Contains the component's styles. | Dataset | .styles | Appearance |
| Tick Density | This is multiplied by the width to determine the current ideal tick unit. | float | .tickDensity | Behavior |
| Time Style | The style to display times of day. For international support. | int | .timeStyle | Appearance |
| Today Color | The color of the "Today Arrow" indicator. See Color Selector. | Color | .todayIndicatorColor | Appearance |
| Track Margin | The amount of room on either side of the slider track. May need adjusting of default font is changed. | int | .trackMargin | Appearance |
| Visible | If disabled, the component will be hidden. | boolean | .visible | Common |
Deprecated Properties​
| Property | Description | Property Type | Scripting | Category |
|---|---|---|---|---|
| Data Quality | The data quality code for any Tag bindings on this component. | int | .dataQuality | Deprecated |
Scripting​
Scripting Functions​
See the Date Range Scripting Functions page for the full list of scripting functions available for this component.
Event Handlers​
Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page
Customizers​
Example​
//A Query binding on another component on the same window might look like this:
SELECT Column1, Column2, Column3
FROM MyTable WHERE
t_stamp >= "{Root Container.Date Range.startDate}" AND
t_stamp <= "{Root Container.Date Range.endDate}"