Timeline

The Timeline component draws items passed to the set() function.

When new or updated data is passed in, it will redraw with the new items.

annotations()

Gets a copy of an object describing the timeline annotations.

Returns { [id: string]: Annotation }

A copy of the current annotations, in a dictionary object indexed by id.

annotations(annotations)

Sets the timeline annotations, replacing any existing annotations.

Parameters

annotations: { [id: string]: Annotation }; A dictionary object of the annotations, indexed by annotation id.

Returns { [id: string]: Annotation }

A copy of the current annotations, in a dictionary object indexed by id.

destroy()

Destroys the current instance of the timeline, freeing any allocated resources.

Returns void

entitySelection()

Gets the ids of all the selected entities.

Returns string[]

The ids of all the selected entities.

entitySelection(entityIds)

Sets the ids of the entities to be displayed as being selected.

Parameters

entityIds: string | string[]; The id or ids of the selected entities.

Returns string[]

The ids of the selected entities.

entitySelectionEnabled()

Gets the flag indicating whether users are able to select entities by interacting with the timeline.

Returns boolean

True indicates users can select entities by interacting with the timeline, otherwise false.

entitySelectionEnabled(mode)

Sets the flag determining whether users are able to select entities by interacting with the timeline. See Select entities in the Interactions section.

Parameters

mode: boolean; True to allow entities to be selected, otherwise false.

Returns boolean

True to enable entity selection, otherwise false.

eventSelection()

Gets the ids of the selected events.

Returns string[]

The ids of the selected events.

eventSelection(eventIds)

Sets the ids of the selected events, which are drawn with a highlight.

Parameters

eventIds: string | string[]; The id or ids of the events to be selected.

Returns string[]

The ids of the selected events.

eventSelectionMode()

Gets the flag indicating whether the timeline is in event selection mode, which allows users to select events.

Returns boolean

True if the timeline is in event selection mode, otherwise false.

eventSelectionMode(mode)

Sets the flag determining whether users are able to select events by interacting with the timeline.

Parameters

mode: boolean; True to put the timeline in event selection mode, otherwise false.

Returns boolean

True if the timeline is in event selection mode, otherwise false.

expandedRows(mode, ids)

Expands entities by adding sub-rows to vertically space out events as specified by the expandedRows options. See also Expanded Rows.

Parameters

mode: 'auto' | 'manual'; How KronoGraph determines which entity rows to expand, if space allows:

'auto' - Expand all entity rows, as needed.
'manual' - Expand just the rows of entities specified in the list of ids.
ids: string | string[]; If mode is 'manual', the ids of the entities whose rows are to be expanded.

Returns ExpandedRows

An object containing the ids of the entities whose rows are to be expanded, and the expansion mode being used.

expandedRows()

Expands entities by adding sub-rows to vertically space out events as specified by the expandedRows options. See also Expanded Rows.

Returns ExpandedRows

An object containing the ids of the entities whose rows are to be expanded, and the expansion mode being used.

export(options)

Exports a static image of the timeline. The exported image is encoded in a blob URL.

Parameters

options: ExportOptions; Options related to producing an export of the current view.

Returns Promise

A promise that will resolve with an object containing the blob URL of the exported image or reject with an error.

fit()

Fits all the events and time series chart data points into the viewport. If Scale Wrapping is used, fits the wrapped time range into the viewport.

Returns void

Sets the timeline focus to the specified entities or events. When the timeline is focused , only focused items and their connections are shown. Focused events will keep the entities they are linked to in focus. Focusing does not affect time series charts.

Parameters

focusIds: string | string[]; The id or ids of the entities or events to focus on.

Returns string[]

The ids of the focused items.

focus()

Gets the ids of the focused entities or events. When focus items are set, only those items and their connections are shown.

Returns string[]

The ids of the focused items.

getAnnotationBodyPosition(annotationId)

Gets an object describing the position of an annotation's body.

Parameters

annotationId: string; The id of the annotation.

Returns AnnotationBodyPosition | null

An AnnotationBodyPosition object, or null if the annotation is not shown in the timeline.

