- API
- KronoGraph
- Handled Events
JavaScript
Handled Events
KronoGraph lets you respond to the following events that get fired by the timeline. For more detail, see the Using Event Handlers section.
Fires when the current annotations change.
Parameters
- event required
-
AnnotationsEvent - 'auto' - The event was triggered by internal KronoGraph state.
- 'user' - The event was triggered by user action.
annotations
required { [id: string]: Annotation } The current set of annotations.
why
required ChangeReason The reason this event was fired:
Fires when the user clicks or taps on the timeline.
Default actions:
- Focus control - Focuses or unfocuses the entity row.
- Pin control - Pins or unpins the entity row.
- Annotation delete control - Deletes the annotation.
Parameters
- event required
-
ClickEvent
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
string[] An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required 'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.
Fires on a right click or a long press on the timeline.
Default action:
- Suppresses the click event.
Parameters
- event required
-
ContextMenuEvent
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
string[] An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required 'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.
Fires on a double click or a double tap on the timeline.
Default actions:
- On the background - Unfocuses any focused entity rows.
- On an entity row - Focuses or unfocuses the entity row.
- On the scale - Sets the timeline range to the
startTimeandendTimeproperties of the selected scale item.
Parameters
- event required
-
DoubleClickEvent
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
string[] An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required 'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.
Fires when the drag is finished and pointer is released, or when the drag is canceled. On touch devices this fires when the finger or pointing device is lifted.
Default action:
- On
MarqueeRangedrag type - the timeline will zoom into the selected range.
Parameters
- event required
-
DragEndEvent
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
'annotationScrollBar' | 'labelAreaWidth' | 'lensScrollbar' | 'marqueeRange' | 'marqueeSelection' | 'moveAnnotation' | 'pan' | null The type of drag.
number The number of nanoseconds to add to endTime.
Date The end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
The entity range within the dragged area. Only present when dragType is 'marqueeSelection'.
string[] An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required 'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.
Fires continuously as the cursor moves during a drag.
Parameters
- event required
-
DragMoveEvent
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
'annotationScrollBar' | 'labelAreaWidth' | 'lensScrollbar' | 'marqueeRange' | 'marqueeSelection' | 'moveAnnotation' | 'pan' | null The type of drag.
number The number of nanoseconds to add to endTime.
Date The end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
string[] An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required 'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.
Fires when a drag is started. Use setDragOptions to set the dragging behavior.
Default actions:
- On the background - Pans the timeline.
- On the scale - Draws a marquee range. On
drag-end, the default action is to zoom into the selected range. - On the entity label area border - Adjusts the label area width.
Parameters
- event required
-
DragStartEvent
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
'annotationScrollBar' | 'labelAreaWidth' | 'lensScrollbar' | 'marqueeRange' | 'marqueeSelection' | 'moveAnnotation' | 'pan' | null The type of drag.
number The number of nanoseconds to add to endTime.
Date The end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
string[] An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
Controls the dragging behavior.
Parameters
Returns
void
number The number of nanoseconds to add to startTime.
Date The start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required 'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.
Fires each time the timeline is drawn. The handler for this event is not passed any arguments.
Fires when the list of selected entities changes.
Parameters
- event required
-
EntitySelectionChangeEvent - 'auto' - The event was triggered by internal KronoGraph state.
- 'user' - The event was triggered by user action.
entitySelection
required string[] The ids of all the selected entities.
why
required ChangeReason The reason this event was fired:
Fires when the list of selected events changes.
Parameters
- event required
-
EventSelectionChangeEvent - 'auto' - The event was triggered by internal KronoGraph state.
- 'user' - The event was triggered by user action.
eventSelection
required string[] The ids of the selected events.
why
required ChangeReason The reason this event was fired:
Fires when the set of entities whose rows are to be expanded (if space allows) changes.
Parameters
- event required
-
ExpandedRowsEvent - 'auto' - The event was triggered by internal KronoGraph state.
- 'user' - The event was triggered by user action.
mode
required 'auto' | 'manual' The mode used to determine which entity rows to expand (if space allows).
expandedRowIds
required string[] The ids of the entities whose rows are to be expanded (if space).
why
required ChangeReason The reason this event was fired:
Fires when the list of focused items changes.
Fires when the list of highlighted items changes.
Fires when the user hovers over the timeline. Pass the hover property to the options() function to configure the hover delay.
Parameters
- event required
-
HoverEvent
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
string[] An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required 'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.
Fires when the user presses a key.
Default actions:
- Escape key - Cancels an active drag.
- Shift key - Draws a marquee range when dragging.
Parameters
- event required
-
KeyDownEvent
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
keyCode
required number The keyCode of the key pressed.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
If called, the default action is prevented.
Returns
void
Fires when the user releases a key.
Parameters
- event required
-
KeyUpEvent
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
keyCode
required number The keyCode of the key pressed.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
If called, the default action is prevented.
Returns
void
Fires when the entity at the center of the lens changes, for example, when the user scrolls through lens view.
Parameters
- event required
-
LensEvent
Fires when an entity is pinned or unpinned.
Fires when a pointer presses down on the timeline.
Parameters
- event required
-
PointerDownEvent
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
string[] An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required 'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.
Fires continuously as the pointer moves on the timeline, or the timeline moves beneath the pointer.
Default action:
- On an entity row - Highlights the entity row and displays available controls (pin or focus).
- On a time series chart - Highlights the nearest data point.
Parameters
- event required
-
PointerMoveEvent
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
string[] An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required 'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.
Fires when the pointer is released.
Parameters
- event required
-
PointerUpEvent
button
required number The index of the button used.
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
number The number of nanoseconds to add to endTime.
Date The end of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
string[] An array of ids of events within the targeted item. Only defined if targetType is event, eventSummary or cell.
id
required string | null The id of the targeted item.
string The label of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
pointerId
required number The unique identifier of the pointer.
pointerType
required string The type of pointing device: mouse, touch or pen.
If called, the default action is prevented.
Returns
void
number The number of nanoseconds to add to startTime.
Date The start of the time range covered by the targeted item. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
An object containing details of the sub-item, or undefined if the cursor is not over a sub-item.
targetType
required 'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | null The type of the targeted item.
Date The timeline time corresponding to the pointer position. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
number The number of nanoseconds to add to time.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.
Fires when the time range shown in the timeline changes.
Parameters
- event required
-
RangeEvent - 'auto' - The event was triggered by internal KronoGraph state.
- 'user' - The event was triggered by user action.
start
required Date The time at the start of the timeline after the range has changed as a Date in local time. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
startNanoseconds
required number The number of nanoseconds to add to the start time.
end
required Date The time at the end of the timeline after the range has changed as a Date in local time. When the scale is wrapped, this is relative to the base range - see Scale Wrapping.
endNanoseconds
required number The number of nanoseconds to add to the end time.
why
required ChangeReason The reason this event was fired:
Fires continuously while the user is vertically or horizontally scrolling.
Default actions:
- Vertical scrolling on the background - Zooms the timeline.
- Vertical scrolling on the entity label area - Scrolls lens view up or down.
- Horizontal scrolling - Pans the timeline.
Parameters
- event required
-
WheelEvent
defaultPrevented
required boolean A read-only value indicating whether the default action was prevented.
deltaMode
required number The unit of measurement for the delta value.
deltaX
required number The number of units that the wheel scrolled in the x direction.
deltaY
required number The number of units that the wheel scrolled in the y direction.
id
required string | null The id of the targeted item.
modifierKeys
requiredAn object describing which modifier keys were pressed when the event occurred.
If called, the default action is prevented.
Returns
void
targetType
required 'annotationBody' | 'annotationDeleteButton' | 'annotationEditButton' | 'annotation' | 'cell' | 'entity' | 'entityGroup' | 'entityRun' | 'event' | 'eventSummary' | 'eventLabel' | 'focus' | 'fold' | 'foldControl' | 'glyph' | 'labelAreaBorder' | 'lensControl' | 'lensScrollbar' | 'pin' | 'scale' | 'timeSeriesChart' | null The type of the targeted item.
x
required number The distance from the left edge of the Timeline element to the pointer position.
y
required number The distance from the top edge of the Timeline element to the pointer position.