vis-timeline

<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" HREF="favicon.ico"> <title>timeline - vis.js - A dynamic, browser based visualization library.</title>  <link href="../css/bootstrap.css" rel="stylesheet">  <link href="../css/tipuesearch.css" rel="stylesheet"> <link href="../css/style.css" rel="stylesheet">   <link href="../css/prettify.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="../js/prettify/prettify.js"></script> <script src="../js/smooth-scroll.min.js"></script> <script language="JavaScript"> smoothScroll.init(); </script>  <link href="../css/tipuesearch.css" rel="stylesheet">  <link href="../css/tipuesearch.css" rel="stylesheet"> <script type="text/javascript" src="../js/toggleTable.js"></script> </head> <body onload="prettyPrint();"> <div class="navbar-wrapper"> <div class="container"> <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> </ul> </div> </div> </nav> </div> </div> <div class="container full"> <h1>Timeline</h1> <h2 id="Overview">Overview</h2> <p> 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. </p> <p> Timeline uses regular HTML DOM to render the timeline and items put on the timeline. This allows for flexible customization using css styling. </p> <h2 id="Contents">Contents</h2> <ul> <li><a href="#Overview">Overview</a></li> <li><a href="#Example">Example</a></li> <li><a href="#Loading">Loading</a></li> <li><a href="#Data_Format">Data Format</a> <ul> <li><a href="#items">Items</a></li> <li><a href="#groups">Groups</a></li> </ul> </li> <li><a href="#Configuration_Options">Configuration Options</a></li> <li><a href="#Methods">Methods</a></li> <li><a href="#Events">Events</a></li> <li><a href="#Editing_Items">Editing Items</a></li> <li><a href="#Templates">Templates</a></li> <li><a href="#Localization">Localization</a></li> <li><a href="#Time_zone">Time zone</a></li> <li><a href="#Styles">Styles</a></li> </ul> <h2 id="Example">Example</h2> <p> The following code shows how to create a Timeline and provide it with data. More examples can be found in the <a href="../../timeline_examples.html">timeline examples</a> page. </p> <pre class="prettyprint lang-html"><!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"> // DOM element where the Timeline will be attached var container = document.getElementById('visualization'); // Create a DataSet (allows two way data-binding) var items = new vis.DataSet([ {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'} ]); // Configuration for the Timeline var options = {}; // Create a Timeline var timeline = new vis.Timeline(container, items, options); </script> </body> </html> </pre> <h2 id="Loading">Loading</h2> <p> Install or download the <a href="http://visjs.org" target="_blank">vis.js</a> library in a subfolder of your project. Include the library's script and css files in the head of your html code: </p> <pre class="prettyprint lang-html"> <script src="vis/dist/vis.js"></script> <link href="vis/dist/vis.css" rel="stylesheet" type="text/css" /> </pre> The constructor of the Timeline is <code>vis.Timeline</code> <pre class="prettyprint lang-js">var timeline = new vis.Timeline(container, items, options);</pre> or when using groups: <pre class="prettyprint lang-js">var timeline = new vis.Timeline(container, items, groups, options);</pre> The constructor accepts four parameters: <ul> <li> <code>container</code> is the DOM element in which to create the timeline. </li> <li> <code>items</code> is an Array containing items. The properties of an item are described in section <a href="#Data_Format">Data Format, items</a>. </li><li> <code>groups</code> is an Array containing groups. The properties of a group are described in section <a href="#groups">Data Format, groups</a>. </li> <li> <code>options</code> is an optional Object containing a name-value map with options. Options can also be set using the method <code>setOptions</code>. </li> </ul> <h2 id="Data_Format">Data Format</h2> <p> The timeline can be provided with two types of data: </p> <ul> <li><a href="#items">Items</a> containing a set of items to be displayed in time.</li> <li><a href="#groups">Groups</a> containing a set of groups used to group items together.</li> </ul> <h3 id="items">Items</h3> <p> For items, the Timeline accepts an Array, a DataSet (offering 2 way data binding), or a DataView (offering 1 way data binding). Items are regular objects and can contain the properties <code>start</code>, <code>end</code> (optional), <code>content</code>, <code>group</code> (optional), <code>className</code> (optional), <code>editable</code> (optional), and <code>style</code> (optional). </p> <p> A DataSet is constructed as: </p> <pre class="prettyprint lang-js"> var items = new vis.DataSet([ { start: new Date(2010, 7, 15), end: new Date(2010, 8, 2), // end is optional content: 'Trajectory A' // Optional: fields 'id', 'type', 'group', 'className', 'style' } // more items... ]); </pre> <p> The item properties are defined as: </p> <table class="properties" id="itemOptionTable"> <tr> <th>Name</th> <th>Type</th> <th>Required</th> <th>Description</th> </tr> <tr> <td>className</td> <td>String</td> <td>no</td> <td>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: <pre class="prettyprint lang-css"> .vis-item.red { color: white; background-color: red; border-color: darkred; }</pre> More details on how to style items can be found in the section <a href="#Styles">Styles</a>. </td> </tr> <tr> <td>align</td> <td>String</td> <td>no</td> <td>This field is optional. If set this overrides the global <code>align</code> configuration option for this item. </td> </tr> <tr> <td>content</td> <td>String</td> <td>yes</td> <td>The contents of the item. This can be plain text or html code.</td> </tr> <tr> <td>end</td> <td>Date or number or string or Moment</td> <td>no</td> <td>The end date of the item. The end date is optional, and can be left <code>null</code>. If end date is provided, the item is displayed as a range. If not, the item is displayed as a box.</td> </tr> <tr> <td>group</td> <td>any type</td> <td>no</td> <td>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.<br> </td> </tr> <tr> <td>id</td> <td>String or Number</td> <td>no</td> <td>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.</td> </tr> <tr> <td>start</td> <td>Date or number or string or Moment</td> <td>yes</td> <td>The start date of the item, for example <code>new Date(2010,9,23)</code>.</td> </tr> <tr> <td>style</td> <td>String</td> <td>no</td> <td> A css text string to apply custom styling for an individual item, for example <code>"color: red; background-color: pink;"</code>. </td> </tr> <tr> <td>subgroup</td> <td>String or Number</td> <td>none</td> <td>The id of a subgroup. Groups all items within a group per subgroup, and positions them on the same height instead of staking them on top of each other. can be ordered by specifying the option <code>subgroupOrder</code> of a group. </td> </tr> <tr> <td>title</td> <td>String</td> <td>none</td> <td>Add a title for the item, displayed when holding the mouse on the item. The title can be an HTML element or a string containing plain text or HTML. </td> </tr> <tr> <td>type</td> <td>String</td> <td>no</td> <td>The type of the item. Can be 'box' (default), 'point', 'range', or 'background'. Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date. </td> </tr> <tr> <td>limitSize</td> <td>Boolean</td> <td>no</td> <td>Some browsers cannot handle very large DIVs so by default range DIVs can be truncated outside the visible area. Setting this to <code>false</code> will cause the creation of full-size DIVs. </td> </tr> <tr class='toggle collapsible' onclick="toggleTable('itemOptionTable', 'itemEditable', this);"> <td><span parent="itemEditable" class="right-caret"></span> editable</td> <td>Boolean or Object</td> <td>no</td> <td>Override the editable option of the timeline for a specific item (assuming <code>timeline.editable.overrideItems</code> is false).</td> </tr> <tr parent="itemEditable" class="hidden"> <td class="indent">editable.remove</td> <td>boolean</td> <td>no</td> <td>If true, item can be deleted by first selecting it, and then clicking the delete button on the top right of the item. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td> </tr> <tr parent="itemEditable" class="hidden"> <td class="indent">editable.updateGroup</td> <td>boolean</td> <td>no</td> <td>If true, item can be dragged from one group to another. Only applicable when the Timeline has groups. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td> </tr> <tr parent="itemEditable" class="hidden"> <td class="indent">editable.updateTime</td> <td>boolean</td> <td>no</td> <td>If true, items can be dragged to another moment in time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td> </tr> </table> <h3 id="groups">Groups</h3> <p> For the items, groups can be an Array, a DataSet (offering 2 way data binding), or a DataView (offering 1 way data binding). Using groups, items can be grouped together. Items are filtered per group, and displayed as Group items can contain the properties <code>id</code>, <code>content</code>, and <code>className</code> (optional). </p> <p> Groups can be applied to a timeline using the method <code>setGroups</code> or supplied in the constructor. A table with groups can be created like: </p> <pre class="prettyprint lang-js"> var groups = [ { id: 1, content: 'Group 1' // Optional: a field 'className', 'style', 'order', [properties] } // more groups... ]); </pre> <p> Groups can have the following properties: </p> <table class="properties"> <tr> <th>Name</th> <th>Type</th> <th>Required</th> <th>Description</th> </tr> <tr> <td>className</td> <td>String</td> <td>no</td> <td>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 <code> .red { color: red; } </code>. More details on how to style groups can be found in the section <a href="#Styles">Styles</a>. </td> </tr> <tr> <td>content</td> <td>String or Element</td> <td>yes</td> <td>The contents of the group. This can be plain text, html code or an html element.</td> </tr> <tr> <td>id</td> <td>String or Number</td> <td>yes</td> <td>An id for the group. The group will display all items having a property <code>group</code> which matches the <code>id</code> of the group.</td> </tr> <tr> <td>style</td> <td>String</td> <td>no</td> <td> A css text string to apply custom styling for an individual group label, for example <code>"color: red; background-color: pink;"</code>. </td> </tr> <tr> <td>subgroupOrder</td> <td>String or Function</td> <td>none</td> <td>Order the subgroups by a field name or custom sort function. By default, groups are ordered by first-come, first-show. </td> </tr> <tr> <td>subgroupStack</td> <td>Object or Boolean</td> <td>none</td> <td>Enables stacking within individual subgroups. Example: <code>{'subgroup0': true, 'subgroup1': false, 'subgroup2': true}</code> For each subgroup where stacking is enabled, items will be stacked on top of each other within that subgroup such that they do no overlap. If set to <code>true</code> all subgroups will be stacked. If a value was specified for the <code>order</code> parameter in the options, that ordering will be used when stacking the items. </td> </tr> <tr> <td>title</td> <td>String</td> <td>none</td> <td>A title for the group, displayed when holding the mouse on the groups label. The title can only contain plain text. </td> </tr> <tr> <td>visible</td> <td>Boolean</td> <td>no</td> <td>Provides a means to toggle the whether a group is displayed or not. Defaults to <code>true</code>.</td> </tr> <tr> <td>nestedGroups</td> <td>Array</td> <td>no</td> <td>Array of group ids nested in the group. Nested groups will appear under this nesting group.</td> </tr> <tr> <td>showNested</td> <td>Boolean</td> <td>no</td> <td>Assuming the group has nested groups, this will set the initial state of the group - shown or collapsed. The <code>showNested</code> is defaulted to <code>true</code>.</td> </tr> </table> <h2 id="Configuration_Options">Configuration Options</h2> <p> Options can be used to customize the timeline. Options are defined as a JSON object. All options are optional. </p> <pre class="prettyprint lang-js"> var options = { width: '100%', height: '30px', margin: { item: 20 } }; </pre> <p> The following options are available. </p> <table class="options" id="optionTable"> <tr> <th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> <tr> <td>align</td> <td>String</td> <td><code>'center'</code></td> <td>Alignment of items with type 'box', 'range', and 'background'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.</td> </tr> <tr> <td>autoResize</td> <td>boolean</td> <td><code>true</code></td> <td>If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function <code>redraw()</code>.</td> </tr> <tr> <td>clickToUse</td> <td>boolean</td> <td><code>false</code></td> <td>When a Timeline is configured to be <code>clickToUse</code>, it will react to mouse and touch events only when active. When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.</td> </tr> <tr> <td>configure</td> <td>boolean or function</td> <td><code>false</code></td> <td>When true, a configurator is loaded where all configuration options of the Timeline can be changed live. The displayed options can be filtered by providing a filter function. This function is invoked with two arguments: the current <code>option</code> and the <code>path</code> (an Array) of the option within the options object. The option will be displayed when the filter function returns true. For example to only display format options: <pre class="prettyprint lang-js"> function (option, path) { return option === 'format' || path.indexOf('format') !== -1; }</pre> </td> </tr> <tr> <td>dataAttributes</td> <td>string[] or 'all'</string></td> <td><code>false</code></td> <td>An array of fields optionally defined on the timeline items that will be appended as <code>data-</code> attributes to the DOM element of the items.<br> If value is <code>'all'</code> then each field defined on the timeline item will become a <code>data-</code> attribute.</td> </tr> <tr class='toggle collapsible' onclick="toggleTable('optionTable','editable', this);"> <td><span parent="editable" class="right-caret"></span> editable</td> <td>boolean or Object</td> <td><code>false</code></td> <td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code>true</code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation. </td> </tr> <tr parent="editable" class="hidden"> <td class="indent">editable.add</td> <td>boolean</td> <td><code>false</code></td> <td>If true, new items can be created by double tapping an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td> </tr> <tr parent="editable" class="hidden"> <td class="indent">editable.remove</td> <td>boolean</td> <td><code>false</code></td> <td>If true, items can be deleted by first selecting them, and then clicking the delete button on the top right of the item. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td> </tr> <tr parent="editable" class="hidden"> <td class="indent">editable.updateGroup</td> <td>boolean</td> <td><code>false</code></td> <td>If true, items can be dragged from one group to another. Only applicable when the Timeline has groups. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td> </tr> <tr parent="editable" class="hidden"> <td class="indent">editable.updateTime</td> <td>boolean</td> <td><code>false</code></td> <td>If true, items can be dragged to another moment in time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td> </tr> <tr parent="editable" class="hidden"> <td class="indent">editable.overrideItems</td> <td>boolean</td> <td><code>false</code></td> <td>If true, item specific editable properties are overridden by timeline settings</td> </tr> <tr> <td>end</td> <td>Date or Number or String or Moment</td> <td>none</td> <td>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.</td> </tr> <tr> <td>format</td> <td>Object or Function</td> <td>none</td> <td> Apply custom date formatting of the labels on the time axis. The default value of <code>format</code> is: <pre class="prettyprint lang-js">{ minorLabels: { millisecond:'SSS', second: 's', minute: 'HH:mm', hour: 'HH:mm', weekday: 'ddd D', day: 'D', week: 'w', month: 'MMM', year: 'YYYY' }, majorLabels: { millisecond:'HH:mm:ss', second: 'D MMMM HH:mm', minute: 'ddd D MMMM', hour: 'ddd D MMMM', weekday: 'MMMM YYYY', day: 'MMMM YYYY', week: 'MMMM YYYY', month: 'YYYY', year: '' } }</pre> For values which not provided in the customized <code>options.format</code>, the default values will be used. All available formatting syntax is described in the <a href="http://momentjs.com/docs/#/displaying/format/">docs of moment.js</a>. <br> You can also use a function format for each label. The function accepts as arguments the date, scale and step in that order, and expects to return a string for the label. <pre class="prettyprint lang-js">function format({ minorLabels: Function(date: Date, scale: Number, step: Number), majorLabels: Function(date: Date, scale: Number, step: Number) }</pre> </td> </tr> <tr class='toggle collapsible' onclick="toggleTable('optionTable','groupEditable', this);"> <td><span parent="groupEditable" class="right-caret"></span> groupEditable</td> <td>boolean or Object</td> <td><code>false</code></td> <td>If true, the groups in the timeline can be manipulated. See also the callbacks <code>onAddGroup</code>, <code>onMoveGroup</code>, and <code>onRemoveGroup</code>. When <code>groupEditable</code> is an object, one can enable or disable individual manipulation actions. The editing of groups follows the same principles as for items, see section <a href="#Editing_Items">Editing Items</a> for a detailed explanation. </td> </tr> <tr parent="groupEditable" class="hidden"> <td class="indent">groupEditable.add</td> <td>boolean</td> <td><code>false</code></td> <td>If true, new groups can be created in the Timeline. For now adding new groups is done by the user.</td> </tr> <tr parent="groupEditable" class="hidden"> <td class="indent">groupEditable.remove</td> <td>boolean</td> <td><code>false</code></td> <td>If true, groups can be deleted. For now removing groups is done by the user.</td> </tr> <tr parent="groupEditable" class="hidden"> <td class="indent">groupEditable.order</td> <td>boolean</td> <td><code>false</code></td> <td>If true, groups can be dragged to change their order. Only applicable when the Timeline has groups. For this option to work properly the groupOrder and groupOrderSwap options have to be set as well.</td> </tr> <tr> <td>groupOrder</td> <td>String or Function</td> <td>'order'</td> <td>Order the groups by a field name or custom sort function. By default, groups are ordered by a property <code>order</code> (if set). If no <code>order</code> properties are provided, the order will be undetermined. </td> </tr> <tr> <td>groupOrderSwap</td> <td>Function</td> <td>none</td> <td>Swaps the positions of two groups. If groups have a custom order (via <code>groupOrder</code>) and groups are configured to be reorderable (via <code>groupEditable.order</code>), the user has to provide a function that swaps the positions of two given groups. If this option is not set, the default implementation assumes that groups hold an attribute <code>order</code> which values are changed. The signature of the <code>groupOrderWap</code> function is: <pre class="prettyprint lang-js">function groupOrderSwap(fromGroup: Object, toGroup: Object, groups: DataSet)</pre> The first to arguments hold the groups of which the positions are to be swapped and the third argument holds the DataSet with all groups. </td> </tr> <tr> <td>groupTemplate</td> <td>function</td> <td>none</td> <td>A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as the first argument and the group element as the second, and must return HTML code, a string or a template as result. When the option groupTemplate is specified, the groups do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td> </tr> <tr> <td>height</td> <td>number or String</td> <td>none</td> <td>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 <code>maxHeight</code> to prevent the timeline from getting too high in case of automatically calculated height. </td> </tr> <tr> <td>hiddenDates</td> <td>Object</td> <td>none</td> <td>This option allows you to hide specific timespans from the time axis. The dates can be supplied as an object: <code>{start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00', [repeat:'daily']}</code> or as an Array of these objects. The repeat argument is optional. The possible values are (case-sensitive): <code>daily, weekly, monthly, yearly</code>. To hide a weekend, pick any Saturday as start and the following Monday as end and set repeat to weekly. </td> </tr> <tr> <td>horizontalScroll</td> <td>Boolean</td> <td>false</td> <td>This option allows you to scroll horizontally to move backwards and forwards in the time range. Only applicable when option <code>zoomCtrl</code> is defined or <code>zoomable</code> is <code>false</code>. </td> </tr> <tr class='toggle collapsible' onclick="toggleTable('optionTable','itemsAlwaysDraggable', this);"> <td><span parent="itemsAlwaysDraggable" class="right-caret"></span> itemsAlwaysDraggable</td> <td>boolean or Object</td> <td>Object</td> <td>When a boolean, applies the value only to <code>itemsAlwaysDraggable.item</code>.</td> </tr> <tr parent="itemsAlwaysDraggable" class="hidden"> <td class="indent">itemsAlwaysDraggable.item</td> <td>boolean</td> <td><code>false</code></td> <td>If true, all items in the Timeline are draggable without being selected. If false, only the selected item(s) are draggable.</td> </tr> <tr parent="itemsAlwaysDraggable" class="hidden"> <td class="indent">itemsAlwaysDraggable.range</td> <td>boolean</td> <td><code>false</code></td> <td>If true, range of all items in the Timeline is draggable without being selected. If false, range is only draggable for the selected item(s). Only applicable when option <code>itemsAlwaysDraggable.item</code> is set <code>true</code>. </td> </tr> <tr> <td>locale</td> <td>String</td> <td>none</td> <td>Select a locale for the Timeline. See section <a href="#Localization">Localization</a> for more information.</td> </tr> <tr> <td>locales</td> <td>Object</td> <td>none</td> <td>A map with i18n locales. See section <a href="#Localization">Localization</a> for more information.</td> </tr> <tr> <td>moment</td> <td>function</td> <td>vis.moment</td> <td>A constructor for creating a moment.js Date. Allows for applying a custom time zone. See section <a href="#Time_zone">Time zone</a> for more information.</td> </tr> <tr class='toggle collapsible' onclick="toggleTable('optionTable','margin', this);"> <td><span parent="margin" class="right-caret"></span> margin</td> <td>number or Object</td> <td>Object</td> <td>When a number, applies the margin to <code>margin.axis</code>, <code>margin.item.horizontal</code>, and <code>margin.item.vertical</code>.</td> </tr> <tr parent="margin" class="hidden"> <td class="indent">margin.axis</td> <td>number</td> <td><code>20</code></td> <td>The minimal margin in pixels between items and the time axis.</td> </tr> <tr parent="margin" class="hidden"> <td class="indent">margin.item</td> <td>number</td> <td><code>10</code></td> <td>The minimal margin in pixels between items in both horizontal and vertical direction.</td> </tr> <tr parent="margin" class="hidden"> <td class="indent2">margin.item.horizontal</td> <td>number</td> <td><code>10</code></td> <td>The minimal horizontal margin in pixels between items.</td> </tr> <tr parent="margin" class="hidden"> <td class="indent2">margin.item.vertical</td> <td>number</td> <td><code>10</code></td> <td>The minimal vertical margin in pixels between items.</td> </tr> <tr> <td>max</td> <td>Date or Number or String or Moment</td> <td>none</td> <td>Set a maximum Date for the visible range. It will not be possible to move beyond this maximum. </td> </tr> <tr> <td>maxHeight</td> <td>number or String</td> <td>none</td> <td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td> </tr> <tr> <td>maxMinorChars</td> <td>number</td> <td>7</td> <td> Specifies the maximum number of characters that should fit in minor grid labels. If larger, less and wider grids will be drawn. </td> </tr> <tr> <td>min</td> <td>Date or Number or String or Moment</td> <td>none</td> <td>Set a minimum Date for the visible range. It will not be possible to move beyond this minimum. </td> </tr> <tr> <td>minHeight</td> <td>number or String</td> <td>none</td> <td>Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".</td> </tr> <tr> <td>moveable</td> <td>boolean</td> <td><code>true</code></td> <td> Specifies whether the Timeline can be moved and zoomed by dragging the window. See also option <code>zoomable</code>. </td> </tr> <tr> <td>multiselect</td> <td>boolean</td> <td><code>false</code></td> <td> If true, multiple items can be selected using ctrl+click, shift+click, or by holding items. Only applicable when option <code>selectable</code> is <code>true</code>. </td> </tr> <tr> <td style="font-size: 0.9em">multiselectPerGroup</td> <td>boolean</td> <td><code>false</code></td> <td> If true, selecting multiple items using shift+click will only select items residing in the same group as the <i>first</i> selected item. Only applicable when option <code>selectable</code> and <code>multiselect</code> are <code>true</code>. </td> </tr> <tr> <td>onAdd</td> <td>function</td> <td>none</td> <td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code>true</code>. </td> </tr> <tr> <td>onAddGroup</td> <td>function</td> <td>none</td> <td>Callback function triggered when a group is about to be added. The signature and semantics are the same as for <code>onAdd</code>. </td> </tr> <tr> <td>onDropObjectOnItem</td> <td>function</td> <td>none</td> <td>Callback function triggered when an object containing <code>target:'item'</code> in its drag data is dropped in to a timeline item. </td> </tr> <tr> <td>onInitialDrawComplete</td> <td>function</td> <td>none</td> <td>Callback function triggered when the timeline is initially drawn. This function fires once per timeline creation. </td> </tr> <tr> <td>onMove</td> <td>function</td> <td>none</td> <td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>. </td> </tr> <tr> <td>onMoveGroup</td> <td>function</td> <td>none</td> <td>Callback function triggered when a group has been moved: after the user has dragged the group to an other position. The signature and semantics are the same as for <code>onMove</code>. </td> </tr> <tr> <td>onMoving</td> <td>function</td> <td>none</td> <td>Callback function triggered repeatedly when an item is being moved. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>. </td> </tr> <tr> <td>onRemove</td> <td>function</td> <td>none</td> <td>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 <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code>true</code>. </td> </tr> <tr> <td>onRemoveGroup</td> <td>function</td> <td>none</td> <td>Callback function triggered when a group is about to be removed. The signature and semantics are the same as for <code>onRemove</code>. </td> </tr> <tr> <td>onUpdate</td> <td>function</td> <td>none</td> <td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>. </td> </tr> <tr> <td>order</td> <td>function</td> <td>none</td> <td> <p>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 arguments containing the data of two items to be compared. </p> <p style="font-style: italic">WARNING: Use with caution. Custom ordering is not suitable for large amounts of items. On load, the Timeline will render all items once to determine their width and height. Keep the number of items in this configuration limited to a maximum of a few hundred items.</p> </td> </tr> <tr class='toggle collapsible' onclick="toggleTable('optionTable','orientation', this);"> <td><span parent="orientation" class="right-caret"></span> orientation</td> <td>String or Object</td> <td><code>'bottom'</code></td> <td>Orientation of the timelines axis and items. When orientation is a string, the value is applied to both items and axis. Can be 'top', 'bottom' (default), 'both', or 'none'.</td> </tr> <tr parent="orientation" class="hidden"> <td class="indent">orientation.axis</td> <td>String</td> <td><code>'bottom'</code></td> <td>Orientation of the timeline axis: 'top', 'bottom' (default), 'both', or 'none'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom. In case of 'none', no axis is drawn at all.</td> </tr> <tr parent="orientation" class="hidden"> <td class="indent">orientation.item</td> <td>String</td> <td><code>'bottom'</code></td> <td>Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline.</td> </tr> <tr class='toggle collapsible' onclick="toggleTable('optionTable','rollingMode', this);"> <td><span parent="rollingMode" class="right-caret"></span> rollingMode</td> <td>Object</td> <td><code>Object</code></td> <td>Specify how the timeline implements rolling mode.</td> </tr> <tr parent="rollingMode" class="hidden"> <td class="indent">rollingMode.follow</td> <td>boolean</td> <td><code>false</code></td> <td>If true, the timeline will initial in a rolling mode - the current time will always be centered. I the user drags the timeline, the timeline will go out of rolling mode and a toggle button will appear. Clicking that button will go back to rolling mode. Zooming in rolling mode will zoom in to the center without consideration of the mouse position.</td> </tr> <tr parent="rollingMode" class="hidden"> <td class="indent">rollingMode.offset</td> <td>Number</td> <td><code>'0.5'</code></td> <td> Set how far from the left the rolling mode is implemented from. A percentage (i.e. a decimal between 0 and 1) Defaults to the middle or 0.5 (50%) </td> </tr> <tr> <td>rtl</td> <td>boolean</td> <td><code>false</code></td> <td>If true, the timeline will be right-to-left. Note: you can achieve rtl timeline by defining a parent node with <code>dir="rtl"</code>. The timeline knows to take the nearest parent node direction and apply it. Notice that the timeline will prefer the <code>option.rtl</code> over any parent <code>dir="rtl"</code></td> </tr> <tr> <td>selectable</td> <td>boolean</td> <td><code>true</code></td> <td>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 <code>select</code> is fired each time the selection has changed (see section <a href="#Events">Events</a>).</td> </tr> <tr> <td>showCurrentTime</td> <td>boolean</td> <td><code>true</code></td> <td>Show a vertical bar at the current time.</td> </tr> <tr> <tr> <td>showMajorLabels</td> <td>boolean</td> <td><code>true</code></td> <td>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 <code>showMajorLabels</code> is <code>false</code>, no major labels are shown.</td> </tr> <tr> <td>showMinorLabels</td> <td>boolean</td> <td><code>true</code></td> <td>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 <code>showMinorLabels</code> is <code>false</code>, no minor labels are shown. When both <code>showMajorLabels</code> and <code>showMinorLabels</code> are false, no horizontal axis will be visible.</td> </tr> <tr> <td>showTooltips</td> <td>boolean</td> <td><code>true</code></td> <td>If true, items with titles will display a tooltip. If false, item tooltips are prevented from showing.</td> </tr> <tr> <td>stack</td> <td>boolean</td> <td><code>true</code></td> <td>If true (default), items will be stacked on top of each other such that they do not overlap.</td> </tr> <tr> <td>stackSubgroups</td> <td>boolean</td> <td><code>true</code></td> <td>If true (default), subgroups will be stacked on top of each other such that they do not overlap.</td> </tr> <tr> <td>snap</td> <td>function or null</td> <td>function</td> <td>When moving items on the Timeline, they will be snapped to nice dates like full hours or days, depending on the current scale. The <code>snap</code> function can be replaced with a custom function, or can be set to <code>null</code> to disable snapping. The signature of the snap function is: <pre class="prettyprint lang-js">function snap(date: Date, scale: string, step: number) : Date or number</pre> The parameter <code>scale</code> can be can be 'millisecond', 'second', 'minute', 'hour', 'weekday, 'week', 'day, 'month, or 'year'. The parameter <code>step</code> is a number like 1, 2, 4, 5. </td> </tr> <tr> <td>start</td> <td>Date or Number or String or Moment</td> <td>none</td> <td>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.</td> </tr> <tr> <td>template</td> <td>function</td> <td>none</td> <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items' data as the first argument, the item element as the second argument and the edited data as the third argument, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td> </tr> <tr> <td>visibleFrameTemplate</td> <td>function</td> <td>none</td> <td>A template function used to generate the visible frame of the items. The function is called by the Timeline with an items' data as the first argument and the item frame element as the second, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation. This would be used as an additional way to add content that is constant in size with the visible frame of the item and does not get visibly hidden with the item's internal container: <code>vis-item-overflow</code> which is <code>overflow:hidden</code>.</td> </tr> <tr class='deprecated'> <td>throttleRedraw</td> <td>number</td> <td><code>0</code></td> <td>This option is <b>DEPRECATED</b> and no longer supported. It will be removed in the next MAJOR release.</td> </tr> <tr class='toggle collapsible' onclick="toggleTable('optionTable','timeAxis', this);"> <td><span parent="timeAxis" class="right-caret"></span> timeAxis</td> <td>Object</td> <td><code>Object</code></td> <td>Specify a fixed scale and step size for the time axis.</td> </tr> <tr parent="timeAxis" class="hidden"> <td class="indent">timeAxis.scale</td> <td>String</td> <td>none</td> <td>Set a fixed scale for the time axis of the Timeline. Choose from <code>'millisecond'</code>, <code>'second'</code>, <code>'minute'</code>, <code>'hour'</code>, <code>'weekday'</code>, <code>'week'</code>, <code>'day'</code>, <code>'month'</code>, <code>'year'</code>. Example usage: <pre class="prettyprint lang-js">var options = { timeAxis: {scale: 'minute', step: 5} }</pre> <p>Note: The 'week' scale only works properly when <a href="#Localization">locales</a> are enabled.</p> </td> </tr> <tr parent="timeAxis" class="hidden"> <td class="indent">timeAxis.step</td> <td>number</td> <td><code>1</code></td> <td> Set a fixed step size for the time axis. Only applicable when used together with <code>timeAxis.scale</code>. Choose for example 1, 2, 5, or 10.</td> </tr> <tr> <td>type</td> <td>String</td> <td>none</td> <td>Specifies the default type for the timeline items. Choose from 'box', 'point', 'range', and 'background'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created. Items of type 'background' are not editable. </td> </tr> <tr class='toggle collapsible' onclick="toggleTable('optionTable','tooltip', this);"> <td><span parent="tooltip" class="right-caret"></span> tooltip</td> <td>Object</td> <td><code>Object</code></td> <td>Specify how the tooltip is positioned.</td> </tr> <tr parent="tooltip" class="hidden"> <td class="indent">tooltip.followMouse</td> <td>boolean</td> <td><code>false</code></td> <td>If true, tooltips will follow the mouse as they move around in the item.</td> </tr> <tr parent="tooltip" class="hidden"> <td class="indent">tooltip.overflowMethod</td> <td>String</td> <td><code>'flip'</code></td> <td> Set how the tooltip should act if it is about to overflow out of the timeline.<br /> Choose from <code>'cap'</code> and <code>'flip'</code>. <br /> If it is set to <code>'cap'</code>, the tooltip will just cap its position to inside to timeline. <br /> While if it is set to <code>'flip'</code>, the position of the tooltip will flip around the cursor so that a corner is at the cursor, and the rest of it is visible. <br /> </tr> <tr class='toggle collapsible' onclick="toggleTable('optionTable','tooltipOnItemUpdateTime', this);"> <td><span parent="tooltipOnItemUpdateTime" class="right-caret"></span> tooltipOnItemUpdateTime</td> <td>Object/Boolean</td> <td><code>false</code></td> <td>Show a tooltip on updating an item's time. Note: <code>editable.updateTime</code> must be <code>true</code></td> </tr> <tr parent="tooltipOnItemUpdateTime" class="hidden"> <td class="indent">template</td> <td>Function</td> <td>none</td> <td>A template function used to generate the contents of the tooltip. The function is called by the Timeline with an item data as the first argument, and must return HTML code, a string or a template as result. See section <a href="#Templates">Templates</a> for a detailed explanation. </td> </tr> <tr> <td>verticalScroll</td> <td>Boolean</td> <td><code>false</code></td> <td> Show a vertical scroll on the side of the group list and link it to the scroll event when zoom is not triggered. Notice that defining this option as <code>true</code> will NOT override <code>horizontalScroll</code>. The scroll event will be vertically ignored, but a vertical scrollbar will be visible </td> </tr> <tr> <td>width</td> <td>String or Number</td> <td><code>'100%'</code></td> <td>The width of the timeline in pixels or as a percentage.</td> </tr> <tr> <td>zoomable</td> <td>boo