Timeline documentation

Overview

The Timeline is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or have a start and end date (a range). You can freely move and zoom in the timeline by dragging and scrolling in the Timeline. Items can be created, edited, and deleted in the timeline. The time scale on the axis is adjusted automatically, and supports scales ranging from milliseconds to years.

Overview
Example
Loading
Data Format
- Items
- Groups
Configuration Options
Methods
Events
Editing Items
Styles
Data Policy

Example

The following code shows how to create a Timeline and provide it with data. More examples can be found in the examples directory.

<!DOCTYPE HTML>
<html>
<head>
  <title>Timeline | Basic demo</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>

<script type="text/javascript">
  var container = document.getElementById('visualization');
  var items = [
    {id: 1, content: 'item 1', start: '2013-04-20'},
    {id: 2, content: 'item 2', start: '2013-04-14'},
    {id: 3, content: 'item 3', start: '2013-04-18'},
    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
    {id: 5, content: 'item 5', start: '2013-04-25'},
    {id: 6, content: 'item 6', start: '2013-04-27'}
  ];
  var options = {};
  var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

Loading

Install or download the vis.js library. in a subfolder of your project. Include the libraries script and css files in the head of your html code:

<script src="vis/dist/vis.js"></script>
<link href="vis/dist/vis.css" rel="stylesheet" type="text/css" />

The constructor of the Timeline is vis.Timeline

var timeline = new vis.Timeline(container, items, options);

The constructor accepts three parameters:

container is the DOM element in which to create the graph.
items is an Array containing items. The properties of an item are described in section Data Format.
options is an optional Object containing a name-value map with options. Options can also be set using the method setOptions.

Data Format

The timeline can be provided with two types of data:

Items containing a set of items to be displayed in time.
Groups containing a set of groups used to group items together.

Items

The Timeline uses regular Arrays and Objects as data format. Data items can contain the properties start, end (optional), content, group (optional), and className (optional).

A table is constructed as:

var items = [
  {
    start: new Date(2010, 7, 15),
    end: new Date(2010, 8, 2),  // end is optional
    content: 'Trajectory A'
    // Optional: fields 'id', 'type', 'group', 'className'
  }
  // more items...
]);

The item properties are defined as:

Name	Type	Required	Description
id	String \| Number	no	An id for the item. Using an id is not required but highly recommended. An id is needed when dynamically adding, updating, and removing items in a DataSet.
start	Date	yes	The start date of the item, for example `new Date(2010,09,23)`.
end	Date	no	The end date of the item. The end date is optional, and can be left `null`. If end date is provided, the item is displayed as a range. If not, the item is displayed as a box.
content	String	yes	The contents of the item. This can be plain text or html code.
type	String	'box'	The type of the item. Can be 'box' (default), 'range', or 'point'.
group	any type	no	This field is optional. When the group column is provided, all items with the same group are placed on one line. A vertical axis is displayed showing the groups. Grouping items can be useful for example when showing availability of multiple people, rooms, or other resources next to each other.
className	String	no	This field is optional. A className can be used to give items an individual css style. For example, when an item has className 'red', one can define a css style like: .vis.timeline .red { color: white; background-color: red; border-color: darkred; } More details on how to style items can be found in the section Styles.

Groups

Like the items, groups are regular JavaScript Arrays and Objects. Using groups, items can be grouped together. Items are filtered per group, and displayed as Group items can contain the properties id, content, and className (optional).

Groups can be applied to a timeline using the method setGroups. A table with groups can be created like:

var groups = [
  {
    id: 1,
    content: 'Group 1'
    // Optional: a field 'className'
  }
  // more groups...
]);

Groups can have the following properties:

Name	Type	Required	Description
id	String \| Number	yes	An id for the group. The group will display all items having a property `group` which matches the `id` of the group.
content	String	yes	The contents of the group. This can be plain text or html code.
className	String	no	This field is optional. A className can be used to give groups an individual css style. For example, when a group has className 'red', one can define a css style `.red { color: red; }`. More details on how to style groups can be found in the section Styles.

Configuration Options

Options can be used to customize the timeline. Options are defined as a JSON object. All options are optional.

