summaryrefslogtreecommitdiff
path: root/www/lib/vis/docs
diff options
context:
space:
mode:
Diffstat (limited to 'www/lib/vis/docs')
-rw-r--r--www/lib/vis/docs/data/dataset.html8
-rw-r--r--www/lib/vis/docs/graph2d/index.html2
-rw-r--r--www/lib/vis/docs/graph3d/index.html13
-rw-r--r--www/lib/vis/docs/network/edges.html14
-rw-r--r--www/lib/vis/docs/network/index.html108
-rw-r--r--www/lib/vis/docs/timeline/index.html162
6 files changed, 244 insertions, 63 deletions
diff --git a/www/lib/vis/docs/data/dataset.html b/www/lib/vis/docs/data/dataset.html
index 3f90ead4..af0f2b4d 100644
--- a/www/lib/vis/docs/data/dataset.html
+++ b/www/lib/vis/docs/data/dataset.html
@@ -598,9 +598,11 @@ function (event, properties, senderId) {
<code>update</code>, and <code>remove</code>,
<code>properties</code> is always an object containing a property
<code>items</code>, which contains an array with the ids of the affected
- items. The <code>update</code> event has an extra field <code>oldData</code>
- containing the original data of the updated items, and a field <code>data</code>
- containing the changes: the properties of the items that are being updated.
+ items. The <code>update</code> and <code>remove</code> events have an extra
+ field <code>oldData</code> containing the original data of the items in the
+ dataset before the items were updated or removed. The <code>update</code>
+ event also contains a field <code>data</code> containing the changes:
+ the properties of the items that are being updated.
</td>
</tr>
<tr>
diff --git a/www/lib/vis/docs/graph2d/index.html b/www/lib/vis/docs/graph2d/index.html
index ed062202..8f07e20a 100644
--- a/www/lib/vis/docs/graph2d/index.html
+++ b/www/lib/vis/docs/graph2d/index.html
@@ -1202,7 +1202,7 @@ function (option, path) {
<tr>
<td>on(event, callback)</td>
<td>none</td>
- <td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
+ <td>Create an event listener. The callback function is invoked every time the event is triggered. Available events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
</tr>
<tr>
diff --git a/www/lib/vis/docs/graph3d/index.html b/www/lib/vis/docs/graph3d/index.html
index c0e604a7..429e2a98 100644
--- a/www/lib/vis/docs/graph3d/index.html
+++ b/www/lib/vis/docs/graph3d/index.html
@@ -436,6 +436,14 @@ var options = {
</td>
</tr>
<tr>
+ <td>showLegend</td>
+ <td>boolean</td>
+ <td>none</td>
+ <td>If true, a legend is drawn for the graph (if the graph type supports it).
+ By default a legend is drawn for dot and dot-color style graphs.
+ </td>
+ </tr>
+ <tr>
<td>showShadow</td>
<td>boolean</td>
<td>false</td>
@@ -466,7 +474,8 @@ var options = {
The contents of the tooltip can be customized by providing a callback
function as <code>tooltip</code>. In this case the function is called
with an object containing parameters <code>x</code>,
- <code>y</code>, and <code>z</code> argument,
+ <code>y</code>, <code>z</code>, and <code>data</code>
+ (the source JS object for the point) as an argument,
and must return a string which may contain HTML.
</td>
</tr>
@@ -796,4 +805,4 @@ graph3d.on('cameraPositionChange', onCameraPositionChange);
<script src="../js/tipuesearch.config.js"></script>
<script src="../js/tipuesearch.js"></script>
<!-- controller -->
-<script src="../js/main.js"></script> \ No newline at end of file
+<script src="../js/main.js"></script>
diff --git a/www/lib/vis/docs/network/edges.html b/www/lib/vis/docs/network/edges.html
index 42c132ac..423f9a45 100644
--- a/www/lib/vis/docs/network/edges.html
+++ b/www/lib/vis/docs/network/edges.html
@@ -115,9 +115,9 @@
var options = {
edges:{
arrows: {
- to: {enabled: false, scaleFactor:1},
- middle: {enabled: false, scaleFactor:1},
- from: {enabled: false, scaleFactor:1}
+ to: {enabled: false, scaleFactor:1, type:'arrow'},
+ middle: {enabled: false, scaleFactor:1, type:'arrow'},
+ from: {enabled: false, scaleFactor:1, type:'arrow'}
},
arrowStrikethrough: true,
color: {
@@ -244,6 +244,12 @@ network.setOptions(options);
<td>The scale factor allows you to change the size of the arrowhead.</td>
</tr>
<tr parent="arrows" class="hidden">
+ <td class="indent2">arrows.to.type</td>
+ <td>String</td>
+ <td><code>arrow</code></td>
+ <td>The type of endpoint. Default is <code>arrow</code>. Also possible is <code>circle</code>.</td>
+ </tr>
+ <tr parent="arrows" class="hidden">
<td class="indent">arrows.middle</td>
<td>Object or Boolean</td>
<td><code>Object</code></td>
@@ -703,4 +709,4 @@ var options: {
<script src="../js/tipuesearch.config.js"></script>
<script src="../js/tipuesearch.js"></script>
<!-- controller -->
-<script src="../js/main.js"></script> \ No newline at end of file
+<script src="../js/main.js"></script>
diff --git a/www/lib/vis/docs/network/index.html b/www/lib/vis/docs/network/index.html
index bd7d7c3c..cfd03d64 100644
--- a/www/lib/vis/docs/network/index.html
+++ b/www/lib/vis/docs/network/index.html
@@ -210,7 +210,20 @@
<ul>
<li><a href="#modules">Modules</a></li>
<li><a href="#options">Options</a></li>
- <li><a href="#methods">Methods</a></li>
+ <li><a href="#methods">Method Reference</a>
+ <ul>
+ <li><a href="#methodGlobal">Global</a></li>
+ <li><a href="#methodCanvas">Canvas</a></li>
+ <li><a href="#methodClustering">Clustering</a></li>
+ <li><a href="#methodLayout">Layout</a></li>
+ <li><a href="#methodManipulation">Manipulation</a></li>
+ <li><a href="#methodInformation">Information</a></li>
+ <li><a href="#methodPhysics">Physics</a></li>
+ <li><a href="#methodSelection">Selection</a></li>
+ <li><a href="#methodViewport">Viewport</a></li>
+ <li><a href="#methodConfigurator">Configurator</a></li>
+ </ul>
+ </li>
<li><a href="#Events">Events</a></li>
<li><a href="#importing_data">Importing Data</a>
<ul>
@@ -315,19 +328,23 @@ network.setOptions(options);
<tr><td id="event_locale">locale</td>
<td>String</td>
<td><code>'en'</code></td>
- <td>Select the locale. By default, the language is English. If you want to use another language, you
- will
- need to define your own locale and refer to it here.
+ <td>Select the locale. By default, the language is English.
</td>
</tr>
<tr><td id="event_locales">locales</td>
<td>Object</td>
<td>defaultLocales</td>
- <td>Locales object. By default only <code>'en'</code>, <code>'de'</code>, <code>'es'</code> and <code>'nl'</code> are supported. Take a look
- at
- the <a href="#locales" data-scroll=""
- data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }">locales
- section below</a> for more explaination on how to customize this.
+ <td>Locales object. By default
+ <code>'en'</code>,
+ <code>'de'</code>,
+ <code>'es'</code>,
+ <code>'it'</code>,
+ <code>'nl'</code>
+ <code>'pt-br'</code>,
+ <code>'ru'</code>
+ are supported. Take a look at the
+ <a href="#locales" data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }">locales section below</a>
+ for more explaination on how to customize this.
</td>
</tr>
<tr><td id="event_clickToUse">clickToUse</td>
@@ -420,7 +437,7 @@ var locales = {
the
modules listed above.</p>
<table class="methods-collapsable" id="methodTable">
- <tr class="subHeader">
+ <tr id="methodGlobal" class="subHeader">
<td colspan="2">Global methods for the network.</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','destroy', this);">
@@ -485,7 +502,7 @@ var locales = {
</tr>
- <tr class="subHeader">
+ <tr id="methodCanvas" class="subHeader">
<td colspan="2">Methods related to the canvas.</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','canvasToDOM', this);">
@@ -532,7 +549,7 @@ var locales = {
<td>Set the size of the canvas. This is automatically done on a window resize.</td>
</tr>
- <tr class="subHeader">
+ <tr id="methodClustering" class="subHeader">
<td colspan="2">Clustering</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','cluster', this);">
@@ -607,6 +624,49 @@ var locales = {
<code>network.clustering.findNode('fred')</code> will return <code>['A','B','C','fred']</code>.
</td>
</tr>
+ <tr class="collapsible toggle" onclick="toggleTable('methodTable','getClusteredEdges', this);">
+ <td colspan="2"><span parent="getClusteredEdges" class="right-caret" id="method_getClusteredEdges"></span> getClusteredEdges(
+ <code>String baseEdgeId</code>)
+ </tr>
+ <tr class="hidden" parent="getClusteredEdges">
+ <td class="midMethods">Returns: Array</td>
+ <td>Similiar to <code>findNode</code> in that it returns all the edge ids that were created from the provided edge during clustering
+ </td>
+ </tr>
+ <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBaseEdge', this);">
+ <td colspan="2"><span parent="getBaseEdge" class="right-caret" id="method_getBaseEdge"></span> getBaseEdge(
+ <code>String clusteredEdgeId</code>)
+ </tr>
+ <tr class="hidden" parent="getBaseEdge">
+ <td class="midMethods">Returns: Value</td>
+ <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.
+ </td>
+ </tr>
+ <tr class="collapsible toggle" onclick="toggleTable('methodTable','updateEdge', this);">
+ <td colspan="2"><span parent="updateEdge" class="right-caret" id="method_updateEdge"></span> updateEdge(
+ <code>String startEdgeId, Object options</code>)
+ </tr>
+ <tr class="hidden" parent="updateEdge">
+ <td class="midMethods">Returns: none</td>
+ <td>Visible edges between clustered nodes are not the same edge as the ones provided in <code>data.edges</code> passed on <code>network</code> creation<br/>
+ With each layer of clustering, copies of the edges between clusters are created and the previous edges are hidden, until the cluster is opened.<br/>
+ This method takes an edgeId (ie. a base edgeId from <data>data.edges</code>) and applys the options to it and any edges that were created from it while clustering.<br><br> Example:
+ <code>network.clustering.updateEdge(originalEdge.id, {color : '#aa0000'});</code><br/>
+ This would turn the base edge and any subsequent edges red, so when opening clusters the edges will all be the same color.
+ </td>
+ </tr>
+ <tr class="collapsible toggle" onclick="toggleTable('methodTable','updateClusteredNode', this);">
+ <td colspan="2"><span parent="updateClusteredNode" class="right-caret" id="method_updateClusteredNode"></span> updateClusteredNode(
+ <code>String clusteredNodeId, Object options</code>)
+ </tr>
+ <tr class="hidden" parent="updateClusteredNode">
+ <td class="midMethods">Returns: none</td>
+ <td>Clustered Nodes when created are not contained in the original <code>data.nodes</code> passed on <code>network</code> creation<br/>
+ This method updates the cluster node.<br><br> Example:
+ <code>network.clustering.updateClusteredNode(clusteredNodeId, {shape : 'star'});</code>
+ </td>
+ </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','isCluster', this);">
<td colspan="2"><span parent="isCluster" class="right-caret" id="method_isCluster"></span> isCluster(
<code>String nodeId</code>)
@@ -649,7 +709,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</td>
</tr>
- <tr class="subHeader">
+ <tr id="methodLayout" class="subHeader">
<td colspan="2">Layout</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getSeed', this);">
@@ -666,7 +726,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</tr>
- <tr class="subHeader">
+ <tr id="methodManipulation" class="subHeader">
<td colspan="2">Manipulation methods to use the manipulation system without GUI.</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','enableEditMode', this);">
@@ -727,7 +787,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</tr>
- <tr class="subHeader">
+ <tr id="methodInformation" class="subHeader">
<td colspan="2">Methods to get information on nodes and edges.</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getPositions', this);">
@@ -825,7 +885,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</tr>
- <tr class="subHeader">
+ <tr id="methodPhysics" class="subHeader">
<td colspan="2">Physics methods to control when the simulation should run.</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','startSimulation', this);">
@@ -856,7 +916,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</tr>
- <tr class="subHeader">
+ <tr id="methodSelection" class="subHeader">
<td colspan="2">Selection methods for nodes and edges.</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelection', this);">
@@ -942,7 +1002,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','setSelection', this);">
<td colspan="2"><span parent="setSelection" class="right-caret" id="method_setSelection"></span> setSelection(
- <code>Object selection</code>,
+ <code>Object selection</code>,
<code>[Object options]</code>)</td>
</tr>
<tr class="hidden" parent="setSelection">
@@ -971,7 +1031,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
</tr>
- <tr class="subHeader">
+ <tr id="methodViewport" class="subHeader">
<td colspan="2">Methods to control the viewport for zoom and animation.</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getScale', this);">
@@ -1083,7 +1143,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<td class="midMethods">Returns: none</td>
<td>Programatically release the focussed node.</td>
</tr>
- <tr class="subHeader">
+ <tr id="methodConfigurator" class="subHeader">
<td colspan="2">Methods to use with the configurator module.</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getOptionsFromConfigurator', this);">
@@ -1181,7 +1241,13 @@ var options = {
node
any way you want. This is also the style object that is provided in the processProperties function
for
- fine tuning. If undefined, default node options will be used.
+ fine tuning. If undefined, default node options will be used.<br/><br/>
+ Default functionality only allows clustering if the cluster will contain 2 or more nodes. To allow clustering of single nodes you can use the <code>allowSingleNodeCluster : true</code> property.
+<pre class="prettyprint lang-js">
+ clusterNodeProperties: {
+ allowSingleNodeCluster: true
+ }
+</pre>
</td>
</tr>
<tr><td id="event_clusterEdgeProperties">clusterEdgeProperties</td>
diff --git a/www/lib/vis/docs/timeline/index.html b/www/lib/vis/docs/timeline/index.html
index f0b4d742..b7a14a1c 100644
--- a/www/lib/vis/docs/timeline/index.html
+++ b/www/lib/vis/docs/timeline/index.html
@@ -31,13 +31,13 @@
<script language="JavaScript">
smoothScroll.init();
</script>
-
+
<!-- Tipue vendor css -->
<link href="../css/tipuesearch.css" rel="stylesheet">
-
+
<!-- Tipue vendor css -->
<link href="../css/tipuesearch.css" rel="stylesheet">
-
+
<script type="text/javascript" src="../js/toggleTable.js"></script>
</head>
<body onload="prettyPrint();">
@@ -162,8 +162,8 @@
<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 libraries script and css files in the
+ 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>
@@ -213,7 +213,7 @@
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>group</code> (optional), <code>className</code> (optional),
<code>editable</code> (optional), and <code>style</code> (optional).
</p>
@@ -557,7 +557,7 @@ function (option, path) {
<tr>
<td>format</td>
- <td>Object</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:
@@ -583,8 +583,16 @@ function (option, path) {
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>
@@ -624,7 +632,7 @@ function (option, path) {
If no <code>order</code> properties are provided, the order will be undetermined.
</td>
</tr>
-
+
<tr>
<td>groupOrderSwap</td>
<td>Function</td>
@@ -640,7 +648,7 @@ function (option, path) {
<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 argument, and must return HTML code 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>
+ <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 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>
@@ -668,6 +676,15 @@ function (option, path) {
</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>. Notice that defining this option as <code>true</code> will override <code>verticalScroll</code> scroll event but not eliminate the vertical scrollbar.
+ </td>
+ </tr>
+
+ <tr>
<td>itemsAlwaysDraggable</td>
<td>boolean</td>
<td><code>false</code></td>
@@ -787,7 +804,7 @@ function (option, path) {
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>
@@ -805,7 +822,7 @@ function (option, path) {
<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><code>true</code></code>.
</td>
</tr>
-
+
<tr>
<td>onAddGroup</td>
<td>function</td>
@@ -829,7 +846,7 @@ function (option, path) {
<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><code>true</code></code>.
</td>
</tr>
-
+
<tr>
<td>onMoveGroup</td>
<td>function</td>
@@ -853,7 +870,7 @@ function (option, path) {
<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><code>true</code></code>.
</td>
</tr>
-
+
<tr>
<td>onRemoveGroup</td>
<td>function</td>
@@ -895,6 +912,12 @@ 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>
</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>
@@ -964,14 +987,7 @@ function (option, path) {
<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 argument, and must return HTML code 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>throttleRedraw</td>
- <td>number</td>
- <td><code>0</code></td>
- <td>Limit the maximum number of redraws to once every x milliseconds. For example setting throttleRedraw to `100` milliseconds will limit the number of redraws to 10 times per second.</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 and the item element as the second, and must return HTML code 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 class='toggle collapsible' onclick="toggleTable('optionTable','timeAxis', this);">
@@ -1008,6 +1024,27 @@ function (option, path) {
</td>
</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 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>
@@ -1187,7 +1224,7 @@ document.getElementById('myTimeline').onclick = function (event) {
<tr>
<td>on(event, callback)</td>
<td>none</td>
- <td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
+ <td>Create an event listener. The callback function is invoked every time the event is triggered. Available events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>, <code>itemover</code>, <code>itemout</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
</tr>
<tr>
@@ -1226,7 +1263,7 @@ document.getElementById('myTimeline').onclick = function (event) {
<td>none</td>
<td>Adjust the time of a custom time bar.
Parameter <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
- Parameter <code>id</code> is the idof the custom time bar, and is <code>undefined</code> by default.
+ Parameter <code>id</code> is the id of the custom time bar, and is <code>undefined</code> by default.
</td>
</tr>
@@ -1298,9 +1335,20 @@ document.getElementById('myTimeline').onclick = function (event) {
</td>
</tr>
- </table>
-
+ <tr>
+ <td>zoomIn(percentage)</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.
+ </td>
+ </tr>
+ <tr>
+ <td>zoomOut(percentage)</td>
+ <td>none</td>
+ <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.
+ </td>
+ </tr>
+ </table>
<h2 id="Events">Events</h2>
<p>
@@ -1314,7 +1362,7 @@ document.getElementById('myTimeline').onclick = function (event) {
<pre class="prettyprint lang-js">
timeline.on('select', function (properties) {
- alert('selected items: ' + properties.nodes);
+ alert('selected items: ' + properties.items);
});
</pre>
@@ -1324,7 +1372,7 @@ timeline.on('select', function (properties) {
<pre class="prettyprint lang-js">
function onSelect (properties) {
- alert('selected items: ' + properties.nodes);
+ alert('selected items: ' + properties.items);
}
// add event listener
@@ -1443,6 +1491,28 @@ timeline.off('select', onSelect);
</tr>
<tr>
+ <td>itemover</td>
+ <td>
+ <ul>
+ <li><code>item</code>: hovered item id</li>
+ <li><code>event</code>: the original mouseover event</li>
+ </ul>
+ </td>
+ <td>Fired when the user moves the mouse over an item.</td>
+ </tr>
+
+ <tr>
+ <td>itemout</td>
+ <td>
+ <ul>
+ <li><code>item</code>: hovered item id</li>
+ <li><code>event</code>: the original mouseout event</li>
+ </ul>
+ </td>
+ <td>Fired when the user moves the mouse out of an item.</td>
+ </tr>
+
+ <tr>
<td>timechange</td>
<td>
<ul>
@@ -1528,7 +1598,9 @@ var items = new vis.DataSet([
</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 or 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>
+ <li><code>callback</code>: a callback function which must be invoked to report back. The callback must be invoked as <code>callback(item)</code> or <code>callback(null)</code>.
+ Here, <code>item</code> can contain changes to the passed item. Parameter <code>item</code> 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>
</ul>
<p>
@@ -1554,7 +1626,7 @@ var items = new vis.DataSet([
<h2 id="Templates">Templates</h2>
<p>
- Timeline supports templates to format item contents. Any template engine (such as <a href="http://handlebarsjs.com/">handlebars</a> or <a href="http://mustache.github.io/">mustache</a>) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an items data as argument, and outputs formatted HTML:
+ Timeline supports templates to format item contents. Any template engine (such as <a href="http://handlebarsjs.com/">handlebars</a> or <a href="http://mustache.github.io/">mustache</a>) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as argument, and outputs formatted HTML:
</p>
<pre class="prettyprint lang-js">var options = {
@@ -1601,6 +1673,17 @@ var template = Handlebars.compile(source);
};
</pre>
+<h3>React templates</h3>
+
+You can use a React component for the templates by rendering them to the templates' element directly:
+
+<pre class="prettyprint lang-js">
+ template: function (item, element) {
+ return ReactDOM.render(&lt;b&gt;{item.content}&lt;/b&gt;, element);
+ },
+</pre>
+
+
<h3>Multiple templates</h3>
In order to support multiple templates, the template handler can be extended to switch between different templates, depending on a specific item property:
@@ -1640,7 +1723,7 @@ var options = {
<h3>Create a new locale</h3>
- To load a locale into the Timeline not supported by default, one can add a new locale to the option <code>locales</code>:
+ To load a locale (that is not supported by default) into the Timeline, one can add a new locale to the option <code>locales</code>:
<pre class="prettyprint lang-js">var options = {
locales: {
@@ -1676,6 +1759,14 @@ var options = {
</td>
</tr>
<tr>
+ <td>Italian</td>
+ <td>
+ <code>it</code><br>
+ <code>it_IT</code><br>
+ <code>it_CH</code>
+ </td>
+ </tr>
+ <tr>
<td>Dutch</td>
<td>
<code>nl</code><br>
@@ -1683,12 +1774,19 @@ var options = {
<code>nl_BE</code>
</td>
</tr>
+ <tr>
+ <td>German</td>
+ <td>
+ <code>de</code><br>
+ <code>de_DE</code><br>
+ </td>
+ </tr>
</table>
<h2 id="Time_zone">Time zone</h2>
<p>
- By default, the Timeline displays time in local time. To display a Timeline in an other time zone or in UTC, the date constructor can be overloaded via the configuration option <code>moment</code>, which by default is the constructor function of moment.js. More information about UTC with moment.js can be found in the docs: <a href="http://momentjs.com/docs/#/parsing/utc/">http://momentjs.com/docs/#/parsing/utc/</a>.
+ By default, the Timeline displays time in local time. To display a Timeline in another time zone or in UTC, the date constructor can be overloaded via the configuration option <code>moment</code>, which by default is the constructor function of moment.js. More information about UTC with moment.js can be found in the docs: <a href="http://momentjs.com/docs/#/parsing/utc/">http://momentjs.com/docs/#/parsing/utc/</a>.
</p>
<p>
@@ -1762,7 +1860,7 @@ var options = {
<td>Days</td><td><code>vis-date1</code>, <code>vis-date2</code>, ..., <code>vis-date31</code></td>
</tr>
<tr>
- <td>Months</td><td><code>vis-januari</code>, <code>vis-februari</code>, <code>vis-march</code>, <code>vis-april</code>, <code>vis-may</code>, <code>vis-june</code>, <code>vis-july</code>, <code>vis-august</code>, <code>vis-september</code>, <code>vis-october</code>, <code>vis-november</code>, <code>vis-december</code></td>
+ <td>Months</td><td><code>vis-january</code>, <code>vis-february</code>, <code>vis-march</code>, <code>vis-april</code>, <code>vis-may</code>, <code>vis-june</code>, <code>vis-july</code>, <code>vis-august</code>, <code>vis-september</code>, <code>vis-october</code>, <code>vis-november</code>, <code>vis-december</code></td>
</tr>
<tr>
<td>Years</td><td><code>vis-year2014</code>, <code>vis-year2015</code>, ...</td>
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-08 10:47:39 +0000