@ -312,7 +312,7 @@ var data = new vis.DataSet([data] [, options])
<td>Object | Array</td>
<td>Object | Array</td>
<td>
<td>
Get a single item, multiple items, or all items from the DataSet.
Get a single item, multiple items, or all items from the DataSet.
Usage examples can be found in section <ahref="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <ahref="#Data_Selection">Data Selection</a>. When no item is found,<code>null</code> is returned when a single item was requested, and and empty Array is returned in case of multiple id's.
Usage examples can be found in section <ahref="#Getting_Data">Getting Data</a>. The available <code>options</code> are described in section <ahref="#Data_Selection">Data Selection</a>. When a single id is requested and not found<code>null</code> is returned. When multiple ids are requested and not found an Array containing <code>null</code>s is returned.
<td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options:
<td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options:
<ul>
<ul>
<li><code>animate: boolean or number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
<li><code>animation: boolean | {duration: number, easingFunction: string}</code><br>If true (default), the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'.</li>
<td>The type of endpoint. Default is<code>arrow</code>. Also possible is<code>circle</code>.</td>
<td>The type of endpoint. Possible values are:<code>arrow</code>, <code>bar</code>,<code>circle</code>. The default is <code>arrow</code>.
</tr>
</tr>
<trparent="arrows"class="hidden">
<trparent="arrows"class="hidden">
<tdclass="indent">arrows.middle</td>
<tdclass="indent">arrows.middle</td>
<td>Object or Boolean</td>
<td>Object or Boolean</td>
<td><code>Object</code></td>
<td><code>Object</code></td>
<td>Exactly the same as the to object but with an arrowhead in the center of the edge.</td>
<td>Similar to the 'to' object, but with an arrowhead in the center of the edge. The direction of the arrow can be flipped by using a negative value for <code>arrows.middle.scaleFactor</code>.</td>
<td>When a clusteredEdgeId is available, this method will return the original baseEdgeId provided in <code>data.edges</code><br/>
<td>When a clusteredEdgeId is available, this method will return the original baseEdgeId provided in <code>data.edges</code><br/>
ie. After clustering the 'SelectEdge' event is fired but provides only the clustered edge. This method can then be used to return the baseEdgeId.
ie. After clustering the 'SelectEdge' event is fired but provides only the clustered edge. This method can then be used to return the baseEdgeId.<br><br>
<b>This method is deprecated. Please use <code>getBaseEdges()</code> instead.</b>
<td>For the given <code>clusteredEdgeId</code>, this method will return all the original base edge id's provided in <code>data.edges</code>.
For a non-clustered (i.e. 'base') edge, <code>clusteredEdgeId</code> is returned.<br/><br/>
Only the base edge id's are returned. All clustered edges id's under <code>clusteredEdgeId</code> are skipped, but scanned recursively to return their base id's.<br/>
<td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code><code>true</code></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.
<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 <ahref="#Editing_Items">Editing Items</a> for a detailed explanation.
See section <ahref="#Editing_Items">Editing Items</a> for a detailed explanation.
</td>
</td>
</tr>
</tr>
@ -732,7 +750,7 @@ function (option, path) {
<td>Boolean</td>
<td>Boolean</td>
<td>false</td>
<td>false</td>
<td>This option allows you to scroll horizontally to move backwards and forwards in the time range.
<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>. Notice that defining this option as <code>true</code> will override <code>verticalScroll</code> scroll event but not eliminate the vertical scrollbar.
Only applicable when option <code>zoomCtrl</code> is defined or <code>zoomable</code> is <code>false</code>.
</td>
</td>
</tr>
</tr>
@ -883,10 +901,10 @@ function (option, path) {
<td>onAdd</td>
<td>onAdd</td>
<td>function</td>
<td>function</td>
<td>none</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 <ahref="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code><code>true</code></code>.
<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 <ahref="#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>
</td>
</tr>
</tr>
<tr>
<tr>
<td>onAddGroup</td>
<td>onAddGroup</td>
<td>function</td>
<td>function</td>
@ -894,23 +912,31 @@ function (option, path) {
<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>Callback function triggered when a group is about to be added. The signature and semantics are the same as for <code>onAdd</code>.
</td>
</td>
</tr>
</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>
<tr>
<td>onUpdate</td>
<td>onInitialDrawComplete</td>
<td>function</td>
<td>function</td>
<td>none</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 <ahref="#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><code>true</code></code>.
<td>Callback function triggered when the timeline is initially drawn. This function fires once per timeline creation.
</td>
</td>
</tr>
</tr>
<tr>
<tr>
<td>onMove</td>
<td>onMove</td>
<td>function</td>
<td>function</td>
<td>none</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 <ahref="#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><code>true</code></code>.
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <ahref="#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>
</td>
</tr>
</tr>
<tr>
<tr>
<td>onMoveGroup</td>
<td>onMoveGroup</td>
<td>function</td>
<td>function</td>
@ -918,23 +944,23 @@ function (option, path) {
<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>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>
</td>
</tr>
</tr>
<tr>
<tr>
<td>onMoving</td>
<td>onMoving</td>
<td>function</td>
<td>function</td>
<td>none</td>
<td>none</td>
<td>Callback function triggered repeatedly when an item is being moved. See section <ahref="#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><code>true</code></code>.
<td>Callback function triggered repeatedly when an item is being moved. See section <ahref="#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>
</td>
</tr>
</tr>
<tr>
<tr>
<td>onRemove</td>
<td>onRemove</td>
<td>function</td>
<td>function</td>
<td>none</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 <ahref="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code><code>true</code></code>.
<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 <ahref="#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>
</td>
</tr>
</tr>
<tr>
<tr>
<td>onRemoveGroup</td>
<td>onRemoveGroup</td>
<td>function</td>
<td>function</td>
@ -942,7 +968,15 @@ function (option, path) {
<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>Callback function triggered when a group is about to be removed. The signature and semantics are the same as for <code>onRemove</code>.
</td>
</td>
</tr>
</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 <ahref="#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>
<tr>
<td>order</td>
<td>order</td>
<td>function</td>
<td>function</td>
@ -1028,7 +1062,7 @@ function (option, path) {
<td>By default, the timeline shows both minor and major date labels on the
<td>By default, the timeline shows both minor and major date labels on the
time axis.
time axis.
For example the minor labels show minutes and the major labels show hours.
For example the minor labels show minutes and the major labels show hours.
When <code>showMajorLabels</code> is <code><code>false</code></code>, no major labels
When <code>showMajorLabels</code> is <code>false</code>, no major labels
are shown.</td>
are shown.</td>
</tr>
</tr>
@ -1039,7 +1073,7 @@ function (option, path) {
<td>By default, the timeline shows both minor and major date labels on the
<td>By default, the timeline shows both minor and major date labels on the
time axis.
time axis.
For example the minor labels show minutes and the major labels show hours.
For example the minor labels show minutes and the major labels show hours.
When <code>showMinorLabels</code> is <code><code>false</code></code>, no minor labels
When <code>showMinorLabels</code> is <code>false</code>, no minor labels
are shown. When both <code>showMajorLabels</code> and
are shown. When both <code>showMajorLabels</code> and
<code>showMinorLabels</code> are false, no horizontal axis will be
<code>showMinorLabels</code> are false, no horizontal axis will be
visible.</td>
visible.</td>
@ -1199,7 +1233,7 @@ function (option, path) {
<td><code>true</code></td>
<td><code>true</code></td>
<td>
<td>
Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
Only applicable when option <code>moveable</code> is set <code>true</code>.
</td>
</td>
</tr>
</tr>
@ -1209,7 +1243,7 @@ function (option, path) {
<td><code>''</code></td>
<td><code>''</code></td>
<td>Specifies whether the Timeline is only zoomed when an additional key is down.
<td>Specifies whether the Timeline is only zoomed when an additional key is down.
Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'.
Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'.
Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
Only applicable when option <code>moveable</code> is set <code>true</code>.
When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code><code>true</code></code>), the user can:
When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code>true</code>), the user can:
</p>
</p>
<ul>
<ul>
<li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items (when <code>multiselect: true</code>).</li>
<li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items (when <code>multiselect: true</code>).</li>
@ -1805,6 +1839,7 @@ var items = new vis.DataSet([
<ul>
<ul>
<li><code>onAdd(item, callback)</code> Fired when a new item is about to be added. If not implemented, the item will be added with default text contents.</li>
<li><code>onAdd(item, callback)</code> Fired when a new item is about to be added. If not implemented, the item will be added with default text contents.</li>
<li><code>onUpdate(item, callback)</code> 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.</li>
<li><code>onUpdate(item, callback)</code> 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.</li>
<li><code>onDropObjectOnItem(objectData, item)</code> Fired when an object is dropped in to an existing timeline item.</li>
<li><code>onMove(item, callback)</code> Fired when an item has been moved. If not implemented, the move action will be accepted.</li>
<li><code>onMove(item, callback)</code> Fired when an item has been moved. If not implemented, the move action will be accepted.</li>
<li><code>onMoving(item, callback)</code> Fired repeatedly while an item is being moved (dragged). Can be used to adjust the items start, end, and/or group to allowed regions.</li>
<li><code>onMoving(item, callback)</code> Fired repeatedly while an item is being moved (dragged). Can be used to adjust the items start, end, and/or group to allowed regions.</li>
<li><code>onRemove(item, callback)</code> Fired when an item is about to be deleted. If not implemented, the item will be always removed.</li>
<li><code>onRemove(item, callback)</code> Fired when an item is about to be deleted. If not implemented, the item will be always removed.</li>
@ -2113,6 +2148,15 @@ var options = {
</style>
</style>
</pre>
</pre>
<h3id="Performance_Tips">Performance Tips</h3>
<p>Defining a timeline with many items and/or groups might affect initial loading time and general performance.
Here are some tips to improve performance and avoid slow loading time:</p>
<ul>
<li>Define items and group with <code>DataSets</code></li>
<li>Avoid applying heavy CSS on items (such as <code>box-shadow</code>, gradient background colors, etc.)</li>
<li>Defining a <code>start</code> and an <code>end</code> in the timeline options.
Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode. <br/><ul><li>Clicking on the cluster will change it to a star (updateClusteredNode).</li>
Demonstrating getBaseEdges, getClusteredEdges updateEdge and updateClusteredNode. <br/><ul><li>Clicking on the cluster will change it to a star (updateClusteredNode).</li>
<li>Clicking on an edge will make it red regardless of whether it is a clusteredEdge or not (updateEdge)</li>
<li>Clicking on an edge will make it red regardless of whether it is a clusteredEdge or not (updateEdge)</li>
<li>Clicking on an edge will also show the results of getBaseEdge and getClusteredEdge</li>
<li>Clicking on an edge will also show the results of getBaseEdges and getClusteredEdge</li>
</ul>
</ul>
</p>
</p>
@ -94,7 +94,7 @@ Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode.
<p>This example shows the workings of the subgroups. Subgroups can be stacked on each other, and the items within each subgroup can be stacked.</p>
<p>When stacking is on for the whole timeline, all items in the timeline will be stacked with respect to each other <em>unless</em> the <code>stackSubgroups</code> option is set to <code>true</code>
and at least one subgroup has stacking enabled. In that case the subgroups will be stacked with respect to each other and the elements in each subgroup will be stacked based on the individual
<p>If the height of the timeline is limited some items may be vertically offscreen. This demo uses <code>Timeline.setSelection(ids, {focus: true})</code> and demonstrates that focusing on an item will
cause the timeline to scroll vertically to the item that is being focused on. You can use the buttons below select a random item either above or below the currently selected item.
</p>
<buttonid="prevFocus">Select Item Above</button>
<buttonid="nextFocus">Select Item Below</button>
<br/>
<p>If focusing on multiple items only the first item will be scrolled to. Try entering several ids and hitting <em>select</em>.</p>
<p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set the item's information as you want this way.</p>
<p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set the item's information as you want this way.</p>
<divid="mytimeline"></div>
<divid="mytimeline"></div>
<div>
<h3>Items:</h3>
<ulclass="items">
<lidraggable="true"class="item">
item 1 - box
</li>
<lidraggable="true"class="item">
item 2 - point
</li>
<lidraggable="true"class="item">
item 3 - range
</li>
<lidraggable="true"class="item">
item 3 - range - fixed times - <br>
(start: now, end: now + 10 min)
<divclass='items-panel'>
<divclass='side'>
<h3>Items:</h3>
<ulclass="items">
<lidraggable="true"class="item">
item 1 - box
</li>
<lidraggable="true"class="item">
item 2 - point
</li>
<lidraggable="true"class="item">
item 3 - range
</li>
<lidraggable="true"class="item">
item 3 - range - fixed times - <br>
(start: now, end: now + 10 min)
</li>
</ul>
</div>
<divclass='side'>
<h3>Object with "target:'item'":</h3>
<lidraggable="true"class="object-item">
object with target:'item'
</li>
</li>
</ul>
</div>
</div>
</div>
<script>
<script>
@ -99,7 +130,11 @@
start: new Date(),
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.20.0) is not yet available on cdnjs, <ahref='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br/>";
document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.21.0) is not yet available on cdnjs, <ahref='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br/>";