Skip to main content


deprecated class %ZEN.SVGComponent.timeLine extends %ZEN.SVGComponent.svgComponent

SVG TimeLine component. This displays a series of "events" along a time line.

Property Inventory

Method Inventory


property birthDate as %ZEN.Datatype.string;
"Birth date" (as YYYY-MM-DD HH:MM:SS). If provided, then a time bar showing current age is also displayed.
Property methods: birthDateDisplayToLogical(), birthDateGet(), birthDateIsValid(), birthDateLogicalToDisplay(), birthDateLogicalToOdbc(), birthDateNormalize(), birthDateSet()
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 endTime as %ZEN.Datatype.string;
Latest displayed time (as YYYY-MM-DD HH:MM:SS).
Property methods: endTimeDisplayToLogical(), endTimeGet(), endTimeIsValid(), endTimeLogicalToDisplay(), endTimeLogicalToOdbc(), endTimeNormalize(), endTimeSet()
property marginLeft as %ZEN.Datatype.integer [ InitialExpression = 20 ];
Left margin (in pixels).
Property methods: marginLeftDisplayToLogical(), marginLeftGet(), marginLeftIsValid(), marginLeftLogicalToDisplay(), marginLeftLogicalToOdbc(), marginLeftNormalize(), marginLeftSet()
property marginRight as %ZEN.Datatype.integer [ InitialExpression = 20 ];
Right margin (in pixels).
Property methods: marginRightDisplayToLogical(), marginRightGet(), marginRightIsValid(), marginRightLogicalToDisplay(), marginRightLogicalToOdbc(), marginRightNormalize(), marginRightSet()
property ongetdata as %ZEN.Datatype.eventHandler;
ongetdata event handler: This defines the client-side code that returns an graph of javascript objects used to provide the contents of this view.
Property methods: ongetdataDisplayToLogical(), ongetdataGet(), ongetdataIsValid(), ongetdataLogicalToDisplay(), ongetdataLogicalToOdbc(), ongetdataNormalize(), ongetdataSet()
property onrenderitem as %ZEN.Datatype.eventHandler;
onrenderitem event handler: This event handler is called when an event is plotted and makes it possible to plot custom content on the time line.
Property methods: onrenderitemDisplayToLogical(), onrenderitemGet(), onrenderitemIsValid(), onrenderitemLogicalToDisplay(), onrenderitemLogicalToOdbc(), onrenderitemNormalize(), onrenderitemSet()
property onselect as %ZEN.Datatype.eventHandler;
onselect event handler: This event handler is called when the user selects a new item within the timeline.
Property methods: onselectDisplayToLogical(), onselectGet(), onselectIsValid(), onselectLogicalToDisplay(), onselectLogicalToOdbc(), onselectNormalize(), onselectSet()
property selectedId as %ZEN.Datatype.string;
Id of selected item.
Property methods: selectedIdDisplayToLogical(), selectedIdGet(), selectedIdIsValid(), selectedIdLogicalToDisplay(), selectedIdLogicalToOdbc(), selectedIdNormalize(), selectedIdSet()
property spanHeight as %ZEN.Datatype.integer [ InitialExpression = 20 ];
Height (in pixels) of a time span box on the time line.
Property methods: spanHeightDisplayToLogical(), spanHeightGet(), spanHeightIsValid(), spanHeightLogicalToDisplay(), spanHeightLogicalToOdbc(), spanHeightNormalize(), spanHeightSet()
property startTime as %ZEN.Datatype.string;
Earliest displayed time (as YYYY-MM-DD HH:MM:SS).
Property methods: startTimeDisplayToLogical(), startTimeGet(), startTimeIsValid(), startTimeLogicalToDisplay(), startTimeLogicalToOdbc(), startTimeNormalize(), startTimeSet()
property title as %ZEN.Datatype.string;
Chart title.
Property methods: titleDisplayToLogical(), titleGet(), titleIsValid(), titleLogicalToDisplay(), titleLogicalToOdbc(), titleNormalize(), titleSet()


clientmethod computeAge(birthDate, currDate) [ Language = javascript ]
Compute the age between currDate and birthDate, return it as an object.
clientmethod dragThumb(evt) [ Language = javascript ]
Drag handler for vertical scrollbar thumb.
clientmethod getCellInfo(cell, majorUnits, minorUnits, index) [ Language = javascript ]
Return information about a cell within the grid line.
clientmethod getModel() [ Language = javascript ]
Get the model used to drive the user portion of the time line.
clientmethod itemClick(evt, newId) [ Language = javascript ]
Click on item.
clientmethod renderContents() [ Language = javascript ]
Render the inner SVG contents of this component.
clientmethod renderData(dataGroup, marginTop) [ Language = javascript ]
Render the actual time line data.
clientmethod renderOneItem(group, item, length, size) [ Language = javascript ]
Render one item on the timeline. group is the svg group to append to. length is the length (in pixels) of the time range to plot.. Return the size of the rendered item via size.
clientmethod renderTimeCells() [ Language = javascript ]
Render the time cells on the top/bottom.
clientmethod selectItem(newId) [ Language = javascript ]
Select an item.
clientmethod setProperty(property, value, value2) [ Language = javascript ]
Set the value of a named property.
clientmethod setTimeRange(startTime, endTime, reset, which) [ Language = javascript ]
Set the timeline start and end dates and update. Time values are in 'yyyy-mm-dd' format. This prevents the repaint that would happen if start and end dates are set separately. If endTime is not provided, update it to preserve the current time range using startTime as a new starting time.
If reset is true, clear the internal structures used to compute the locations of the time events.
If which is provided, it specifies whether the change is "translate" or "scale" (to make it easy to connect to a timeRange controller).
clientmethod sortModel(model, range) [ Language = javascript ]
Take the user-supplied data model and sort it by time. Return a sorted and decorated model. Also find earliest and latest times and return via range object.

Inherited Members

Inherited Properties

Inherited Methods

FeedbackOpens in a new tab