getEntity(entityId)

Returns a copy of the entity with the specified id.

Parameters

entityId: string; The id of the entity to be retrieved.

Returns object | null

A copy of the Entity object, or null if there is no entity with the specified id.

getEntityPosition(entityId)

Gets an object describing the position of an entity.

Parameters

entityId: string; The id of the entity.

Returns EntityPosition | null

An EntityPosition object, or null if the entity is not shown in the timeline.

getEvent(eventId)

Returns a copy of the event with the specified id.

Parameters

eventId: string; The id of the event to be retrieved.

Returns object | null

A copy of the Event object, or null if there is no event with the specified id.

getEventPosition(eventId)

Gets an object describing the position of an event.

Parameters

eventId: string; The id of the event.

Returns EventPosition | null

An EventPosition object, or null if the event is not in the current timeline range.

getInRangeItems(options)

Returns an object detailing the ids of events and entities that are in the current range.

Parameters

options: object; Specifies which items are included.

Returns { entities: Object, events: Object }

Objects whose keys are the ids of entities and events in the current range.

getPinnedEntityIds()

Returns the ids of entities that are pinned.

Returns string[]

The ids of the pinned items.

getRowEntityIds(rowId)

Returns the ids of the entities in the specified row.

Parameters

rowId: string; The id of the row.

Returns string[] | null

An array of the entity ids, or null if there is no entity row with the specified id.

highlight()

Gets the ids of highlighted rows and entities.

Returns string[]

The ids of highlighted rows and entities.

highlight(highlightIds)

Sets the highlighted rows and entities. Highlighted rows and entities are drawn using highlightColor.

Parameters

highlightIds: string | string[]; The ids of the highlighted rows and entities.

Returns string[]

The ids of highlighted rows and entities.

inRange(item, nanoseconds)

Determines whether a time or event is within the timeline's visible range.

Parameters

item: Date | number | TimeRange | string; A Date in local time, a millisecond number in UTC, a TimeRange object, or the id of an event.
nanoseconds: number; The number of nanoseconds to add to the Date or number.

Returns boolean

Whether the specified item is within the timeline's visible range.

isHeatmapShown()

Determines whether the heatmap is currently shown.

Returns boolean

True if the heatmap is currently shown, otherwise false.

labelAreaWidth()

Gets the mode of calculation for the width of the entity label area and its width. Before the first render, the returned width will be 0.

Returns LabelAreaWidth

An object containing the mode of calculation for the width of the entity label area and its width.

labelAreaWidth(mode, width)

Sets the mode of calculation for the width of the entity label area and, if 'fixed', its width.

Parameters

mode: 'auto' | 'fixed'; The mode of calculation for the width of the entity label area:

'auto' - The width is calculated automatically based on the visible entities.
'fixed' - The width is fixed, but draggable.
width: number; The width of the entity label area.

Returns LabelAreaWidth

An object containing the mode of calculation for the width of the entity label area and its width.

lens()

Gets the id of the entity at the center of the lens view.

Returns string | null

The id of the entity at the center of the lens view, or null if lens view isn't open.

lens(entityId)

Sets the entity at the center of the lens view. Set it to null to close lens view.

Parameters

entityId: string | null; The id of the entity.

Returns string | null

The id of the entity at the center of the lens, or null if lens view isn't open.

load(snapshot)

Loads a snapshot previously created using serialize().

Parameters

snapshot: TimelineSnapshot

Returns void

markers()

Gets a copy of the timeline markers.

Returns Marker[]

A copy of the current markers.

markers(markers)

Sets the timeline markers.

Parameters

markers: Marker[]; An array of markers to add.

Returns Marker[]

A copy of the current markers.

off(name, handler)

Detaches an event handler from an event fired by the timeline. See Handled Events.

Parameters

name: string; The name of the event.
handler: Function; The handler for the event.

Returns void

on(name, handler)

Attaches an event handler to an event fired by the timeline. See Handled Events.

Parameters

name: string; The name of the event.
handler: Function; The handler for the event.

Returns void

options()

