User Manual

GETTING STARTED


OTHER EDITIONS


LAUNCHERS


MODULES


PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support

ALL USER MANUAL VERSIONS

Ignition 8.1. Offline Version (04/2021)
Ignition 8 Online Version
Ignition 7.9 Online Version
Ignition 7.8 Online Version

Deprecated Pages

SDK Documentation

Employees

Sign In

Skip to end of metadata
Go to start of metadata

Component Palette Icon:

On this page ...

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.

Note: 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.

Note: Timestamps must be ordered by date (ascending) to display correctly.

Properties

NameDescriptionProperty TypeScriptingCategory
Background ColorThe 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.backgroundAppearance
Border

The border surrounding this component. Options are: No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), Button Border, Field Border, Line Border, and Other Border.

Note: The border is unaffected by rotation.

Border.borderCommon
Box FillThe fill color for the selection box.Color.boxFillAppearance
CursorThe mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize.int.cursorCodeCommon
Data DensityA dataset that is used to calculate a histogram of data density.Dataset.densityDataData
Date StyleThe style to display dates in. For international support.int.dateStyleAppearance
Editor BackgroundThe background color of the textual date range editor portion of this component.Color.editorBackgroundAppearance
EnabledIf disabled, a component cannot be used.boolean.componentEnabledCommon
End DateThe ending date of the currently selected range.Date.endDateData
FontFont of text on this component.Font.fontAppearance
Foreground ColorThe foreground color of the component.Color.foregroundAppearance
High Density ColorThe color used to indicate high data density. See Color Selector.Color.highDensityColorAppearance
Max SelectionThe maximum size of the selected date range.String.maxSelectionSizeBehavior
Mouseover TextThe text that is displayed in the tooltip which pops up on mouseover of this component.String.toolTipTextCommon
NameThe name of this component.String.nameCommon
OpaqueIf false, backgrounds are not drawn. If true, backgrounds are drawn.boolean.opaqueCommon
Outer Range EndThe ending date of the available outer range.Date.outerRangeEndDateData
Outer Range StartThe starting date of the available outer range.Date.outerRangeStartDateData
QualityThe data quality code for any Tag bindings on this component.QualityCode.qualityData
Selection HighlightThe focus highlight color for the selection box. See Color Selector.Color.selectionHighlightAppearance
Start DateThe starting date of the currently selected range.Date.startDateData
Startup ModeControls whether or not this date range automatically assigns itself a starting range based on the current timeint.startupModeBehavior
Startup RangeIf startup mode is Automatic, this will be the starting range of time available for selection.String.startupRangeBehavior
Startup SelectionIf startup mode is Automatic, this will be the starting selected range.String.startupSelectionBehavior
StylesContains the component's styles.Dataset.stylesAppearance
Tick DensityThis is multiplied by the width to determine the current ideal tick unit.float.tickDensityBehavior
Time StyleThe style to display times of day. For international support.int.timeStyleAppearance
Today ColorThe color of the "Today Arrow" indicator. See Color Selector.Color.todayIndicatorColorAppearance
Track MarginThe amount of room on either side of the slider track. May need adjusting of default font is changed.int.trackMarginAppearance
VisibleIf disabled, the component will be hidden.boolean.visibleCommon
Deprecated Properties
Data QualityThe data quality code for any Tag bindings on this component.int.dataQualityDeprecated



Scripting

Component Functions

  • Since 7.8.1
     
  • Description

Sets the selected range. The outer range will move if needed. Note: The start and end times are determined based on the zoom level and may not move (or may move farther than intended) if the component is zoomed out too far for the amount of change attempted. For example, when days are showing, moving the start time 5 minutes forward will not effect the start, and moving the end time 5 minutes forward will add one day.

  • Parameters

Date start - The starting date for the new selection.

 Date end -  The ending date for the new selection.

  • Return

Nothing


Code Snippet
# This example moves the existing Start Date and End Date
# of a Date Range component ahead 8 hours
from java.util import Calendar

# Get the current start and end
dateRangeComponent = event.source.parent.getComponent('Date Range')
startDate = dateRangeComponent.startDate
endDate = dateRangeComponent.endDate

# Calculate the new start and end dates
cal = Calendar.getInstance();
cal.setTime(startDate);
cal.add(Calendar.HOUR, -8);
newStart = cal.getTime();

cal.setTime(endDate);
cal.add(Calendar.HOUR, -8);
newEnd = cal.getTime();

# Set the new range for the component. The outer range will
# automatically expand if needed.
dateRangeComponent.setRange(newStart, newEnd)
  • Since 7.8.1
     
  • Description

Sets the outer range. The selected range will move if needed. Note: The start and end times are determined based on the zoom level and may not move (or may move farther than intended) if the component is zoomed out too far for the amount of change attempted. For example, when days are showing, moving the start time 5 minutes forward will not effect the start, and moving the end time 5 minutes forward will add one day.

  • Parameters

Date start -  The starting date for the new outer range.

 Date end -  The ending date for the new outer range.

  • Return

Nothing


Code Snippet
# This example moves the existing Outer Date Range
# of a Date Range component back two days
from java.util import Calendar

# Get the current start and end of the outer range
dateRangeComponent = event.source.parent.getComponent('Date Range')
startDate = dateRangeComponent.outerRangeStartDate
endDate = dateRangeComponent.outerRangeEndDate

# Calculate the new start and end dates for the outer range
cal = Calendar.getInstance();
cal.setTime(startDate);
cal.add(Calendar.DAY_OF_MONTH, 2);
newStart = cal.getTime();

cal.setTime(endDate);
cal.add(Calendar.DAY_OF_MONTH, 2);
newEnd = cal.getTime();

# Set the new outer range for the component.
dateRangeComponent.setOuterRange(newStart, newEnd)

Extension Functions

This component does not have extension functions associated with it.

Examples

Code Snippet
//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}"
  • No labels