Class Reference
IRIS for UNIX 2024.1.2
 InterSystems: The power behind what matters   
Documentation  Search
  [USER] >  [%ZEN] >  [SVGComponent] >  [timeRangeControl]
Private  Storage   

deprecatedclass %ZEN.SVGComponent.timeRangeControl extends 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.

Inventory

Parameters Properties Methods Queries Indices ForeignKeys Triggers
10 16


Summary

Properties
%condition %import %includeFiles %page
%resource aux boundless composite
dateFormat document endRange endTime
height hidden id index
name onchange onclick onconfig
onupdate parent position preserveAspectRatio
startRange startTime svgComponent svgGroup
thumbStyle timeNotation timeScale tuple
viewBoxHeight viewBoxWidth visible width
window x y

Methods
%AddToSaveSet %Attr %BindExport %ClassIsLatestVersion
%ClassName %ConstructClone %DispatchClassMethod %DispatchGetModified
%DispatchGetProperty %DispatchMethod %DispatchSetModified %DispatchSetMultidimProperty
%DispatchSetProperty %DrawHTML %DrawJSStrings %Eval
%EvalC %Extends %ForceClientRender %GetEventHandlers
%GetParameter %GetXMLName %IsA %IsModified
%MakeId %New %NormalizeObject %ObjectModified
%OnAddToPageAfter %OnAddToPageBefore %OnDrawObjectProperties %OnObjectSynch
%OnZENDeserialize %OriginalNamespace %PackageName %QuoteValue
%QuoteValueL10N %RemoveFromSaveSet %Self %SerializeObject
%SetModified %ValidateObject XMLDTD XMLExport
XMLExportToStream XMLExportToString XMLNew XMLSchema
XMLSchemaNamespace XMLSchemaType beginWaitState calculateViewBox
clickHandler dragGrabber dragThumb endWaitState
findElement findSVGElement fireOnUpdateEvent getFrame
getProperty getSettings getSizeAbsolute getTimeForPos
getType invokeSuper isOfType makeId
onCreate onDelete onSerialize onchangeHandler
onconfigHandler onloadHandler onunloadHandler onupdateHandler
refreshContents render renderContents renderSVG
reset scrollBtnClick scrollBtnOut scrollBtnOver
setOverlayMode setPosition setPositionHandler setProperty
setSize setSizeHandler setTextNode setTimeRange
sizingMouseDownHandler unitRectClick unitRectOut unitRectOver
unrender updateScrollbar wrapMethod


Properties

• 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 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 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 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 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 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 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 thumbStyle as %ZEN.Datatype.style [ InitialExpression = "fill:url(#glow-silver);" ];
SVG style applied to "thumb" of scroll bar.
• property timeNotation as %ZEN.Datatype.string(MAXLEN=3,VALUELIST=",12h,24h") [ InitialExpression = "12h" ];
Time notation used for time values.
• property timeScale as %ZEN.Datatype.string(VALUELIST=",years,months,days,hours") [ InitialExpression = "years" ];
Time scale to display.

Methods

• method dragGrabber(evt, which) [ Language = javascript ]
Drag handler for grabber.
• method dragThumb(evt) [ Language = javascript ]
Drag handler for thumb.
• method getTimeForPos(x) [ Language = javascript ]
Return the time value (as yyyy-mm-dd [hh]) for the given x position on the time line.
• method onchangeHandler(final, which) [ Language = javascript ]
Raise onchange event.
• method onconfigHandler() [ Language = javascript ]
Raise onconfig event.
• method renderContents() [ Language = javascript ]
Render the inner SVG contents of this component.
• method reset() [ Language = javascript ]
Reset the timeline to its initial state.
• method scrollBtnClick(evt, which) [ Language = javascript ]
Click on scroll button.
• method scrollBtnOut(evt, which) [ Language = javascript ]
Mouse out of scroll button.
• method scrollBtnOver(evt, which) [ Language = javascript ]
Mouse over scroll button.
• method setProperty(property, value, value2) [ Language = javascript ]
Set the value of a named property.
• method 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.
• method unitRectClick(evt, which) [ Language = javascript ]
Mouse click on cell rect.
• method unitRectOut(evt, which) [ Language = javascript ]
Mouse out of cell rect.
• method unitRectOver(evt, which) [ Language = javascript ]
Mouse over cell rect.
• method updateScrollbar() [ Language = javascript ]
Resize all elements related to current range.

Copyright (c) 2025 by InterSystems Corporation. Cambridge, Massachusetts, U.S.A. All rights reserved. Confidential property of InterSystems Corporation.