They are sorted by the x value. If sort is enabled, more optimizations are possible, increasing the performance.</td>
</tr>
<tr>
<tdclass="greenField">stack</td>
<td>stack</td>
<td>Boolean</td>
<td>true</td>
<td>If stack is enabled, the graphs will be stacked upon eachother when applicable. This currently only works with bar graphs but linegraph support is being worked on.</td>
<title>vis.js - A dynamic, browser based visualization library.</title>
<title>vis.js - Edges documentation.</title>
<!-- Bootstrap core CSS -->
<linkhref="../css/bootstrap.css"rel="stylesheet">
@ -81,7 +81,7 @@
<h1>Network - edges</h1>
<p>Handles the creation and deletion of edges and contains the global edge options and styles.</p>
<aclass="btn btn-primary"role="button"onclick="history.back()">Back to overview.</a>
<h3>Options</h3>
<p>The options for the edges have to be contained in an object titled 'edges'. All of these options can be supplied per edge as well. Obviously, 'id' should not be defined globally but per edge. Options defined
@ -361,6 +361,12 @@ network.setOptions(options);
the label will align itself according to the edge.
</td>
</tr>
<tr>
<td>from</td>
<td>Number or String</td>
<td></td>
<td>Edges are between two nodes, one to and one from. This is where you define the from node. You have to supply the corresponding node ID. This naturally only applies to individual edges.</td>
</tr>
<tr>
<td>hidden</td>
<td>Boolean</td>
@ -393,7 +399,7 @@ var options: {
<td>id</td>
<td>String</td>
<td><code>undefined</code></td>
<td>The id of the edge. The id is optional for edges. When not supplied, an UUID will be assigned to the edge.</td>
<td>The id of the edge. The id is optional for edges. When not supplied, an UUID will be assigned to the edge. This naturally only applies to individual edges.</td>
</tr>
<tr>
<td>label</td>
@ -614,6 +620,12 @@ var options: {
<td><code>undefined</code></td>
<td>The title is shown in a pop-up when the mouse moves over the edge.</td>
</tr>
<tr>
<td>to</td>
<td>Number or String</td>
<td></td>
<td>Edges are between two nodes, one to and one from. This is where you define the to node. You have to supply the corresponding node ID. This naturally only applies to individual edges.</td>
The containedNodesPositions contain the positions of the nodes in the cluster at the moment they were clustered.
This function is expected to return the newPositions, which can be the containedNodesPositions (altered) or a new object. This has to be an object with keys equal
to the nodeIds that exist in the containedNodesPositions and an <code>{x:x,y:y}</code> position object. <br><br>
For all nodeIds not listed in this returned object, we will position them at the location of the cluster. This is also the default behaviour when no releaseFunction is defined.
<p>Used for all user interaction with the network. Handles mouse and touch events as well as the navigation buttons and the popups.</p>
<aclass="btn btn-primary"role="button"onclick="history.back()">Back to overview.</a>
<h3>Options</h3>
<p>The options for the interaction module have to be contained in an object titled 'interaction'.</p>
<p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
@ -86,7 +86,7 @@ var options = {
hideEdgesOnDrag: false,
hideNodesOnDrag: false,
hover: false,
hoverSelectedEdges: true,
hoverConnectedEdges: true,
keyboard: {
enabled: false,
speed: {x: 10, y: 10, zoom: 0.02},
@ -123,7 +123,7 @@ network.setOptions(options);
<tr><td>hideEdgesOnDrag</td><td>Boolean</td><td><code>false</code></td><td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hideNodesOnDrag</td><td>Boolean</td><td><code>false</code></td><td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hover</td><td>Boolean</td><td><code>false</code></td><td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr>
<tr><td>hoverSelectedEdges</td><td>Boolean</td><td><code>true</code></td><td>When true, on hovering over a node, it's connecting edges are highlighted.</td></tr>
<tr><td>hoverConnectedEdges</td><td>Boolean</td><td><code>true</code></td><td>When true, on hovering over a node, it's connecting edges are highlighted.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','keyboard', this);"><td><spanparent="keyboard"class="right-caret"></span> keyboard</td><td>Object or Boolean</td><td><code>Object</code></td><td>When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.</td></tr>
<trparent="keyboard"class="hidden"><tdclass="indent">keyboard.enabled</td><td>Boolean</td><td><code>false</code></td><td>Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
<trparent="keyboard"class="hidden"><tdclass="indent">keyboard.speed.x</td><td>Number</td><td><code>1</code></td><td>The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.</td></tr>
<tr><td>enabled</td><td>Boolean</td><td><code>false</code></td><td>Toggle the manipulation system on or off. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.</td></tr>
<tr><td>enabled</td><td>Boolean</td><td><code>false</code></td><td>Toggle the manipulation system on or off. Even when false, the manipulation API through the methods will still work. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.</td></tr>
<tr><td>initiallyActive</td><td>Boolean</td><td><code>true</code></td><td>Toggle whether the toolbar is visible initially or if only the edit button is visible initially.</td></tr>
<tr><td>addNode</td><td>Boolean or Function</td><td><code>true</code></td><td>You can use these options to switch certain functionalities on or off of attach
a handler function to them. These functions are called before the action is performed. If a node is going to be added through the manipulation system,
the addNode function will be called first. With this, you can provide a gui for your users, abort the process or anything else you want to do. For all except the editNode functionality, these handler functions are optional.
<br><br>
When you supply a boolean, you only toggle the adding of nodes.
When you supply a boolean, you only toggle the 'add node' button on the GUI of the manipulation system. The lack of handling function could effect the API when using the methods.
When a function is supplied, it will be called when the user clicks the canvas in 'addNode' mode. This function will receive two variables: the properties of the node that can be created and a callback function. If you call the callback function with the properties of the new node, the node will be added. <br><br> Example:
<preclass="code">
var options = {
@ -128,7 +128,7 @@ var options = {
}
</pre>
This function changes the label of the new node into 'hello world'. If you do not want the node created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr>
<tr><td>addEdge</td><td>Boolean or Function</td><td><code>true</code></td><td>If boolean, toggle the adding of edges.
<tr><td>addEdge</td><td>Boolean or Function</td><td><code>true</code></td><td>If boolean, toggle the availability of the 'addEdge' button in the GUI, the API through the methods will still work except (obviously) there will be no handler function.
When a function is supplied, it will be called when the user drags the new edge from one node to the next in 'addEdge' mode. This function will receive two variables: the properties of the edge that can be created and a callback function. If you call the callback function with the properties of the new edge, the edge will be added. <br><br> Example:
<preclass="code">
var options = {
@ -149,9 +149,9 @@ var options = {
</pre>
This example code will show a popup if you connect a node to itself to ask you if that was what you wanted. If you do not want the edge created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr></td></tr>
<tr><td>editNode</td><td>Function</td><td><code>undefined</code></td><td>Editing of nodes is only possible when a handling function is supplied. If this is not the case, editing of nodes will be disabled. The function will be called when a node is selected and the 'Edit Node' button on the toolbar is pressed. This function will be called like the <code>addNode</code> function with the node's data and a callback function.</td></tr>
<tr><td>editEdge</td><td>Boolean or Function</td><td><code>true</code></td><td>If boolean, toggle the editing of edges. When a function is supplied, it will be called when an edge is selcted and the 'Edit Edge' button on the toolbar is pressed. This function will be called in the same way the <code>addEdge</code> function was called. If the callback is not performed, the edge will remain hanging where it was released. <b>To cancel, call the callback function with <code>null</code> as argument or without arguments</b>.</td></tr>
<tr><td>deleteNode</td><td>Boolean or Function</td><td><code>true</code></td><td>If boolean, toggle the deletion of nodes. If function, it will be called when a node is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>deleteEdge</td><td>Boolean or Function</td><td><code>true</code></td><td>If boolean, toggle the deletion of edges. If function, it will be called when an edge is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>editEdge</td><td>Boolean or Function</td><td><code>true</code></td><td>If boolean, toggle the editing of edges in the GUI. When a function is supplied, it will be called when an edge is selcted and the 'Edit Edge' button on the toolbar is pressed. This function will be called in the same way the <code>addEdge</code> function was called. If the callback is not performed, the edge will remain hanging where it was released. <b>To cancel, call the callback function with <code>null</code> as argument or without arguments</b>.</td></tr>
<tr><td>deleteNode</td><td>Boolean or Function</td><td><code>true</code></td><td>If boolean, toggle the deletion of nodes in the GUI. If function, it will be called when a node is selected and the 'Delete selected' button is pressed. When using a function, it will receive a callback and an object with an array of selected nodeIds and an array of selected edges Ids. These are the items that will be deleted if the callback is performed.</td></tr>
<tr><td>deleteEdge</td><td>Boolean or Function</td><td><code>true</code></td><td>If boolean, toggle the deletion of edges in the GUI. If function, it will be called when an edge is selected and the 'Delete selected' button is pressed. When using a function, it will receive a callback and an object with an array of selected nodeIds (empty) and an array of selected edges Ids. These are the items that will be deleted if the callback is performed.</td></tr>
<tr><td>controlNodeStyle</td><td>Object</td><td>Object</td><td>You can supply any styling information you'd like here. All fields described in <ahref="./nodes.html">the nodes module</a> are allowed except obviously for id, x, y and fixed. <br><br>Default:
<title>vis.js - A dynamic, browser based visualization library.</title>
<title>vis.js - Nodes documentation.</title>
<!-- Bootstrap core CSS -->
<linkhref="../css/bootstrap.css"rel="stylesheet">
@ -73,7 +73,7 @@
<h1>Network - nodes</h1>
<p>Handles the creation and deletion of nodes and contains the global node options and styles.</p>
<aclass="btn btn-primary"role="button"onclick="history.back()">Back to overview.</a>
<h3>Options</h3>
<p>The options for the nodes have to be contained in an object titled 'nodes'. All of these options can be supplied per node as well. Obviously, 'id' should not be defined globally but per node. Options defined
in the global nodes object, are applied to all nodes. If a node has options of its own, those will be used instead of the global options.</p>
<tr><td>enabled</td><td>Boolean</td><td><code>true</code></td><td>Toggle the physics system on or off. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','barnesHut', this);"><td><spanparent="barnesHut"class="right-caret"></span> barnesHut</td><td>Object</td><td><code>Object</code></td><td>BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.gravitationalConstant</td><td>Number</td><td><code>-2000</code></td><td>Gravity attracts. We like repulsion. So the value is negative. If you want the repulsion to be stronger, decrease the value (so -10000, -50000).</td></tr>
<trparent="barnesHut"class="hidden"><tdclass="indent">barnesHut.centralGravity</td><td>Number</td><td><code>0.3</code></td><td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<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), or 'both'.</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>
<trparent="orientation"class="hidden">
<tdclass="indent">orientation.axis</td>
@ -1001,6 +1001,12 @@ function (option, path) {
<li><code>what</code> (String or null): name of the clicked thing: <code>item</code>, <code>background</code>, <code>axis</code>, <code>group-label</code>, <code>custom-time</code>, or <code>current-time</code>.</li>
<li><code>event</code> (Object): the original click event.</li>
</ul>
Example usage:
<preclass="prettyprint lang-js">
document.getElementById('myTimeline').onclick = function (event) {
Alex de Mulder
9 years ago