var options = {
  width: '100%',
  height: '30px'
};

The following options are available.

Name	Type	Default	Description
align	String	"center"	Alignment of items with type 'box'. Available values are 'center' (default), 'left', or 'right').
autoResize	boolean	true	If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly.
editable	Boolean	false	If true, the items on the timeline can be dragged. Only applicable when option `selectable` is `true`. See also the callbacks `onAdd`, `onUpdate`, `onMove`, and `onRemove`, described in detail in section Editing Items.
end	Date \| Number \| String	none	The initial end date for the axis of the timeline. If not provided, the latest date present in the items set is taken as end date.
groupOrder	String \| Function	none	Order the groups by a field name or custom sort function. By default, groups are not ordered.
height	String	none	The height of the timeline in pixels or as a percentage. When height is undefined or null, the height of the timeline is automatically adjusted to fit the contents. It is possible to set a maximum height using option `maxHeight` to prevent the timeline from getting too high in case of automatically calculated height.
margin.axis	Number	20	The minimal margin in pixels between items and the time axis.
margin.item	Number	10	The minimal margin in pixels between items.
max	Date \| Number \| String	none	Set a maximum Date for the visible range. It will not be possible to move beyond this maximum.
maxHeight	Number	none	Specifies a maximum height for the Timeline in pixels.
min	Date \| Number \| String	none	Set a minimum Date for the visible range. It will not be possible to move beyond this minimum.
onAdd	Function	none	Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section Editing Items for more information. Only applicable when both options `selectable` and `editable` are set `true`.
onUpdate	Function	none	Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section Editing Items for more information. Only applicable when both options `selectable` and `editable` are set `true`.
onMove	Function	none	Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section Editing Items for more information. Only applicable when both options `selectable` and `editable` are set `true`.
onRemove	Function	none	Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section Editing Items for more information. Only applicable when both options `selectable` and `editable` are set `true`.
order	Function	none	Provide a custom sort function to order the items. The order of the items is determining the way they are stacked. The function order is called with two parameters, both of type `vis.components.items.Item`.
orientation	String	'bottom'	Orientation of the timeline: 'top' or 'bottom' (default). If orientation is 'bottom', the time axis is drawn at the bottom, and if 'top', the axis is drawn on top.
padding	Number	5	The padding of items, needed to correctly calculate the size of item ranges. Must correspond with the css of item ranges.
selectable	Boolean	true	If true, the items on the timeline can be selected. Multiple items can be selected by long pressing them, or by using ctrl+click or shift+click. The event `select` is fired each time the selection has changed (see section Events).
showCurrentTime	boolean	false	Show a vertical bar at the current time.
showCustomTime	boolean	false	Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future. When the custom time bar is dragged by the user, the event `timechange` is fired repeatedly. After the bar is dragged, the event `timechanged` is fired once.
showMajorLabels	boolean	true	By default, the timeline shows both minor and major date labels on the time axis. For example the minor labels show minutes and the major labels show hours. When `showMajorLabels` is `false`, no major labels are shown.
showMinorLabels	boolean	true	By default, the timeline shows both minor and major date labels on the time axis. For example the minor labels show minutes and the major labels show hours. When `showMinorLabels` is `false`, no minor labels are shown. When both `showMajorLabels` and `showMinorLabels` are false, no horizontal axis will be visible.
start	Date \| Number \| String	none	The initial start date for the axis of the timeline. If not provided, the earliest date present in the events is taken as start date.
type	String	'box'	Specifies the type for the timeline items. Choose from 'dot' or 'point'. Note that individual items can override this global type.
width	String	'100%'	The width of the timeline in pixels or as a percentage.
zoomMax	Number	315360000000000	Set a maximum zoom interval for the visible range in milliseconds. It will not be possible to zoom out further than this maximum. Default value equals about 10000 years.
zoomMin	Number	10	Set a minimum zoom interval for the visible range in milliseconds. It will not be possible to zoom in further than this minimum.

Methods

The Timeline supports the following methods.

