TimelineView

Label: :IA_Function
Property: type: TimelineView
Inherits from: Function and View

The TimelineView Function renders a Timeline with events. It is based on vis-timeline.

TimelineView

Function parameters

Key	Description	Default value	Possible values
`events.id`	IDs of all events		Array of strings/numbers
`events.type`	Types of all events. See "Visuals" section for examples.		Array of strings: `box`(default) /`point`/`range`/`background`
`events.title`	Titles of all events		Array of strings
`events.content`	Contents of all events		Array of strings
`events.start`	[Required] Start date/times of all events		Array of strings
`events.end`	[Required for type `range`/`background`] End date/times of all events		Array of strings
`events.group`	ID of the group this event belongs to	undefined	string
`events.{...}`	Other (optional) event properties		Event properties as documented here
`groups.{group_id}.content`	Group label		String
`groups.{group_id}.{...}`	Other (optional) group properties		Group properties as documented here
`timeMarkers`	Collection of time markers shown on the timeline		Collection (object) of time markers
`timeMarkers.{marker_id}.datetime`	Position of time marker as date/time string		`string`
`timeMarkers.{marker_id}.title`	Label that appear on the top-right of the marker		`string`
`timeMarkers.{marker_id}.editable`	Allow the user to edit the title of the marker	`false`	`true` / `false`
`options`	Settings for the timeline. See "Important Options" below.
`state.selected.events`	An array of event IDs to pre-select when the view is loaded.	[]	Array of events
`visibleRange`	The initial time interval to display on the screen.	Object
`visibleRange.start`	Timestamp (Date instance) of the left-most (currently) visible point in the view		`Date` instance / Epoch time as `Number` / date as `String`
`visibleRange.end`	Timestamp (Date instance) of the right-most (currently) visible point in the view		`Date` instance / Epoch time as `Number` / date as `String`

Note: Both events and groups can be passed either as:

An array of property objects, e.g.:

events: [
	{id:'event1', title:'My Event'}, 
	{id:'event2', title: 'Other Event'}
]

An object of id-object pairs, e.g.:

events: { 
	event1: {title: 'My Event'}, 
	event2: {title: 'Other Event'}
}

A transposed object of property arrays, e.g.:

events: {
	id: ['event1','event2'], 
	title: ['My Event', 'Other Event']
}

Visuals

The TimelineView can display events in several ways, depending on the type property of the event.

box: A box with content. (Default) (Image placeholder: A screenshot of a box event)
point: A point on the timeline. (Image placeholder: A screenshot of a point event)
range: A colored range on the timeline. (Image placeholder: A screenshot of a range event)
background: A colored background area. (Image placeholder: A screenshot of a background event)

Important Options

The options parameter allows you to customize the behavior of the timeline. While all options from the official documentation are supported, here are a few of the most common ones:

Key	Description	Default value
`multiselect`	If `true`, the user can select multiple events.	`false`
`zoomable`	If `true`, the user can zoom in and out of the timeline.	`true`
`editable.updateTime`	If `true`, the user can drag events to change their time.	`false`
`editable.add`	If `true`, the user can add new events by double-clicking.	`false`
`editable.remove`	If `true`, the user can delete events.	`false`

Security

The xss option for sanitizing HTML content is a global setting on the vis-timeline library. If multiple TimelineView instances are running at the same time and at least one has options.xss.disabled NOT true all running timelines will have it enabled (regardless of the state of options.xss.disabled property of each instance).

Outgoing triggers

Type: `context`

The following context menus are available from the TimelineView:

Menu	Occurs when	Target value
`event`	User right-clicks an event	Right-clicked event data.
`group`	User right-clicks a group	Right-clicked group data.
`timeline`	User right-clicks the timeline	Right-clicked moment as object with `date`, `time`, and `dateTime` properties.

More info on context menus.