@ -149,7 +149,7 @@ var data = new vis.DataSet([data] [, options])
</td>
</tr>
<tr>
<td>convert</td>
<td>type</td>
<td>Object.<String, String></td>
<td>none</td>
<td>
@ -227,7 +227,7 @@ var data = new vis.DataSet([data] [, options])
<td>Number[]</td>
<td>
Get ids of all items or of a filtered set of items.
Available <code>options</code> are described in section <ahref="#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>convert</code> are not applicable in case of <code>getIds</code>.
Available <code>options</code> are described in section <ahref="#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>type</code> are not applicable in case of <code>getIds</code>.
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
@ -195,8 +202,8 @@ var items = [
<td>type</td>
<td>String</td>
<td>'box'</td>
<td>The type of the item. Can be 'box' (default), 'point', 'range', or 'rangeoverflow'.
Types 'box' and 'point' need a start date, and types 'range' and 'rangeoverflow' need both a start and end date. Types 'range' and rangeoverflow are equal, except that overflowing text in 'range' is hidden, while visible in 'rangeoverflow'.
<td>The type of the item. Can be 'box' (default), 'point', or 'range'.
Types 'box' and 'point' need a start date, and type 'range' needs both a start and end date.
</td>
</tr>
<tr>
@ -458,6 +465,16 @@ var options = {
<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>true</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>onAdd</td>
<td>Function</td>
@ -587,8 +604,8 @@ var options = {
<tr>
<td>type</td>
<td>String</td>
<td>'box'</td>
<td>Specifies the default type for the timeline items. Choose from 'box', 'point', 'range', and 'rangeoverflow'. Note that individual items can override this default type.
<td>none</td>
<td>Specifies the default type for the timeline items. Choose from 'box', 'point', and 'range'. 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.
</td>
</tr>
@ -599,6 +616,16 @@ var options = {
<td>The width of the timeline in pixels or as a percentage.</td>
</tr>
<tr>
<td>zoomable</td>
<td>Boolean</td>
<td>true</td>
<td>
Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
Only applicable when option <code>moveable</code> is set <code>true</code>.
</td>
</tr>
<tr>
<td>zoomMax</td>
<td>Number</td>
@ -646,6 +673,13 @@ timeline.clear({options: true}); // clear options only
</td>
</tr>
<tr>
<td>destroy()</td>
<td>none</td>
<td>Destroy the Timeline. The timeline is removed from memory. all DOM elements and event listeners are cleaned up.
</td>
</tr>
<tr>
<td>fit()</td>
<td>none</td>
@ -895,7 +929,7 @@ var options = {
</p>
<ul>
<li><code>item</code>: the item being manipulated</li>
<li><code>callback</code>: a callback function which must be invoked to report back. The callback must be invoked as <code>callback(item | null)</code>. Here, <code>item</code> can contain changes to the passed item. When invoked as <code>callback(null)</code>, the action will be cancelled.</li>
<li><code>callback</code>: a callback function which must be invoked to report back. The callback must be invoked as <code>callback(item | null)</code>. Here, <code>item</code> can contain changes to the passed item. Parameter `item` typically contains fields `content`, `start`, and optionally `end`. The type of `start` and `end` is determined by the DataSet type configuration and is `Date` by default. When invoked as <code>callback(null)</code>, the action will be cancelled.</li>
<p>This example shows how to serialize and deserialize JSON data, and load this in the Timeline via a DataSet. Serialization and deserialization is needed when loading or saving data from a server.</p>
In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css:
</p>
<pre>
.vis.timeline .item.range .content {
overflow: visible;
}
</pre>
<divid="visualization"></div>
<scripttype="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 with overflowing text content', start: '2014-04-20', end: '2014-04-26'},
{id: 2, content: 'item 2 with overflowing text content', start: '2014-05-14', end: '2014-05-18'},
{id: 3, content: 'item 3 with overflowing text content', start: '2014-06-18', end: '2014-06-22'},
{id: 4, content: 'item 4 with overflowing text content', start: '2014-06-16', end: '2014-06-17'},
{id: 5, content: 'item 5 with overflowing text content', start: '2014-06-25', end: '2014-06-27'},
{id: 6, content: 'item 6 with overflowing text content', start: '2014-09-27', end: '2014-09-28'}
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);