Gets the current timeline options.

Returns TimelineOptions

The currently specified options.

options(options)

Sets the timeline options.

Parameters

options: TimelineOptions; Specifies the options to set.

Returns TimelineOptions

The currently specified options.

overrideStyles()

Beta

Gets a copy of an array of objects describing the current overrideStyles.

Returns {ids: string | string[], style: EntityStyle | EventStyle}[]

Returns a copy of an array of objects describing any applied overrideStyles.

overrideStyles(styles)

Beta

Overrides the style properties set for an Entity or Event with EntityStyle or EventStyle , see Override Styles.

Parameters

styles: { ids: string | string[], style: EventStyle | EntityStyle }[]; The ids of the entities or events whose style properties will be overridden and the style properties to apply.

Returns {ids: string | string[], style: EventStyle | EntityStyle}[]

Returns a copy of an array of objects describing any applied overrideStyles.

pan(direction, amount)

Pans the timeline in the specified direction. The panning range is limited and depends on the timeline data.

Parameters

direction: 'left' | 'right'; Specifies the direction to pan the timeline in.
amount: number; How far to pan the timeline. The distance is measured as a proportion of space across the visible timeline range.

Returns void

pin(entityId, pinned)

Pins or unpins the specified entities. Pinned entities are always shown separately from entity groups.

Parameters

entityId: string | string[]; The id or ids of the entities to set the pin state for.
pinned: boolean; Controls if the entities should be pinned or unpinned.

Returns void

ping(id, options)

Adds an animated effect to a specified event or events, and then removes it again.

Parameters

id: string | string[]; The id or ids of the events to ping.
options: object; Options to control the animation.

Returns void

range()

Gets the range of time currently shown in the timeline. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.

Returns object

An object containing the range of visible times:

start the start of the visible time range, as a Date object.
end the end of the visible time range, as a Date object.
startNanoseconds the number of nanoseconds to add to start.
endNanoseconds the number of nanoseconds to add to end.

range(start, end, startNanoseconds, endNanoseconds)

Sets the range of times currently shown by the timeline. When the scale is wrapped, this is relative to the base range - see Scale Wrapping. There are limits to the range that can be set, which depend on the timeline data.

Parameters

start: Date | number; The start of the range as a Date in local time, or a millisecond number in UTC.
end: Date | number; The end of the range as a Date in local time, or a millisecond number in UTC.
startNanoseconds: number; The number of nanoseconds to add to start.
endNanoseconds: number; The number of nanoseconds to add to end.

Returns object

An object containing the range of visible times:

start the start of the visible time range, as a Date object.
end the end of the visible time range, as a Date object.
startNanoseconds the number of nanoseconds to add to start.
endNanoseconds the number of nanoseconds to add to end.

reveal()

Gets the event ids of all revealed events.

Returns string[]

The ids of the revealed events.

reveal(revealIds)

Sets the underlying events to be revealed when the heatmap view is shown.

Parameters

revealIds: string | string[]; The id or ids of the events to reveal.

Returns string[]

The ids of the revealed events.

serialize()

Returns a snapshot of the current timeline component. You can then use this to restore the timeline to this state using load(). See also Using Snapshots.

Returns TimelineSnapshot

set(data)

Replaces the timeline data with the new data specified. Any existing items in the timeline will be removed. See Data Formats.

Parameters

data: TimelineData; The data to load into the timeline.

Returns void

setContainer(element)

Sets the location of the timeline in the DOM. Set to null to temporarily remove the timeline.

Parameters

element: string | HTMLElement | null; The DOM element that the chart should be appended to, or null to detach it.

Returns void

setOrdering(orderingName)

Sets the type of entity ordering to use in the timeline.

Parameters

orderingName: 'firstevent' | 'lastevent' | 'keyorder' | 'alphabetical' | 'shorteneventlines'; The name of the ordering to use.

Returns void

zoom(direction)

Zoom the timeline in the manner specified. The zooming range is limited and depends on the timeline data.

Parameters

direction: 'in' | 'out'; Specifies how to zoom the timeline.

Returns void