Skip to main content


class %ZEN.SVGComponent.timeRangeControl extends %ZEN.SVGComponent.svgComponent

SVG time range control. This lets a user select a range of dates along a simple time line. This is typically used to control another component, such as a chart or time line.
The selected date range is specified by the startRange and endRange properties. These are modified as the user interacts with the control.
The onchange event will be fired whenever the user modifies the time range.
The height of this component should be set to 40.

Property Inventory

Method Inventory


property dateFormat as %ZEN.Datatype.string (MAXLEN = 3, VALUELIST = ",MDY,DMY,YMD") [ InitialExpression = "YMD" ];
Optional. Specifies the display format used for this component. (Note that the internal value of this control is always YYYY-MM-DD). Possible values are:
  • "YMD" - Year,Month,Day
  • "MDY" - Month,Day,Year
  • "DMY" - Day,Month,Year
Property methods: dateFormatDisplayToLogical(), dateFormatGet(), dateFormatIsValid(), dateFormatLogicalToDisplay(), dateFormatLogicalToOdbc(), dateFormatNormalize(), dateFormatSet()
property endRange as %ZEN.Datatype.string;
End of current time range (as YYYY-MM-DD HH:MM:SS). This is modified as the user interacts with the control.
Property methods: endRangeDisplayToLogical(), endRangeGet(), endRangeIsValid(), endRangeLogicalToDisplay(), endRangeLogicalToOdbc(), endRangeNormalize(), endRangeSet()
property endTime as %ZEN.Datatype.string [ InitialExpression = +$ZDT($H,3)+5 ];
Latest time displayed on the time line (as YYYY-MM-DD HH:MM:SS). Rounded to current time scale.
Property methods: endTimeDisplayToLogical(), endTimeGet(), endTimeIsValid(), endTimeLogicalToDisplay(), endTimeLogicalToOdbc(), endTimeNormalize(), endTimeSet()
property onchange as %ZEN.Datatype.eventHandler;
onchange event handler: This event handler is called as the user changes the value of this control. The final parameter is passed to this event indicating if the value is the final value (at the end of the current action). The which parameter is passed to this event indicating how the value as been changed: 'translate' (move to new start time), or 'scale' (change in time scale).
Property methods: onchangeDisplayToLogical(), onchangeGet(), onchangeIsValid(), onchangeLogicalToDisplay(), onchangeLogicalToOdbc(), onchangeNormalize(), onchangeSet()
property onconfig as %ZEN.Datatype.eventHandler;
This event handler is fired when the user clicks on the config icon (which is only displayed if this event is defined).
Property methods: onconfigDisplayToLogical(), onconfigGet(), onconfigIsValid(), onconfigLogicalToDisplay(), onconfigLogicalToOdbc(), onconfigNormalize(), onconfigSet()
property startRange as %ZEN.Datatype.string;
Start of current time range (as YYYY-MM-DD HH:MM:SS). This is modified as the user interacts with the control.
Property methods: startRangeDisplayToLogical(), startRangeGet(), startRangeIsValid(), startRangeLogicalToDisplay(), startRangeLogicalToOdbc(), startRangeNormalize(), startRangeSet()
property startTime as %ZEN.Datatype.string [ InitialExpression = +$ZDT($H,3)-10 ];
Earliest time displayed on the time line (as YYYY-MM-DD HH:MM:SS). Rounded to current time scale.
Property methods: startTimeDisplayToLogical(), startTimeGet(), startTimeIsValid(), startTimeLogicalToDisplay(), startTimeLogicalToOdbc(), startTimeNormalize(), startTimeSet()
property thumbStyle as [ InitialExpression = "fill:url(#glow-silver);" ];
SVG style applied to "thumb" of scroll bar.
Property methods: thumbStyleDisplayToLogical(), thumbStyleGet(), thumbStyleIsValid(), thumbStyleLogicalToDisplay(), thumbStyleLogicalToOdbc(), thumbStyleNormalize(), thumbStyleSet()
property timeNotation as %ZEN.Datatype.string (MAXLEN = 3, VALUELIST = ",12h,24h") [ InitialExpression = "12h" ];
Time notation used for time values.
Property methods: timeNotationDisplayToLogical(), timeNotationGet(), timeNotationIsValid(), timeNotationLogicalToDisplay(), timeNotationLogicalToOdbc(), timeNotationNormalize(), timeNotationSet()
property timeScale as %ZEN.Datatype.string (VALUELIST = ",years,months,days,hours") [ InitialExpression = "years" ];
Time scale to display.
Property methods: timeScaleDisplayToLogical(), timeScaleGet(), timeScaleIsValid(), timeScaleLogicalToDisplay(), timeScaleLogicalToOdbc(), timeScaleNormalize(), timeScaleSet()


clientmethod dragGrabber(evt, which) [ Language = javascript ]
Drag handler for grabber.
clientmethod dragThumb(evt) [ Language = javascript ]
Drag handler for thumb.
clientmethod getTimeForPos(x) [ Language = javascript ]
Return the time value (as yyyy-mm-dd [hh]) for the given x position on the time line.
clientmethod onchangeHandler(final, which) [ Language = javascript ]
Raise onchange event.
clientmethod onconfigHandler() [ Language = javascript ]
Raise onconfig event.
clientmethod renderContents() [ Language = javascript ]
Render the inner SVG contents of this component.
clientmethod reset() [ Language = javascript ]
Reset the timeline to its initial state.
clientmethod scrollBtnClick(evt, which) [ Language = javascript ]
Click on scroll button.
clientmethod scrollBtnOut(evt, which) [ Language = javascript ]
Mouse out of scroll button.
clientmethod scrollBtnOver(evt, which) [ Language = javascript ]
Mouse over scroll button.
clientmethod setProperty(property, value, value2) [ Language = javascript ]
Set the value of a named property.
clientmethod setTimeRange(startRange, endRange) [ Language = javascript ]
Set the start and end time range dates and update. If endRange is not provided, update it to preserve the current time range using startRange as a new starting time.
Time values are in 'yyyy-mm-dd' format.
clientmethod unitRectClick(evt, which) [ Language = javascript ]
Mouse click on cell rect.
clientmethod unitRectOut(evt, which) [ Language = javascript ]
Mouse out of cell rect.
clientmethod unitRectOver(evt, which) [ Language = javascript ]
Mouse over cell rect.
clientmethod updateScrollbar() [ Language = javascript ]
Resize all elements related to current range.

Inherited Members

Inherited Properties

Inherited Methods

FeedbackOpens in a new tab