Method	Return Type	Description
getCustomTime()	Date	Retrieve the custom time. Only applicable when the option `showCustomTime` is true.
setCustomTime(time)	none	Adjust the custom time bar. Only applicable when the option `showCustomTime` is true. `time` is a Date object.
getSelection()	Number[]	Get an array with the ids of the currently selected items.
getWindow()	Object	Get the current visible window. Returns an object with properties `start: Date` and `end: Date`.
on(event, callback)	none	Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: `rangechange`, `rangechanged`, `select`. The callback function is invoked as `callback(properties)`, where `properties` is an object containing event specific properties. See section Events for more information.
off(event, callback)	none	Remove an event listener created before via function `on(event, callback)`. See section Events for more information.
setGroups(groups)	none	Set a data set with groups for the Timeline. `groups` can be an Array with Objects, a DataSet, or a DataView. For each of the groups, the items of the timeline are filtered on the property `group`, which must correspond with the id of the group.
setItems(items)	none	Set a data set with items for the Timeline. `items` can be an Array with Objects, a DataSet, or a DataView.
setOptions(options)	none	Set or update options. It is possible to change any option of the timeline at any time. You can for example switch orientation on the fly.
setSelection([ids])	none	Select or deselect items. Currently selected items will be unselected.
setWindow(start, end)	none	Set the current visible window. The parameters `start` and `end` can be a `Date`, `Number`, or `String`. If the parameter value of `start` or `end` is null, the parameter will be left unchanged.

Events

Timeline fires events when changing the visible window by dragging, when selecting items, and when dragging the custom time bar.

Here an example on how to listen for a select event.

timeline.on('select', function (properties) {
  alert('selected items: ' + properties.nodes);
});

A listener can be removed via the function off:

function onSelect (properties) {
  alert('selected items: ' + properties.nodes);
}

// add event listener
timeline.on('select', onSelect);

// do stuff...

// remove event listener
timeline.off('select', onSelect);

The following events are available.

name	Description	Properties
rangechange	Fired repeatedly when the user is dragging the timeline window.	`start` (Number): timestamp of the current start of the window. `end` (Number): timestamp of the current end of the window.
rangechanged	Fired once after the user has dragged the timeline window.	`start` (Number): timestamp of the current start of the window. `end` (Number): timestamp of the current end of the window.
select	Fired after the user selects or deselects items by tapping or holding them. Not fired when the method `setSelection`is executed.	`items`: an array with the ids of the selected items
timechange	Fired repeatedly when the user is dragging the custom time bar. Only available when the custom time bar is enabled.	`time` (Date): the current time.
timechanged	Fired once after the user has dragged the custom time bar. Only available when the custom time bar is enabled.	`time` (Date): the current time.

Editing Items

When the Timeline is configured to be editable (both options selectable and editable are true), the user can move items by dragging them, can create a new item by double tapping on an empty space, can update an item by double tapping it, and can delete a selected item by clicking the delete button on the top right.

One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose:

onAdd(item, callback) Fired when a new item is about to be added. If not implemented, the item will be added with default text contents.
onUpdate(item, callback) Fired when an item is about to be updated. This function typically has to show a dialog where the user change the item. If not implemented, nothing happens.
onMove(item, callback) Fired when an item has been moved. If not implemented, the move action will be accepted.
onRemove(item, callback) Fired when an item is about to be deleted. If not implemented, the item will be always removed.

Each of the callbacks is invoked with two arguments:

item: the item being manipulated
callback: a callback function which must be invoked to report back. The callback must be invoked as callback(item | null). Here, item can contain changes to the passed item. When invoked as callback(null), the action will be cancelled.

Example code:

var options = {
  onUpdate: function (item, callback) {
    item.content = prompt('Edit items text:', item.content);
    if (item.content != null) {
      callback(item); // send back adjusted item
    }
    else {
      callback(null); // cancel updating the item
    }
  }
}

A full example is available here: 08_edit_items.html.

Styles

All parts of the Timeline have a class name and a default css style. The styles can be overwritten, which enables full customization of the layout of the Timeline.

For example, to change the border and background color of all items, include the following code inside the head of your html code or in a separate stylesheet.

<style>
  .vis.timeline .item {
    border-color: orange;
    background-color: yellow;
  }
</style>

Data Policy

All code and data is processed and rendered in the browser. No data is sent to any server.