2. <code>Object</code> (the 'rendering' options): If an object is provided it may contain following properties which all can be optional: <code>onRender</code>, <code>className</code><code>size</code> and/or <code>style</code>. For more information check the property's documentation.<br/>
2. <code>Object</code> (the 'rendering' options): If an object is provided it may contain following properties which all can be optional: <code>onRender</code>, <code>className</code><code>size</code> and/or <code>style</code>. For more information check the property's documentation.<br/>
<preclass="prettyprint lang-js">
<preclass="prettyprint lang-js">
drawPoints: {
drawPoints: {
@ -582,7 +583,7 @@ drawPoints: {
style: 'square'
style: 'square'
}
}
</pre>
</pre>
3. <code>Function</code>: If a function is provided it will be used as a callback. The function may return values from listing 1 or 2.<br/>
3. <code>Function</code>: If a function is provided it will be used as a callback. The function may return values from listing 1 or 2.<br/>
<td>Array of group ids nested in the group. Nested groups will appear under this nesting group.</td>
<td>Array of group ids nested in the group. Nested groups will appear under this nesting group.</td>
</tr>
</tr>
<tr>
<tr>
<td>showNestedGroups</td>
<td>showNested</td>
<td>Boolean</td>
<td>Boolean</td>
<td>no</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>showNestedGroups</code> is defaulted to <code>true</code>.</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>
</tr>
</table>
</table>
@ -611,6 +612,7 @@ function (option, path) {
hour: 'HH:mm',
hour: 'HH:mm',
weekday: 'ddd D',
weekday: 'ddd D',
day: 'D',
day: 'D',
week: 'w',
month: 'MMM',
month: 'MMM',
year: 'YYYY'
year: 'YYYY'
},
},
@ -621,6 +623,7 @@ function (option, path) {
hour: 'ddd D MMMM',
hour: 'ddd D MMMM',
weekday: 'MMMM YYYY',
weekday: 'MMMM YYYY',
day: 'MMMM YYYY',
day: 'MMMM YYYY',
week: 'MMMM YYYY',
month: 'YYYY',
month: 'YYYY',
year: ''
year: ''
}
}
@ -954,13 +957,29 @@ function (option, path) {
<td>Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline.</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>
<td>Specify how the timeline implements rolling mode.</td>
</tr>
<trparent="rollingMode"class="hidden">
<tdclass="indent">rollingMode.follow</td>
<td>boolean</td>
<td>boolean</td>
<td><code>false</code></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>
<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>
<trparent="rollingMode"class="hidden">
<tdclass="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>
<tr>
<td>rtl</td>
<td>rtl</td>
<td>boolean</td>
<td>boolean</td>
@ -1007,6 +1026,13 @@ function (option, path) {
visible.</td>
visible.</td>
</tr>
</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>
<tr>
<td>stack</td>
<td>stack</td>
<td>boolean</td>
<td>boolean</td>
@ -1027,7 +1053,7 @@ function (option, path) {
<td>function</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:
<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:
<preclass="prettyprint lang-js">function snap(date: Date, scale: string, step: number) : Date or number</pre>
<preclass="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, 'day, 'month, or 'year'. The parameter <code>step</code> is a number like 1, 2, 4, 5.
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>
</td>
</tr>
</tr>
@ -1054,11 +1080,11 @@ function (option, path) {
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>
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>
<trclass='depricated'>
<trclass='deprecated'>
<td>throttleRedraw</td>
<td>throttleRedraw</td>
<td>number</td>
<td>number</td>
<td><code>0</code></td>
<td><code>0</code></td>
<td>This option is <b>DEPRICATED</b> and no longer supported. It will be removed in the next MAJOR release.</td>
<td>This option is <b>DEPRECATED</b> and no longer supported. It will be removed in the next MAJOR release.</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>'day'</code>, <code>'month'</code>, <code>'year'</code>. Example usage:
<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:
<preclass="prettyprint lang-js">var options = {
<preclass="prettyprint lang-js">var options = {
timeAxis: {scale: 'minute', step: 5}
timeAxis: {scale: 'minute', step: 5}
}</pre>
}</pre>
<p>Note: The 'week' scale only works properly when <ahref="#Localization">locales</a> are enabled.</p>
</td>
</td>
</tr>
</tr>
@ -1307,12 +1334,13 @@ document.getElementById('myTimeline').onclick = function (event) {
</tr>
</tr>
<tr>
<tr>
<td>moveTo(time [, options])</td>
<td>moveTo(time [, options, callback])</td>
<td>none</td>
<td>none</td>
<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>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, 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 <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, 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 <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
</ul>
</ul>
A callback <code>function</code> can be passed as an optional parameter. This function will be called at the end of moveTo function.
</td>
</td>
</tr>
</tr>
@ -1421,12 +1449,13 @@ document.getElementById('myTimeline').onclick = function (event) {
</tr>
</tr>
<tr>
<tr>
<td>setWindow(start, end [, options])</td>
<td>setWindow(start, end [, options, callback])</td>
<td>none</td>
<td>none</td>
<td>Set the current visible window. The parameters <code>start</code> and <code>end</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. If the parameter value of <code>start</code> or <code>end</code> is null, the parameter will be left unchanged. Available options:
<td>Set the current visible window. The parameters <code>start</code> and <code>end</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. If the parameter value of <code>start</code> or <code>end</code> is null, the parameter will be left unchanged. Available options:
<ul>
<ul>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, 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 <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, 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 <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
</ul>
</ul>
A callback <code>function</code> can be passed as an optional parameter. This function will be called at the end of setWindow function.
</td>
</td>
</tr>
</tr>
@ -1438,21 +1467,23 @@ document.getElementById('myTimeline').onclick = function (event) {
</tr>
</tr>
<tr>
<tr>
<td>zoomIn(percentage [, options])</td>
<td>zoomIn(percentage [, options, callback])</td>
<td>none</td>
<td>none</td>
<td>Zoom in the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options:
<td>Zoom in the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options:
<ul>
<ul>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, 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 <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, 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 <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
</ul>
</ul>
A callback <code>function</code> can be passed as an optional parameter. This function will be called at the end of zoomIn function.
<td>Zoom out the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options:
<td>Zoom out the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options:
<ul>
<ul>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, 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 <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, 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 <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
</ul>
</ul>
A callback <code>function</code> can be passed as an optional parameter. This function will be called at the end of zoomOut function.
Note: the 'week' scale is not included in the automatic zoom levels as its scale is not a direct logical successor of 'days' nor a logical predecessor of 'months'
document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.19.1) 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.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/>";