Browse Source

Released version 0.5.1

gh-pages
josdejong 10 years ago
parent
commit
58349ddba7
38 changed files with 6308 additions and 2243 deletions
  1. BIN
      dist/img/graph/acceptDeleteIcon.png
  2. BIN
      dist/img/graph/addNodeIcon.png
  3. BIN
      dist/img/graph/backIcon.png
  4. BIN
      dist/img/graph/connectIcon.png
  5. BIN
      dist/img/graph/cross.png
  6. BIN
      dist/img/graph/cross2.png
  7. BIN
      dist/img/graph/deleteIcon.png
  8. +0
    -0
      dist/img/graph/downArrow.png
  9. BIN
      dist/img/graph/editIcon.png
  10. +0
    -0
      dist/img/graph/leftArrow.png
  11. +0
    -0
      dist/img/graph/minus.png
  12. +0
    -0
      dist/img/graph/plus.png
  13. +0
    -0
      dist/img/graph/rightArrow.png
  14. +0
    -0
      dist/img/graph/upArrow.png
  15. +0
    -0
      dist/img/graph/zoomExtends.png
  16. BIN
      dist/img/timeline/delete.png
  17. +246
    -26
      dist/vis.css
  18. +4482
    -2099
      dist/vis.js
  19. +10
    -9
      dist/vis.min.js
  20. +15
    -15
      docs/dataset.html
  21. +4
    -4
      docs/dataview.html
  22. +385
    -56
      docs/graph.html
  23. +135
    -12
      docs/timeline.html
  24. BIN
      download/vis.zip
  25. +1
    -2
      examples/graph/02_random_nodes.html
  26. +2
    -2
      examples/graph/07_selections.html
  27. +1
    -4
      examples/graph/19_scale_free_graph_clustering.html
  28. +9
    -9
      examples/graph/20_navigation.html
  29. +213
    -0
      examples/graph/21_data_manipulation.html
  30. +373
    -0
      examples/graph/22_les_miserables.html
  31. +113
    -0
      examples/graph/23_hierarchical_layout.html
  32. +139
    -0
      examples/graph/24_hierarchical_layout_userdefined.html
  33. +4
    -0
      examples/graph/index.html
  34. +17
    -4
      examples/timeline/06_event_listeners.html
  35. +65
    -0
      examples/timeline/07_custom_time_bar.html
  36. +91
    -0
      examples/timeline/08_edit_items.html
  37. +2
    -0
      examples/timeline/index.html
  38. +1
    -1
      index.html

BIN
dist/img/graph/acceptDeleteIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
dist/img/graph/addNodeIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
dist/img/graph/backIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
dist/img/graph/connectIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
dist/img/graph/cross.png View File

Before After
Width: 7  |  Height: 7  |  Size: 18 KiB

BIN
dist/img/graph/cross2.png View File

Before After
Width: 5  |  Height: 5  |  Size: 17 KiB

BIN
dist/img/graph/deleteIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

dist/img/downarrow.png → dist/img/graph/downArrow.png View File


BIN
dist/img/graph/editIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

dist/img/leftarrow.png → dist/img/graph/leftArrow.png View File


dist/img/minus.png → dist/img/graph/minus.png View File


dist/img/plus.png → dist/img/graph/plus.png View File


dist/img/rightarrow.png → dist/img/graph/rightArrow.png View File


dist/img/uparrow.png → dist/img/graph/upArrow.png View File


dist/img/zoomExtends.png → dist/img/graph/zoomExtends.png View File


BIN
dist/img/timeline/delete.png View File

Before After
Width: 16  |  Height: 16  |  Size: 665 B

+ 246
- 26
dist/vis.css View File

@ -11,7 +11,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .panel {
.vis.timeline .vpanel {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
} }
@ -51,7 +51,7 @@
border-bottom: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;
} }
.vis.timeline .labels .label-set .label {
.vis.timeline .labels .label-set .vlabel {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -59,19 +59,19 @@
color: #4d4d4d; color: #4d4d4d;
} }
.vis.timeline.top .labels .label-set .label,
.vis.timeline.top .labels .label-set .vlabel,
.vis.timeline.top .groupset .itemset-axis { .vis.timeline.top .groupset .itemset-axis {
border-top: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf;
border-bottom: none; border-bottom: none;
} }
.vis.timeline.bottom .labels .label-set .label,
.vis.timeline.bottom .labels .label-set .vlabel,
.vis.timeline.bottom .groupset .itemset-axis { .vis.timeline.bottom .groupset .itemset-axis {
border-top: none; border-top: none;
border-bottom: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;
} }
.vis.timeline .labels .label-set .label .inner {
.vis.timeline .labels .label-set .vlabel .inner {
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
} }
@ -101,6 +101,7 @@
border-color: #97B0F8; border-color: #97B0F8;
background-color: #D5DDF6; background-color: #D5DDF6;
display: inline-block; display: inline-block;
padding: 5px;
} }
.vis.timeline .item.selected { .vis.timeline .item.selected {
@ -109,6 +110,10 @@
z-index: 999; z-index: 999;
} }
.vis.timeline.editable .item.selected {
cursor: move;
}
.vis.timeline .item.point.selected { .vis.timeline .item.point.selected {
background-color: #FFF785; background-color: #FFF785;
z-index: 999; z-index: 999;
@ -139,43 +144,35 @@
} }
.vis.timeline .dot { .vis.timeline .dot {
padding: 0;
border: 5px solid #97B0F8; border: 5px solid #97B0F8;
position: absolute; position: absolute;
border-radius: 5px; border-radius: 5px;
-moz-border-radius: 5px; /* For Firefox 3.6 and older */ -moz-border-radius: 5px; /* For Firefox 3.6 and older */
} }
.vis.timeline .item.range {
overflow: hidden;
.vis.timeline .item.range,
.vis.timeline .item.rangeoverflow{
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: 2px; border-radius: 2px;
-moz-border-radius: 2px; /* For Firefox 3.6 and older */ -moz-border-radius: 2px; /* For Firefox 3.6 and older */
box-sizing: border-box;
} }
.vis.timeline .item.rangeoverflow {
border-style: solid;
border-width: 1px;
border-radius: 2px;
-moz-border-radius: 2px; /* For Firefox 3.6 and older */
}
.vis.timeline .item.range .drag-left, .vis.timeline .item.rangeoverflow .drag-left {
cursor: w-resize;
z-index: 1000;
}
.vis.timeline .item.range .drag-right, .vis.timeline .item.rangeoverflow .drag-right {
cursor: e-resize;
z-index: 1000;
}
.vis.timeline .item.range .content, .vis.timeline .item.rangeoverflow .content {
.vis.timeline .item.range .content,
.vis.timeline .item.rangeoverflow .content {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.vis.timeline .item.range .content {
overflow: hidden;
max-width: 100%;
}
.vis.timeline .item.line { .vis.timeline .item.line {
padding: 0;
position: absolute; position: absolute;
width: 0; width: 0;
border-left-width: 1px; border-left-width: 1px;
@ -183,11 +180,44 @@
} }
.vis.timeline .item .content { .vis.timeline .item .content {
margin: 5px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.vis.timeline .item .delete {
background: url('img/timeline/delete.png') no-repeat top center;
position: absolute;
width: 24px;
height: 24px;
top: 0;
right: -24px;
cursor: pointer;
}
.vis.timeline .item.range .drag-left,
.vis.timeline .item.rangeoverflow .drag-left {
position: absolute;
width: 24px;
height: 100%;
top: 0;
left: -4px;
cursor: w-resize;
z-index: 10000;
}
.vis.timeline .item.range .drag-right,
.vis.timeline .item.rangeoverflow .drag-right {
position: absolute;
width: 24px;
height: 100%;
top: 0;
right: -4px;
cursor: e-resize;
z-index: 10001; /* a little higher z-index than .drag-left */
}
.vis.timeline .axis { .vis.timeline .axis {
position: relative; position: relative;
} }
@ -241,3 +271,193 @@
cursor: move; cursor: move;
z-index: 9; z-index: 9;
} }
div.graph-manipulationDiv {
border-width:0px;
border-bottom: 1px;
border-style:solid;
border-color: #d6d9d8;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
width: 600px;
height:30px;
z-index:10;
position:absolute;
}
div.graph-manipulation-editMode {
height:30px;
z-index:10;
position:absolute;
margin-top:20px;
}
div.graph-manipulation-closeDiv {
height:30px;
width:30px;
z-index:11;
position:absolute;
margin-top:3px;
margin-left:590px;
background-position: 0px 0px;
background-repeat:no-repeat;
background-image: url("img/graph/cross.png");
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
span.graph-manipulationUI {
font-family: verdana;
font-size: 12px;
-moz-border-radius: 15px;
border-radius: 15px;
display:inline-block;
background-position: 0px 0px;
background-repeat:no-repeat;
height:24px;
margin: -14px 0px 0px 10px;
vertical-align:middle;
cursor: pointer;
padding: 0px 8px 0px 8px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
span.graph-manipulationUI:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
}
span.graph-manipulationUI:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
}
span.graph-manipulationUI.back {
background-image: url("img/graph/backIcon.png");
}
span.graph-manipulationUI.none:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
cursor: default;
}
span.graph-manipulationUI.none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
}
span.graph-manipulationUI.none {
padding: 0px 0px 0px 0px;
}
span.graph-manipulationUI.notification{
margin: 2px;
font-weight: bold;
}
span.graph-manipulationUI.add {
background-image: url("img/graph/addNodeIcon.png");
}
span.graph-manipulationUI.edit {
background-image: url("img/graph/editIcon.png");
}
span.graph-manipulationUI.edit.editmode {
background-color: #fcfcfc;
border-style:solid;
border-width:1px;
border-color: #cccccc;
}
span.graph-manipulationUI.connect {
background-image: url("img/graph/connectIcon.png");
}
span.graph-manipulationUI.delete {
background-image: url("img/graph/deleteIcon.png");
}
/* top right bottom left */
span.graph-manipulationLabel {
margin: 0px 0px 0px 23px;
line-height: 25px;
}
div.graph-seperatorLine {
display:inline-block;
width:1px;
height:20px;
background-color: #bdbdbd;
margin: 5px 7px 0px 15px;
}
div.graph-navigation {
width:34px;
height:34px;
z-index:10;
-moz-border-radius: 17px;
border-radius: 17px;
position:absolute;
display:inline-block;
background-position: 2px 2px;
background-repeat:no-repeat;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.graph-navigation:hover {
box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
}
div.graph-navigation:active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
}
div.graph-navigation.up {
background-image: url("img/graph/upArrow.png");
margin-top:520px;
margin-left:55px;
}
div.graph-navigation.down {
background-image: url("img/graph/downArrow.png");
margin-top:560px;
margin-left:55px;
}
div.graph-navigation.left {
background-image: url("img/graph/leftArrow.png");
margin-top:560px;
margin-left:15px;
}
div.graph-navigation.right {
background-image: url("img/graph/rightArrow.png");
margin-top:560px;
margin-left:95px;
}
div.graph-navigation.zoomIn {
background-image: url("img/graph/plus.png");
margin-top:560px;
margin-left:555px;
}
div.graph-navigation.zoomOut {
background-image: url("img/graph/minus.png");
margin-top:560px;
margin-left:515px;
}
div.graph-navigation.zoomExtends {
background-image: url("img/graph/zoomExtends.png");
margin-top:520px;
margin-left:555px;
}

+ 4482
- 2099
dist/vis.js
File diff suppressed because it is too large
View File


+ 10
- 9
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 15
- 15
docs/dataset.html View File

@ -62,8 +62,8 @@ data.add([
]); ]);
// subscribe to any change in the DataSet // subscribe to any change in the DataSet
data.subscribe('*', function (event, params, senderId) {
console.log('event', event, params);
data.on('*', function (event, properties, senderId) {
console.log('event', event, properties);
}); });
// update an existing item // update an existing item
@ -545,8 +545,8 @@ var items = data.get({
<p> <p>
One can subscribe on changes in a DataSet. One can subscribe on changes in a DataSet.
A subscription can be created using the method <code>subscribe</code>,
and removed with <code>unsubscribe</code>.
A subscription can be created using the method <code>on</code>,
and removed with <code>off</code>.
</p> </p>
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
@ -554,8 +554,8 @@ var items = data.get({
var data = new vis.DataSet(); var data = new vis.DataSet();
// subscribe to any change in the DataSet // subscribe to any change in the DataSet
data.subscribe('*', function (event, params, senderId) {
console.log('event:', event, 'params:', params, 'senderId:', senderId);
data.on('*', function (event, properties, senderId) {
console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
}); });
// add an item // add an item
@ -565,14 +565,14 @@ data.remove(1); // triggers an 'remove' event
</pre> </pre>
<h3 id="Subscribe">Subscribe</h3>
<h3 id="On">On</h3>
<p> <p>
Subscribe to an event. Subscribe to an event.
</p> </p>
Syntax: Syntax:
<pre class="prettyprint lang-js">DataSet.subscribe(event, callback)</pre>
<pre class="prettyprint lang-js">DataSet.on(event, callback)</pre>
Where: Where:
<ul> <ul>
@ -587,17 +587,17 @@ Where:
</li> </li>
</ul> </ul>
<h3 id="Unsubscribe">Unsubscribe</h3>
<h3 id="Off">Off</h3>
<p> <p>
Unsubscribe from an event. Unsubscribe from an event.
</p> </p>
Syntax: Syntax:
<pre class="prettyprint lang-js">DataSet.unsubscribe(event, callback)</pre>
<pre class="prettyprint lang-js">DataSet.off(event, callback)</pre>
Where <code>event</code> and <code>callback</code> correspond with the Where <code>event</code> and <code>callback</code> correspond with the
parameters used to <a href="#Subscribe">subscribe</a> to the event.
parameters used to <a href="#On">subscribe</a> to the event.
<h3 id="Events">Events</h3> <h3 id="Events">Events</h3>
@ -650,7 +650,7 @@ parameters used to subscribe to the event.
</p> </p>
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
function (event, params, senderId) {
function (event, properties, senderId) {
// handle the event // handle the event
}); });
</pre> </pre>
@ -674,13 +674,13 @@ function (event, params, senderId) {
</td> </td>
</tr> </tr>
<tr> <tr>
<td>params</td>
<td>properties</td>
<td>Object&nbsp;|&nbsp;null</td> <td>Object&nbsp;|&nbsp;null</td>
<td> <td>
Optional parameters providing more information on the event.
Optional properties providing more information on the event.
In case of the events <code>add</code>, In case of the events <code>add</code>,
<code>update</code>, and <code>remove</code>, <code>update</code>, and <code>remove</code>,
<code>params</code> is always an object containing a property
<code>properties</code> is always an object containing a property
items, which contains an array with the ids of the affected items, which contains an array with the ids of the affected
items. items.
</td> </td>

+ 4
- 4
docs/dataview.html View File

@ -63,8 +63,8 @@ var view = new vis.DataView(data, {
}); });
// subscribe to any change in the DataView // subscribe to any change in the DataView
view.subscribe('*', function (event, params, senderId) {
console.log('event', event, params);
view.on('*', function (event, properties, senderId) {
console.log('event', event, properties);
}); });
// update an item in the data set // update an item in the data set
@ -201,8 +201,8 @@ var view = new vis.DataView({
}); });
// subscribe to any change in the DataView // subscribe to any change in the DataView
view.subscribe('*', function (event, params, senderId) {
console.log('event:', event, 'params:', params, 'senderId:', senderId);
view.on('*', function (event, properties, senderId) {
console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
}); });
// add, update, and remove data in the DataSet... // add, update, and remove data in the DataSet...

+ 385
- 56
docs/graph.html View File

@ -24,7 +24,8 @@
<p> <p>
The graph visualization works smooth on any modern browser for up to a The graph visualization works smooth on any modern browser for up to a
few hundred nodes and edges.
few thousand nodes and edges. To handle a larger amount of nodes, Graph
has clustering support.
</p> </p>
<p> <p>
@ -53,9 +54,12 @@
<li><a href="#Nodes_configuration">Nodes</a></li> <li><a href="#Nodes_configuration">Nodes</a></li>
<li><a href="#Edges_configuration">Edges</a></li> <li><a href="#Edges_configuration">Edges</a></li>
<li><a href="#Groups_configuration">Groups</a></li> <li><a href="#Groups_configuration">Groups</a></li>
<li><a href="#Clustering">Clustering</a></li>
<li><a href="#Physics">Physics</a></li>
<li><a href="#Data_manipulation">Data_manipulation</a></li>
<li><a href="#Clustering">Clustering</a></li>
<li><a href="#Navigation_controls">Navigation controls</a></li> <li><a href="#Navigation_controls">Navigation controls</a></li>
<li><a href="#Keyboard_navigation">Keyboard navigation</a></li> <li><a href="#Keyboard_navigation">Keyboard navigation</a></li>
<li><a href="#Hierarchical_layout">Hierarchical layout</a></li>
</ul> </ul>
</li> </li>
<li><a href="#Methods">Methods</a></li> <li><a href="#Methods">Methods</a></li>
@ -288,6 +292,14 @@ var nodes = [
the same color schema.</td> the same color schema.</td>
</tr> </tr>
<tr>
<td>allowedToMove</td>
<td>Boolean</td>
<td>true</td>
<td>If allowedToMove is false, then the node will not move from its supplied position.
If only an x position has been supplied, it is only fixed in the x-direction.
The same holds for y. If both x and y have been defined, the node will not move.</td>
</tr>
<tr> <tr>
<td>fontColor</td> <td>fontColor</td>
<td>String</td> <td>String</td>
@ -324,8 +336,15 @@ var nodes = [
<td>string</td> <td>string</td>
<td>no</td> <td>no</td>
<td>Url of an image. Only applicable when the shape of the node is <td>Url of an image. Only applicable when the shape of the node is
<code>image</code>.</td>
</tr>
<code>image</code>.</td>
</tr>
<tr>
<td>level</td>
<td>number</td>
<td>-1</td>
<td>This level is used in the hierarchical layout. If this is not selected, the level does not do anything.</td>
</tr>
<tr> <tr>
<td>radius</td> <td>radius</td>
@ -529,13 +548,6 @@ var edges = [
type.</td> type.</td>
</tr> </tr>
<tr>
<td>length</td>
<td>number</td>
<td>no</td>
<td>The length of the edge in pixels.</td>
</tr>
<tr> <tr>
<td>style</td> <td>style</td>
<td>string</td> <td>string</td>
@ -647,6 +659,25 @@ var options = {
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td><a href="#Physics">physics</a></td>
<td>Object</td>
<td>none</td>
<td>
Configuration of the physics system governing the simulation of the nodes and edges.
Barnes-Hut nBody simulation is used by default. See section <a href="#Physics">Physics</a> for an overview of the available options.
</td>
</tr>
<tr>
<td><a href="#Data_manipulation">dataManipulation</a></td>
<td>Object</td>
<td>none</td>
<td>
Settings for manipulating the Dataset. See section <a href="#Data_manipulation">Data manipulation</a> for an overview of the available options.
</td>
</tr>
<tr> <tr>
<td><a href="#Clustering">clustering</a></td> <td><a href="#Clustering">clustering</a></td>
<td>Object</td> <td>Object</td>
@ -710,6 +741,13 @@ var options = {
</td> </td>
</tr> </tr>
<tr>
<td>smoothCurves</td>
<td>Boolean</td>
<td>true</td>
<td>If true, edges are drawn as smooth curves. This is more computationally intensive since the edge now is a quadratic Bezier curve with control points on both nodes and an invisible node in the center of the edge. This support node is also handed by the physics simulation.</td>
</tr>
<tr> <tr>
<td>selectable</td> <td>selectable</td>
<td>Boolean</td> <td>Boolean</td>
@ -806,6 +844,14 @@ var options = {
<td>"#2B7CE9"</td> <td>"#2B7CE9"</td>
<td>Default border color of the node when selected.</td> <td>Default border color of the node when selected.</td>
</tr> </tr>
<tr>
<td>allowedToMove</td>
<td>Boolean</td>
<td>false</td>
<td>If allowedToMove is false, then the node will not move from its supplied position.
If only an x position has been supplied, it is only fixed in the x-direction.
The same holds for y. If both x and y have been defined, the node will not move.</td>
</tr>
<tr> <tr>
<td>fontColor</td> <td>fontColor</td>
@ -838,6 +884,12 @@ var options = {
<td>Default image url for the nodes. only applicable to shape <code>image</code>.</td> <td>Default image url for the nodes. only applicable to shape <code>image</code>.</td>
</tr> </tr>
<tr>
<td>level</td>
<td>number</td>
<td>-1</td>
<td>This level is used in the hierarchical layout. If this is not selected, the level does not do anything.</td>
</tr>
<tr> <tr>
<td>widthMin</td> <td>widthMin</td>
<td>Number</td> <td>Number</td>
@ -964,12 +1016,6 @@ var options = {
Only applicable when the line style is <code>dash-line</code>.</td> Only applicable when the line style is <code>dash-line</code>.</td>
</tr> </tr>
<tr>
<td>length</td>
<td>Number</td>
<td>100</td>
<td>The default length of a edge.</td>
</tr>
<tr> <tr>
<td>style</td> <td>style</td>
<td>String</td> <td>String</td>
@ -1122,6 +1168,234 @@ var nodes = [
</table> </table>
<h3 id="Physics">Physics</h3>
<p>
The original simulation method was based on particel physics with a repulsion field (potential) around each node,
and the edges were modelled as springs. The new system employed the <a href="http://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation">Barnes-Hut</a> gravitational simulation model. The edges are still modelled as springs.
To unify the physics system, the damping, repulsion distance and edge length have been combined in an physics option. To retain good behaviour, both the old repulsion model and the Barnes-Hut model have their own parameters.
If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters.
</p>
<pre class="prettyprint">
// These variables must be defined in an options object named physics.
// If a variable is not supplied, the default value is used.
var options = {
physics: {
barnesHut: {
enabled: true,
gravitationalConstant: -2000,
centralGravity: 0.1,
springLength: 100,
springConstant: 0.05,
damping: 0.09
},
repulsion: {
centralGravity: 0.1,
springLength: 50,
springConstant: 0.05,
nodeDistance: 100,
damping: 0.09
},
}
</pre>
<h5>barnesHut:</h5>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>enabled</td>
<td>Boolean</td>
<td>true</td>
<td>This switches the Barnes-Hut simulation on or off. If it is turned off, the old repulsion model is used. Barnes-Hut is generally faster and yields better results.</td>
</tr>
<tr>
<td>gravitationalConstant</td>
<td>Number</td>
<td>-2000</td>
<td>This is the gravitational constand used to calculate the gravity forces. More information is available <a href="http://en.wikipedia.org/wiki/Newton's_law_of_universal_gravitation" target="_blank">here</a>.</td>
</tr>
<tr>
<td>centralGravity</td>
<td>Number</td>
<td>0.1</td>
<td>The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart.</td>
</tr>
<tr>
<td>springLength</td>
<td>Number</td>
<td>100</td>
<td>In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields.
To greatly reduce the edge length, the gravitationalConstant has to be reduced as well.</td>
</tr>
<tr>
<td>springConstant</td>
<td>Number</td>
<td>0.05</td>
<td>This is the spring constant used to calculate the spring forces based on Hooke&prime;s Law. More information is available <a href="http://en.wikipedia.org/wiki/Hooke's_law" target="_blank">here</a>.</td>
</tr>
<tr>
<td>damping</td>
<td>Number</td>
<td>0.09</td>
<td>This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available <a href="http://en.wikipedia.org/wiki/Damping" target="_blank">here</a>.</td>
</tr>
</table>
<h5>repulsion:</h5>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>centralGravity</td>
<td>Number</td>
<td>0.1</td>
<td>The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart.</td>
</tr>
<tr>
<td>springLength</td>
<td>Number</td>
<td>50</td>
<td>In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields.
To greatly reduce the edge length, the gravitationalConstant has to be reduced as well.</td>
</tr>
<tr>
<td>nodeDistance</td>
<td>Number</td>
<td>100</td>
<td>This parameter is used to define the distance of influence of the repulsion field of the nodes. Below half this distance, the repulsion is maximal and beyond twice this distance the repulsion is zero.</td>
</tr>
<tr>
<td>springConstant</td>
<td>Number</td>
<td>0.05</td>
<td>This is the spring constant used to calculate the spring forces based on Hooke&prime;s Law. More information is available <a href="http://en.wikipedia.org/wiki/Hooke's_law" target="_blank">here</a>.</td>
</tr>
<tr>
<td>damping</td>
<td>Number</td>
<td>0.09</td>
<td>This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available <a href="http://en.wikipedia.org/wiki/Damping" target="_blank">here</a>.</td>
</tr>
</table>
<h3 id="Data_manipulation">Data manipulation</h3>
<p>
By using the data manipulation feature of the graph you can dynamically create nodes, connect nodes with edges, edit nodes or delete nodes and edges.
The toolbar is fully HTML and CSS so the user can style this to their preference. To control the behaviour of the data manipulation, users can insert custom functions
into the data manipulation process. For example, an injected function can show an detailed pop-up when a user wants to add a node. In <a href="../examples/graph/21_data_manipulation.html">example 21</a>,
two functions have been injected into the add and edit functionality. This is described in more detail in the next subsection.
</p>
<pre class="prettyprint">
// These variables must be defined in an options object named dataManipulation.
// If a variable is not supplied, the default value is used.
var options = {
dataManipulation: {
enabled: false,
initiallyVisible: false
}
}
// OR to just load the module with default values:
var options: {
dataManipulation: true
}
</pre>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>enabled</td>
<td>Boolean</td>
<td>false</td>
<td>Enabling or disabling of the data manipulation toolbar. If it is initially hidden, an edit button appears in the top left corner.</td>
</tr>
<tr>
<td>initiallyVisible</td>
<td>Boolean</td>
<td>false</td>
<td>Initially hide or show the data manipulation toolbar.</td>
</tr>
</table>
<h4 id="Data_manipulation_custom">Data manipulation: custom functionality</h4>
<p>
Users can insert custom functions into the add node, edit node, connect nodes, and delete selected operations. This is done by supplying them in the options.
If the callback is NOT called, nothing happens. <a href="../examples/graph/21_data_manipulation.html">Example 21</a> has two working examples
for the add and edit functions. The data the user is supplied with in these functions has been described in the code below.
For the add data, you can add any and all options that are accepted for node creation as described above. The same goes for edit, however only the fields described
in the code below contain information on the selected node. The callback for connect accepts any options that are used for edge creation. Only the callback for delete selected
requires the same data structure that is supplied to the user. <br /><br />
<b>If there is no injected function supplied for the edit operation, the button will not be shown in the toolbar.</b>
</p>
<pre class="prettyprint">
// If a variable is not supplied, the default value is used.
var options: {
dataManipulation: true,
onAdd: function(data,callback) {
/** data = {id: random unique id,
* label: new,
* x: x position of click (canvas space),
* y: y position of click (canvas space),
* allowedToMove: true
* };
*/
var newData = {..}; // alter the data as you want.
// all fields normally accepted by a node can be used.
callback(newData); // call the callback to add a node.
},
onEdit: function(data,callback) {
/** data = {id:...,
* label: ...,
* group: ...,
* shape: ...,
* color: {
* background:...,
* border:...,
* highlight: {
* background:...,
* border:...
* }
* }
* };
*/
var newData = {..}; // alter the data as you want.
// all fields normally accepted by a node can be used.
callback(newData); // call the callback with the new data to edit the node.
}
onConnect: function(data,callback) {
// data = {from: nodeId1, to: nodeId2};
var newData = {..}; // check or alter data as you see fit.
callback(newData); // call the callback to connect the nodes.
},
onDelete: function(data,callback) {
// data = {nodes: [selectedNodeIds], edges: [selectedEdgeIds]};
var newData = {..}; // alter the data as you want.
// the same data structure is required.
callback(newData); // call the callback to delete the objects.
}
};
</pre>
<p>
Because the interface elements are CSS and HTML, the user will have to correct for size changes of the canvas. To facilitate this, a new event has been added called frameResize.
A function can be bound to this event. This function is supplied with the new widht and height of the canvas. The CSS can then be updated accordingly.
An code snippet from example 21 is shown below.
</p>
<pre class="prettyprint">
graph.on("frameResize", function(params) {console.log(params.width,params.height)});
</pre>
<h3 id="Clustering">Clustering</h3> <h3 id="Clustering">Clustering</h3>
<p> <p>
The graph now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without The graph now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without
@ -1150,16 +1424,19 @@ var options = {
reduceToNodes:300, reduceToNodes:300,
chainThreshold: 0.4, chainThreshold: 0.4,
clusterEdgeThreshold: 20, clusterEdgeThreshold: 20,
sectorThreshold: 50,
sectorThreshold: 100,
screenSizeThreshold: 0.2, screenSizeThreshold: 0.2,
fontSizeMultiplier: 4.0, fontSizeMultiplier: 4.0,
forceAmplification: 0.6,
distanceAmplification: 0.2,
edgeGrowth: 11,
nodeScaling: {width: 10,
height: 10,
radius: 10},
activeAreaBoxSize: 100
maxFontSize: 1000,
forceAmplification: 0.1,
distanceAmplification: 0.1,
edgeGrowth: 20,
nodeScaling: {width: 1,
height: 1,
radius: 1},
maxNodeSizeIncrements: 600,
activeAreaBoxSize: 100,
clusterLevelDifference: 2
} }
} }
// OR to just load the module with default values: // OR to just load the module with default values:
@ -1233,6 +1510,12 @@ var options: {
<td>4.0</td> <td>4.0</td>
<td>This parameter denotes the increase in fontSize of the cluster when a single node is added to it.</td> <td>This parameter denotes the increase in fontSize of the cluster when a single node is added to it.</td>
</tr> </tr>
<tr>
<td>maxFontSize</td>
<td>Number</td>
<td>1000</td>
<td>This parameter denotes the largest allowed font size. If the font becomes too large, some browsers experience problems displaying this.</td>
</tr>
<tr> <tr>
<td>forceAmplification</td> <td>forceAmplification</td>
<td>Number</td> <td>Number</td>
@ -1251,7 +1534,7 @@ var options: {
<tr> <tr>
<td>edgeGrowth</td> <td>edgeGrowth</td>
<td>Number</td> <td>Number</td>
<td>11</td>
<td>20</td>
<td>This factor determines the elongation of edges connected to a cluster.</td> <td>This factor determines the elongation of edges connected to a cluster.</td>
</tr> </tr>
<tr> <tr>
@ -1272,13 +1555,29 @@ var options: {
<td>10</td> <td>10</td>
<td>This factor determines how much the radius of a cluster increases in pixels per added node.</td> <td>This factor determines how much the radius of a cluster increases in pixels per added node.</td>
</tr> </tr>
<tr>
<td>activeAreaBoxSize</td>
<tr>
<td>maxNodeSizeIncrements</td>
<td>Number</td>
<td>600</td>
<td>This limits the size clusters can grow to. The default value, 600, implies that if a cluster contains more than 600 nodes, it will no longer grow.</td>
</tr>
<tr>
<td>activeAreaBoxSize</td>
<td>Number</td>
<td>100</td>
<td>Imagine a square with an edge length of <code>activeAreaBoxSize</code> pixels around your cursor.
If a cluster is in this box as you zoom in, the cluster can be opened in a seperate sector.
This is regardless of the zoom level.</td>
</tr>
<tr>
<td>clusterLevelDifference</td>
<td>Number</td> <td>Number</td>
<td>100</td>
<td>Imagine a square with an edge length of <code>activeAreaBoxSize</code> pixels around your cursor.
If a cluster is in this box as you zoom in, the cluster can be opened in a seperate sector.
This is regardless of the zoom level.</td>
<td>2</td>
<td>At every clustering session, Graph will check if the difference between cluster levels is
acceptable. When a cluster is formed when zooming out, that is one cluster level.
If you zoom out further and it encompasses more nodes, that is another level. For example:
If the highest level of your graph at any given time is 3, nodes that have not clustered or
have clustered only once will join their neighbour with the lowest cluster level.</td>
</tr> </tr>
</table> </table>
@ -1289,39 +1588,16 @@ var options: {
</p> </p>
<pre class="prettyprint"> <pre class="prettyprint">
// simple use of navigation controls
// use of navigation controls
var options: { var options: {
navigation: true navigation: true
} }
// advanced use of navigation controls
var options: {
navigation: {
iconPath: '/path/to/navigation/icons/'
}
}
</pre> </pre>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>iconPath</td>
<td>string</td>
<td>"/img"</td>
<td>The path to the icon images can be defined here. If custom icons are used, they have to have the same filename as the ones originally packaged with vis.js.</td>
</tr>
</table>
<h3 id="Keyboard_navigation">Keyboard navigation</h3> <h3 id="Keyboard_navigation">Keyboard navigation</h3>
<p> <p>
The graph can be navigated using shortcut keys. The graph can be navigated using shortcut keys.
It can be configured with the following user-configurable settings.
The default state for the keyboard navigation is <b>off</b>. The predefined keys can be found in the example <a href="../examples/graph/20_navigation.html">20_navigation.html</a>. The default state for the keyboard navigation is <b>off</b>. The predefined keys can be found in the example <a href="../examples/graph/20_navigation.html">20_navigation.html</a>.
</p> </p>
@ -1372,6 +1648,59 @@ var options: {
</tr> </tr>
</table> </table>
<h3 id="Hierarchical_layout">Hierarchical layout</h3>
<p>
The graph can be used to display nodes in a hierarchical way. This can be determined automatically, based on the amount of edges connected to each node, or defined by the user.
If the user wants to manually determine the hierarchy, each node has to be supplied with a level (from 0 being heighest to n). The automatic method
is shown in <a href="../examples/graph/23_hierarchical_layout.html">example 23</a> and the user-defined method is shown in <a href="../examples/graph/24_hierarchical_layout_userdefined.html">example 24</a>.
This layout method does not support smooth curves or clustering. It automatically turns these features off.
</p>
<pre class="prettyprint">
// simple use of the hierarchical layout
var options: {
hierarchicalLayout: true
}
// advanced configuration for keyboard controls
var options: {
hierarchicalLayout: {
enabled:false,
levelSeparation: 150,
nodeSpacing: 100
}
}
</pre>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>enabled</td>
<td>Boolean</td>
<td>false</td>
<td>Enable or disable the hierarchical layout.
</td>
</tr>
<tr>
<td>levelSeparation</td>
<td>Number</td>
<td>150</td>
<td>This defines the space between levels (in the Y-direction).</td>
</tr>
<tr>
<td>nodeSpacing</td>
<td>Number</td>
<td>100</td>
<td>This defines the space between nodes in the same level (in the X-direction).</td>
</tr>
</table>
<h2 id="Methods">Methods</h2> <h2 id="Methods">Methods</h2>
<p> <p>
Graph supports the following methods. Graph supports the following methods.

+ 135
- 12
docs/timeline.html View File

@ -39,6 +39,7 @@
<li><a href="#Configuration_Options">Configuration Options</a></li> <li><a href="#Configuration_Options">Configuration Options</a></li>
<li><a href="#Methods">Methods</a></li> <li><a href="#Methods">Methods</a></li>
<li><a href="#Events">Events</a></li> <li><a href="#Events">Events</a></li>
<li><a href="#Editing_Items">Editing Items</a></li>
<li><a href="#Styles">Styles</a></li> <li><a href="#Styles">Styles</a></li>
<li><a href="#Data_Policy">Data Policy</a></li> <li><a href="#Data_Policy">Data Policy</a></li>
</ul> </ul>
@ -336,11 +337,19 @@ var options = {
<tr> <tr>
<td>autoResize</td> <td>autoResize</td>
<td>boolean</td> <td>boolean</td>
<td>false</td>
<td>true</td>
<td>If true, the Timeline will automatically detect when its <td>If true, the Timeline will automatically detect when its
container is resized, and redraw itself accordingly.</td> container is resized, and redraw itself accordingly.</td>
</tr> </tr>
<tr>
<td>editable</td>
<td>Boolean</td>
<td>false</td>
<td>If true, the items on the timeline can be dragged. 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>, described in detail in section <a href="#Editing_Items">Editing Items</a>.
</td>
</tr>
<tr> <tr>
<td>end</td> <td>end</td>
<td>Date | Number | String</td> <td>Date | Number | String</td>
@ -412,6 +421,38 @@ var options = {
</td> </td>
</tr> </tr>
<tr>
<td>onAdd</td>
<td>Function</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 <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable</code> are set <code>true</code>.
</td>
</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 <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable</code> are set <code>true</code>.
</td>
</tr>
<tr>
<td>onMove</td>
<td>Function</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 <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable</code> are set <code>true</code>.
</td>
</tr>
<tr>
<td>onRemove</td>
<td>Function</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 <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable</code> are set <code>true</code>.
</td>
</tr>
<tr> <tr>
<td>order</td> <td>order</td>
<td>Function</td> <td>Function</td>
@ -427,9 +468,7 @@ var options = {
<td>orientation</td> <td>orientation</td>
<td>String</td> <td>String</td>
<td>'bottom'</td> <td>'bottom'</td>
<td>Orientation of the timeline: 'top' or 'bottom' (default).
If orientation is 'bottom', the time axis is drawn at the bottom,
and if 'top', the axis is drawn on top.</td>
<td>Orientation of the timeline: 'top' or 'bottom' (default). If orientation is 'bottom', the time axis is drawn at the bottom, and if 'top', the axis is drawn on top.</td>
</tr> </tr>
<tr> <tr>
@ -440,6 +479,13 @@ var options = {
of item ranges. Must correspond with the css of item ranges.</td> of item ranges. Must correspond with the css of item ranges.</td>
</tr> </tr>
<tr>
<td>selectable</td>
<td>Boolean</td>
<td>true</td>
<td>If true, the items on the timeline can be selected. Multiple items can be selected by long pressing them, or by using ctrl+click or shift+click. The event <code>select</code> is fired each time the selection has changed (see section <a href="#Events">Events</a>).</td>
</tr>
<tr> <tr>
<td>showCurrentTime</td> <td>showCurrentTime</td>
<td>boolean</td> <td>boolean</td>
@ -451,9 +497,7 @@ var options = {
<td>showCustomTime</td> <td>showCustomTime</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future.
<!-- TODO: more docs on showCustomTime
When the custom time bar is dragged by the user, an event is triggered, on which the contents of the timeline can be changed in to the state at that moment in time.--></td>
<td>Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future. When the custom time bar is dragged by the user, the event <code>timechange</code> is fired repeatedly. After the bar is dragged, the event <code>timechanged</code> is fired once.</td>
</tr> </tr>
<tr> <tr>
@ -555,10 +599,16 @@ var options = {
<tr> <tr>
<td>getSelection()</td> <td>getSelection()</td>
<td>ids</td>
<td>Number[]</td>
<td>Get an array with the ids of the currently selected items.</td> <td>Get an array with the ids of the currently selected items.</td>
</tr> </tr>
<tr>
<td>getWindow()</td>
<td>Object</td>
<td>Get the current visible window. Returns an object with properties <code>start: Date</code> and <code>end: Date</code>.</td>
</tr>
<tr> <tr>
<td>on(event, callback)</td> <td>on(event, callback)</td>
<td>none</td> <td>none</td>
@ -605,13 +655,19 @@ var options = {
</td> </td>
</tr> </tr>
<tr>
<td>setWindow(start, end)</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.</td>
</tr>
</table> </table>
<h2 id="Events">Events</h2> <h2 id="Events">Events</h2>
<p> <p>
Timeline fires events when changing the visible window by dragging, or when
selecting items.
Timeline fires events when changing the visible window by dragging, when
selecting items, and when dragging the custom time bar.
</p> </p>
<p> <p>
@ -674,7 +730,7 @@ timeline.off('select', onSelect);
<tr> <tr>
<td>rangechanged</td> <td>rangechanged</td>
<td>Fired once after the user has dragging the timeline window.
<td>Fired once after the user has dragged the timeline window.
</td> </td>
<td> <td>
<ul> <ul>
@ -696,8 +752,75 @@ timeline.off('select', onSelect);
</td> </td>
</tr> </tr>
<tr>
<td>timechange</td>
<td>Fired repeatedly when the user is dragging the custom time bar.
Only available when the custom time bar is enabled.
</td>
<td>
<ul>
<li><code>time</code> (Date): the current time.</li>
</ul>
</td>
</tr>
<tr>
<td>timechanged</td>
<td>Fired once after the user has dragged the custom time bar.
Only available when the custom time bar is enabled.
</td>
<td>
<ul>
<li><code>time</code> (Date): the current time.</li>
</ul>
</td>
</tr>
</table> </table>
<h2 id="Editing_Items">Editing Items</h2>
<p>
When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code>true</code>), the user can move items by dragging them, can create a new item by double tapping on an empty space, can update an item by double tapping it, and can delete a selected item by clicking the delete button on the top right.
</p>
<p>
One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose:
</p>
<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>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>onMove(item, callback)</code> Fired when an item has been moved. If not implemented, the move action will be accepted.</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>
</ul>
<p>
Each of the callbacks is invoked with two arguments:
</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>
</ul>
<p>
Example code:
</p>
<pre class="prettyprint lang-js">var options = {
onUpdate: function (item, callback) {
item.content = prompt('Edit items text:', item.content);
if (item.content != null) {
callback(item); // send back adjusted item
}
else {
callback(null); // cancel updating the item
}
}
}
</pre>
A full example is available here: <a href="../examples/timeline/08_edit_items.html">08_edit_items.html</a>.
<h2 id="Styles">Styles</h2> <h2 id="Styles">Styles</h2>
<p> <p>
@ -709,7 +832,7 @@ timeline.off('select', onSelect);
<p>For example, to change the border and background color of all items, include the <p>For example, to change the border and background color of all items, include the
following code inside the head of your html code or in a separate stylesheet.</p> following code inside the head of your html code or in a separate stylesheet.</p>
<pre class="prettyprint lang-html">&lt;style&gt; <pre class="prettyprint lang-html">&lt;style&gt;
.graph .item {
.vis.timeline .item {
border-color: orange; border-color: orange;
background-color: yellow; background-color: yellow;
} }

BIN
download/vis.zip View File


+ 1
- 2
examples/graph/02_random_nodes.html View File

@ -57,6 +57,7 @@
j++; j++;
} }
var from = i; var from = i;
var to = j; var to = j;
edges.push({ edges.push({
@ -87,7 +88,6 @@
*/ */
var options = { var options = {
edges: { edges: {
length: 50
}, },
stabilize: false stabilize: false
}; };
@ -102,7 +102,6 @@
</head> </head>
<body onload="draw();"> <body onload="draw();">
<form onsubmit="draw(); return false;"> <form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label> <label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;"> <input id="nodeCount" type="text" value="25" style="width: 50px;">

+ 2
- 2
examples/graph/07_selections.html View File

@ -51,8 +51,8 @@
graph = new vis.Graph(container, data, options); graph = new vis.Graph(container, data, options);
// add event listener // add event listener
graph.on('select', function(params) {
document.getElementById('info').innerHTML += 'selection: ' + params.nodes + '<br>';
graph.on('select', function(properties) {
document.getElementById('info').innerHTML += 'selection: ' + JSON.stringify(properties) + '<br>';
}); });
// set initial selection (id's of some nodes) // set initial selection (id's of some nodes)

+ 1
- 4
examples/graph/19_scale_free_graph_clustering.html View File

@ -88,9 +88,6 @@
}; };
*/ */
var options = { var options = {
edges: {
length: 50
},
clustering: { clustering: {
enabled: clusteringOn, enabled: clusteringOn,
clusterEdgeThreshold: clusterEdgeThreshold clusterEdgeThreshold: clusterEdgeThreshold
@ -110,7 +107,7 @@
<body onload="draw();"> <body onload="draw();">
<h2>Clustering - Scale-Free-Graph</h2> <h2>Clustering - Scale-Free-Graph</h2>
<div style="width:700px; font-size:14px;"> <div style="width:700px; font-size:14px;">
This example shows therandomly generated <b>scale-free-graph</b> set of nodes and connected edges from example 2.
This example shows the randomly generated <b>scale-free-graph</b> set of nodes and connected edges from example 2.
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked). a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
<br /> <br />

+ 9
- 9
examples/graph/20_navigation.html View File

@ -31,10 +31,10 @@
div.table_description { div.table_description {
width:100px; width:100px;
} }
</style> </style>
<script type="text/javascript" src="../../dist/vis.js"></script> <script type="text/javascript" src="../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../dist/vis.css">
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
@ -126,17 +126,17 @@
<body onload="draw();"> <body onload="draw();">
<h2>Navigation controls and keyboad navigation</h2> <h2>Navigation controls and keyboad navigation</h2>
<div style="width: 700px; font-size:14px;"> <div style="width: 700px; font-size:14px;">
This example is the same as example 2, except for the navigation controls that has been activated. The navigation controls are described below. <br /><br />
This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
<table class="legend_table"> <table class="legend_table">
<tr> <tr>
<td>Icons: </td> <td>Icons: </td>
<td><div class="table_content"><img src="../../dist/img/uparrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/downarrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/leftarrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/rightarrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/plus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/minus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/zoomExtends.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/upArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/downArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/leftArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/rightArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/plus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/minus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/zoomExtends.png" /> </div></td>
</tr> </tr>
<tr> <tr>
<td><div class="table_description">Keyboard shortcuts:</div></td> <td><div class="table_description">Keyboard shortcuts:</div></td>

+ 213
- 0
examples/graph/21_data_manipulation.html View File

@ -0,0 +1,213 @@
<!doctype html>
<html>
<head>
<title>Graph | Navigation</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
position:relative;
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
table.legend_table {
font-size: 11px;
border-width:1px;
border-color:#d3d3d3;
border-style:solid;
}
table.legend_table,td {
border-width:1px;
border-color:#d3d3d3;
border-style:solid;
padding: 2px;
}
div.table_content {
width:80px;
text-align:center;
}
div.table_description {
width:100px;
}
#operation {
font-size:28px;
}
#graph-popUp {
display:none;
position:absolute;
top:350px;
left:170px;
z-index:299;
width:250px;
height:120px;
background-color: #f9f9f9;
border-style:solid;
border-width:3px;
border-color: #5394ed;
padding:10px;
text-align: center;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../dist/vis.css">
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
function draw() {
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
var nodeCount = 25;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
connectionCount[i] = 0;
// create edges in a scale-free-graph way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = edges.length * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
var from = i;
var to = j;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
}
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
edges: {
length: 50
},
stabilize: false,
dataManipulation: true,
onAdd: function(data,callback) {
var span = document.getElementById('operation');
var idInput = document.getElementById('node-id');
var labelInput = document.getElementById('node-label');
var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton');
var div = document.getElementById('graph-popUp');
span.innerHTML = "Add Node";
idInput.value = data.id;
labelInput.value = data.label;
saveButton.onclick = saveData.bind(this,data,callback);
cancelButton.onclick = clearPopUp.bind();
div.style.display = 'block';
},
onEdit: function(data,callback) {
var span = document.getElementById('operation');
var idInput = document.getElementById('node-id');
var labelInput = document.getElementById('node-label');
var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton');
var div = document.getElementById('graph-popUp');
span.innerHTML = "Edit Node";
idInput.value = data.id;
labelInput.value = data.label;
saveButton.onclick = saveData.bind(this,data,callback);
cancelButton.onclick = clearPopUp.bind();
div.style.display = 'block';
}
};
graph = new vis.Graph(container, data, options);
// add event listeners
graph.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
graph.on("frameResize", function(params) {console.log(params.width,params.height)});
function clearPopUp() {
var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton');
saveButton.onclick = null;
cancelButton.onclick = null;
var div = document.getElementById('graph-popUp');
div.style.display = 'none';
}
function saveData(data,callback) {
var idInput = document.getElementById('node-id');
var labelInput = document.getElementById('node-label');
var div = document.getElementById('graph-popUp');
data.id = idInput.value;
data.label = labelInput.value;
clearPopUp();
callback(data);
}
}
</script>
</head>
<body onload="draw();">
<h2>Editing the dataset</h2>
<div style="width: 700px; font-size:14px;">
In this example we have enabled the data manipulation setting. If the dataManipulation option is set to true, the edit button will appear.
If you prefer to have the toolbar visible initially, you can set the initiallyVisible option to true. The exact method is described in the docs.
<br /><br />
The data manipulation allows the user to add nodes, connect them, edit them and delete any selected items. In this example we have created trigger functions
for the add and edit operations. By settings these trigger functions the user can direct the way the data is manipulated. In this example we have created a simple
pop-up that allows us to edit some of the properties.
</div>
<br />
<div id="graph-popUp">
<span id="operation">node</span> <br>
<table style="margin:auto;"><tr>
<td>id</td><td><input id="node-id" value="new value"></td>
</tr>
<tr>
<td>label</td><td><input id="node-label" value="new value"> </td>
</tr></table>
<input type="button" value="save" id="saveButton"></button>
<input type="button" value="cancel" id="cancelButton"></button>
</div>
<br />
<div id="mygraph"></div>
<p id="selection"></p>
</body>
</html>

+ 373
- 0
examples/graph/22_les_miserables.html View File

@ -0,0 +1,373 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph | Multiline text</title>
<style type="text/css">
#mygraph {
width: 900px;
height: 900px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
function draw() {
// create some nodes
var nodes = [
{id:0,"labelIGNORE":"Myriel","group":1},
{id:1,"labelIGNORE":"Napoleon","group":1},
{id:2,"labelIGNORE":"Mlle.Baptistine","group":1},
{id:3,"labelIGNORE":"Mme.Magloire","group":1},
{id:4,"labelIGNORE":"CountessdeLo","group":1},
{id:5,"labelIGNORE":"Geborand","group":1},
{id:6,"labelIGNORE":"Champtercier","group":1},
{id:7,"labelIGNORE":"Cravatte","group":1},
{id:8,"labelIGNORE":"Count","group":1},
{id:9,"labelIGNORE":"OldMan","group":1},
{id:10,"labelIGNORE":"Labarre","group":2},
{id:11,"labelIGNORE":"Valjean","group":2},
{id:12,"labelIGNORE":"Marguerite","group":3},
{id:13,"labelIGNORE":"Mme.deR","group":2},
{id:14,"labelIGNORE":"Isabeau","group":2},
{id:15,"labelIGNORE":"Gervais","group":2},
{id:16,"labelIGNORE":"Tholomyes","group":3},
{id:17,"labelIGNORE":"Listolier","group":3},
{id:18,"labelIGNORE":"Fameuil","group":3},
{id:19,"labelIGNORE":"Blacheville","group":3},
{id:20,"labelIGNORE":"Favourite","group":3},
{id:21,"labelIGNORE":"Dahlia","group":3},
{id:22,"labelIGNORE":"Zephine","group":3},
{id:23,"labelIGNORE":"Fantine","group":3},
{id:24,"labelIGNORE":"Mme.Thenardier","group":4},
{id:25,"labelIGNORE":"Thenardier","group":4},
{id:26,"labelIGNORE":"Cosette","group":5},
{id:27,"labelIGNORE":"Javert","group":4},
{id:28,"labelIGNORE":"Fauchelevent","group":0},
{id:29,"labelIGNORE":"Bamatabois","group":2},
{id:30,"labelIGNORE":"Perpetue","group":3},
{id:31,"labelIGNORE":"Simplice","group":2},
{id:32,"labelIGNORE":"Scaufflaire","group":2},
{id:33,"labelIGNORE":"Woman1","group":2},
{id:34,"labelIGNORE":"Judge","group":2},
{id:35,"labelIGNORE":"Champmathieu","group":2},
{id:36,"labelIGNORE":"Brevet","group":2},
{id:37,"labelIGNORE":"Chenildieu","group":2},
{id:38,"labelIGNORE":"Cochepaille","group":2},
{id:39,"labelIGNORE":"Pontmercy","group":4},
{id:40,"labelIGNORE":"Boulatruelle","group":6},
{id:41,"labelIGNORE":"Eponine","group":4},
{id:42,"labelIGNORE":"Anzelma","group":4},
{id:43,"labelIGNORE":"Woman2","group":5},
{id:44,"labelIGNORE":"MotherInnocent","group":0},
{id:45,"labelIGNORE":"Gribier","group":0},
{id:46,"labelIGNORE":"Jondrette","group":7},
{id:47,"labelIGNORE":"Mme.Burgon","group":7},
{id:48,"labelIGNORE":"Gavroche","group":8},
{id:49,"labelIGNORE":"Gillenormand","group":5},
{id:50,"labelIGNORE":"Magnon","group":5},
{id:51,"labelIGNORE":"Mlle.Gillenormand","group":5},
{id:52,"labelIGNORE":"Mme.Pontmercy","group":5},
{id:53,"labelIGNORE":"Mlle.Vaubois","group":5},
{id:54,"labelIGNORE":"Lt.Gillenormand","group":5},
{id:55,"labelIGNORE":"Marius","group":8},
{id:56,"labelIGNORE":"BaronessT","group":5},
{id:57,"labelIGNORE":"Mabeuf","group":8},
{id:58,"labelIGNORE":"Enjolras","group":8},
{id:59,"labelIGNORE":"Combeferre","group":8},
{id:60,"labelIGNORE":"Prouvaire","group":8},
{id:61,"labelIGNORE":"Feuilly","group":8},
{id:62,"labelIGNORE":"Courfeyrac","group":8},
{id:63,"labelIGNORE":"Bahorel","group":8},
{id:64,"labelIGNORE":"Bossuet","group":8},
{id:65,"labelIGNORE":"Joly","group":8},
{id:66,"labelIGNORE":"Grantaire","group":8},
{id:67,"labelIGNORE":"MotherPlutarch","group":9},
{id:68,"labelIGNORE":"Gueulemer","group":4},
{id:69,"labelIGNORE":"Babet","group":4},
{id:70,"labelIGNORE":"Claquesous","group":4},
{id:71,"labelIGNORE":"Montparnasse","group":4},
{id:72,"labelIGNORE":"Toussaint","group":5},
{id:73,"labelIGNORE":"Child1","group":10},
{id:74,"labelIGNORE":"Child2","group":10},
{id:75,"labelIGNORE":"Brujon","group":4},
{id:76,"labelIGNORE":"Mme.Hucheloup","group":8}
];
// create some edges
var edges = [
{"from":1,"to":0,"valueIGNORED":1},
{"from":2,"to":0,"valueIGNORED":8},
{"from":3,"to":0,"valueIGNORED":10},
{"from":3,"to":2,"valueIGNORED":6},
{"from":4,"to":0,"valueIGNORED":1},
{"from":5,"to":0,"valueIGNORED":1},
{"from":6,"to":0,"valueIGNORED":1},
{"from":7,"to":0,"valueIGNORED":1},
{"from":8,"to":0,"valueIGNORED":2},
{"from":9,"to":0,"valueIGNORED":1},
{"from":11,"to":10,"valueIGNORED":1},
{"from":11,"to":3,"valueIGNORED":3},
{"from":11,"to":2,"valueIGNORED":3},
{"from":11,"to":0,"valueIGNORED":5},
{"from":12,"to":11,"valueIGNORED":1},
{"from":13,"to":11,"valueIGNORED":1},
{"from":14,"to":11,"valueIGNORED":1},
{"from":15,"to":11,"valueIGNORED":1},
{"from":17,"to":16,"valueIGNORED":4},
{"from":18,"to":16,"valueIGNORED":4},
{"from":18,"to":17,"valueIGNORED":4},
{"from":19,"to":16,"valueIGNORED":4},
{"from":19,"to":17,"valueIGNORED":4},
{"from":19,"to":18,"valueIGNORED":4},
{"from":20,"to":16,"valueIGNORED":3},
{"from":20,"to":17,"valueIGNORED":3},
{"from":20,"to":18,"valueIGNORED":3},
{"from":20,"to":19,"valueIGNORED":4},
{"from":21,"to":16,"valueIGNORED":3},
{"from":21,"to":17,"valueIGNORED":3},
{"from":21,"to":18,"valueIGNORED":3},
{"from":21,"to":19,"valueIGNORED":3},
{"from":21,"to":20,"valueIGNORED":5},
{"from":22,"to":16,"valueIGNORED":3},
{"from":22,"to":17,"valueIGNORED":3},
{"from":22,"to":18,"valueIGNORED":3},
{"from":22,"to":19,"valueIGNORED":3},
{"from":22,"to":20,"valueIGNORED":4},
{"from":22,"to":21,"valueIGNORED":4},
{"from":23,"to":16,"valueIGNORED":3},
{"from":23,"to":17,"valueIGNORED":3},
{"from":23,"to":18,"valueIGNORED":3},
{"from":23,"to":19,"valueIGNORED":3},
{"from":23,"to":20,"valueIGNORED":4},
{"from":23,"to":21,"valueIGNORED":4},
{"from":23,"to":22,"valueIGNORED":4},
{"from":23,"to":12,"valueIGNORED":2},
{"from":23,"to":11,"valueIGNORED":9},
{"from":24,"to":23,"valueIGNORED":2},
{"from":24,"to":11,"valueIGNORED":7},
{"from":25,"to":24,"valueIGNORED":13},
{"from":25,"to":23,"valueIGNORED":1},
{"from":25,"to":11,"valueIGNORED":12},
{"from":26,"to":24,"valueIGNORED":4},
{"from":26,"to":11,"valueIGNORED":31},
{"from":26,"to":16,"valueIGNORED":1},
{"from":26,"to":25,"valueIGNORED":1},
{"from":27,"to":11,"valueIGNORED":17},
{"from":27,"to":23,"valueIGNORED":5},
{"from":27,"to":25,"valueIGNORED":5},
{"from":27,"to":24,"valueIGNORED":1},
{"from":27,"to":26,"valueIGNORED":1},
{"from":28,"to":11,"valueIGNORED":8},
{"from":28,"to":27,"valueIGNORED":1},
{"from":29,"to":23,"valueIGNORED":1},
{"from":29,"to":27,"valueIGNORED":1},
{"from":29,"to":11,"valueIGNORED":2},
{"from":30,"to":23,"valueIGNORED":1},
{"from":31,"to":30,"valueIGNORED":2},
{"from":31,"to":11,"valueIGNORED":3},
{"from":31,"to":23,"valueIGNORED":2},
{"from":31,"to":27,"valueIGNORED":1},
{"from":32,"to":11,"valueIGNORED":1},
{"from":33,"to":11,"valueIGNORED":2},
{"from":33,"to":27,"valueIGNORED":1},
{"from":34,"to":11,"valueIGNORED":3},
{"from":34,"to":29,"valueIGNORED":2},
{"from":35,"to":11,"valueIGNORED":3},
{"from":35,"to":34,"valueIGNORED":3},
{"from":35,"to":29,"valueIGNORED":2},
{"from":36,"to":34,"valueIGNORED":2},
{"from":36,"to":35,"valueIGNORED":2},
{"from":36,"to":11,"valueIGNORED":2},
{"from":36,"to":29,"valueIGNORED":1},
{"from":37,"to":34,"valueIGNORED":2},
{"from":37,"to":35,"valueIGNORED":2},
{"from":37,"to":36,"valueIGNORED":2},
{"from":37,"to":11,"valueIGNORED":2},
{"from":37,"to":29,"valueIGNORED":1},
{"from":38,"to":34,"valueIGNORED":2},
{"from":38,"to":35,"valueIGNORED":2},
{"from":38,"to":36,"valueIGNORED":2},
{"from":38,"to":37,"valueIGNORED":2},
{"from":38,"to":11,"valueIGNORED":2},
{"from":38,"to":29,"valueIGNORED":1},
{"from":39,"to":25,"valueIGNORED":1},
{"from":40,"to":25,"valueIGNORED":1},
{"from":41,"to":24,"valueIGNORED":2},
{"from":41,"to":25,"valueIGNORED":3},
{"from":42,"to":41,"valueIGNORED":2},
{"from":42,"to":25,"valueIGNORED":2},
{"from":42,"to":24,"valueIGNORED":1},
{"from":43,"to":11,"valueIGNORED":3},
{"from":43,"to":26,"valueIGNORED":1},
{"from":43,"to":27,"valueIGNORED":1},
{"from":44,"to":28,"valueIGNORED":3},
{"from":44,"to":11,"valueIGNORED":1},
{"from":45,"to":28,"valueIGNORED":2},
{"from":47,"to":46,"valueIGNORED":1},
{"from":48,"to":47,"valueIGNORED":2},
{"from":48,"to":25,"valueIGNORED":1},
{"from":48,"to":27,"valueIGNORED":1},
{"from":48,"to":11,"valueIGNORED":1},
{"from":49,"to":26,"valueIGNORED":3},
{"from":49,"to":11,"valueIGNORED":2},
{"from":50,"to":49,"valueIGNORED":1},
{"from":50,"to":24,"valueIGNORED":1},
{"from":51,"to":49,"valueIGNORED":9},
{"from":51,"to":26,"valueIGNORED":2},
{"from":51,"to":11,"valueIGNORED":2},
{"from":52,"to":51,"valueIGNORED":1},
{"from":52,"to":39,"valueIGNORED":1},
{"from":53,"to":51,"valueIGNORED":1},
{"from":54,"to":51,"valueIGNORED":2},
{"from":54,"to":49,"valueIGNORED":1},
{"from":54,"to":26,"valueIGNORED":1},
{"from":55,"to":51,"valueIGNORED":6},
{"from":55,"to":49,"valueIGNORED":12},
{"from":55,"to":39,"valueIGNORED":1},
{"from":55,"to":54,"valueIGNORED":1},
{"from":55,"to":26,"valueIGNORED":21},
{"from":55,"to":11,"valueIGNORED":19},
{"from":55,"to":16,"valueIGNORED":1},
{"from":55,"to":25,"valueIGNORED":2},
{"from":55,"to":41,"valueIGNORED":5},
{"from":55,"to":48,"valueIGNORED":4},
{"from":56,"to":49,"valueIGNORED":1},
{"from":56,"to":55,"valueIGNORED":1},
{"from":57,"to":55,"valueIGNORED":1},
{"from":57,"to":41,"valueIGNORED":1},
{"from":57,"to":48,"valueIGNORED":1},
{"from":58,"to":55,"valueIGNORED":7},
{"from":58,"to":48,"valueIGNORED":7},
{"from":58,"to":27,"valueIGNORED":6},
{"from":58,"to":57,"valueIGNORED":1},
{"from":58,"to":11,"valueIGNORED":4},
{"from":59,"to":58,"valueIGNORED":15},
{"from":59,"to":55,"valueIGNORED":5},
{"from":59,"to":48,"valueIGNORED":6},
{"from":59,"to":57,"valueIGNORED":2},
{"from":60,"to":48,"valueIGNORED":1},
{"from":60,"to":58,"valueIGNORED":4},
{"from":60,"to":59,"valueIGNORED":2},
{"from":61,"to":48,"valueIGNORED":2},
{"from":61,"to":58,"valueIGNORED":6},
{"from":61,"to":60,"valueIGNORED":2},
{"from":61,"to":59,"valueIGNORED":5},
{"from":61,"to":57,"valueIGNORED":1},
{"from":61,"to":55,"valueIGNORED":1},
{"from":62,"to":55,"valueIGNORED":9},
{"from":62,"to":58,"valueIGNORED":17},
{"from":62,"to":59,"valueIGNORED":13},
{"from":62,"to":48,"valueIGNORED":7},
{"from":62,"to":57,"valueIGNORED":2},
{"from":62,"to":41,"valueIGNORED":1},
{"from":62,"to":61,"valueIGNORED":6},
{"from":62,"to":60,"valueIGNORED":3},
{"from":63,"to":59,"valueIGNORED":5},
{"from":63,"to":48,"valueIGNORED":5},
{"from":63,"to":62,"valueIGNORED":6},
{"from":63,"to":57,"valueIGNORED":2},
{"from":63,"to":58,"valueIGNORED":4},
{"from":63,"to":61,"valueIGNORED":3},
{"from":63,"to":60,"valueIGNORED":2},
{"from":63,"to":55,"valueIGNORED":1},
{"from":64,"to":55,"valueIGNORED":5},
{"from":64,"to":62,"valueIGNORED":12},
{"from":64,"to":48,"valueIGNORED":5},
{"from":64,"to":63,"valueIGNORED":4},
{"from":64,"to":58,"valueIGNORED":10},
{"from":64,"to":61,"valueIGNORED":6},
{"from":64,"to":60,"valueIGNORED":2},
{"from":64,"to":59,"valueIGNORED":9},
{"from":64,"to":57,"valueIGNORED":1},
{"from":64,"to":11,"valueIGNORED":1},
{"from":65,"to":63,"valueIGNORED":5},
{"from":65,"to":64,"valueIGNORED":7},
{"from":65,"to":48,"valueIGNORED":3},
{"from":65,"to":62,"valueIGNORED":5},
{"from":65,"to":58,"valueIGNORED":5},
{"from":65,"to":61,"valueIGNORED":5},
{"from":65,"to":60,"valueIGNORED":2},
{"from":65,"to":59,"valueIGNORED":5},
{"from":65,"to":57,"valueIGNORED":1},
{"from":65,"to":55,"valueIGNORED":2},
{"from":66,"to":64,"valueIGNORED":3},
{"from":66,"to":58,"valueIGNORED":3},
{"from":66,"to":59,"valueIGNORED":1},
{"from":66,"to":62,"valueIGNORED":2},
{"from":66,"to":65,"valueIGNORED":2},
{"from":66,"to":48,"valueIGNORED":1},
{"from":66,"to":63,"valueIGNORED":1},
{"from":66,"to":61,"valueIGNORED":1},
{"from":66,"to":60,"valueIGNORED":1},
{"from":67,"to":57,"valueIGNORED":3},
{"from":68,"to":25,"valueIGNORED":5},
{"from":68,"to":11,"valueIGNORED":1},
{"from":68,"to":24,"valueIGNORED":1},
{"from":68,"to":27,"valueIGNORED":1},
{"from":68,"to":48,"valueIGNORED":1},
{"from":68,"to":41,"valueIGNORED":1},
{"from":69,"to":25,"valueIGNORED":6},
{"from":69,"to":68,"valueIGNORED":6},
{"from":69,"to":11,"valueIGNORED":1},
{"from":69,"to":24,"valueIGNORED":1},
{"from":69,"to":27,"valueIGNORED":2},
{"from":69,"to":48,"valueIGNORED":1},
{"from":69,"to":41,"valueIGNORED":1},
{"from":70,"to":25,"valueIGNORED":4},
{"from":70,"to":69,"valueIGNORED":4},
{"from":70,"to":68,"valueIGNORED":4},
{"from":70,"to":11,"valueIGNORED":1},
{"from":70,"to":24,"valueIGNORED":1},
{"from":70,"to":27,"valueIGNORED":1},
{"from":70,"to":41,"valueIGNORED":1},
{"from":70,"to":58,"valueIGNORED":1},
{"from":71,"to":27,"valueIGNORED":1},
{"from":71,"to":69,"valueIGNORED":2},
{"from":71,"to":68,"valueIGNORED":2},
{"from":71,"to":70,"valueIGNORED":2},
{"from":71,"to":11,"valueIGNORED":1},
{"from":71,"to":48,"valueIGNORED":1},
{"from":71,"to":41,"valueIGNORED":1},
{"from":71,"to":25,"valueIGNORED":1},
{"from":72,"to":26,"valueIGNORED":2},
{"from":72,"to":27,"valueIGNORED":1},
{"from":72,"to":11,"valueIGNORED":1},
{"from":73,"to":48,"valueIGNORED":2},
{"from":74,"to":48,"valueIGNORED":2},
{"from":74,"to":73,"valueIGNORED":3},
{"from":75,"to":69,"valueIGNORED":3},
{"from":75,"to":68,"valueIGNORED":3},
{"from":75,"to":25,"valueIGNORED":3},
{"from":75,"to":48,"valueIGNORED":1},
{"from":75,"to":41,"valueIGNORED":1},
{"from":75,"to":70,"valueIGNORED":1},
{"from":75,"to":71,"valueIGNORED":1},
{"from":76,"to":64,"valueIGNORED":1},
{"from":76,"to":65,"valueIGNORED":1},
{"from":76,"to":66,"valueIGNORED":1},
{"from":76,"to":63,"valueIGNORED":1},
{"from":76,"to":62,"valueIGNORED":1},
{"from":76,"to":48,"valueIGNORED":1},
{"from":76,"to":58,"valueIGNORED":1}
];
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {nodes: {shape:'circle'},stabilize: false};
var graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
</body>
</html>

+ 113
- 0
examples/graph/23_hierarchical_layout.html View File

@ -0,0 +1,113 @@
<!doctype html>
<html>
<head>
<title>Graph | Random nodes</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
function draw() {
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
var nodeCount = document.getElementById('nodeCount').value;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
connectionCount[i] = 0;
// create edges in a scale-free-graph way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = edges.length * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
var from = i;
var to = j;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
}
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
edges: {
},
stabilize: false,
hierarchicalLayout:true
};
graph = new vis.Graph(container, data, options);
// add event listeners
graph.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
</head>
<body onload="draw();">
<h2>Hierarchical Layout - Scale-Free-Graph</h2>
<div style="width:700px; font-size:14px;">
This example shows the randomly generated <b>scale-free-graph</b> set of nodes and connected edges from example 2.
In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
</div>
<br />
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
</form>
<br>
<div id="mygraph"></div>
<p id="selection"></p>
</body>
</html>

+ 139
- 0
examples/graph/24_hierarchical_layout_userdefined.html View File

@ -0,0 +1,139 @@
<!doctype html>
<html>
<head>
<title>Graph | Random nodes</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
function draw() {
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
for (var i = 0; i < 15; i++) {
nodes.push({
id: i,
label: String(i)
});
}
edges.push({
from: 0,
to: 1
});
edges.push({
from: 0,
to: 6
});
edges.push({
from: 0,
to: 13
});edges.push({
from: 0,
to: 11
});
edges.push({
from: 1,
to: 2
});
edges.push({
from: 2,
to: 3
});
edges.push({
from: 2,
to: 4
});
edges.push({
from: 3,
to: 5
});
edges.push({
from: 1,
to: 10
});
edges.push({
from: 1,
to: 7
});
edges.push({
from: 2,
to: 8
});
edges.push({
from: 2,
to: 9
});
edges.push({
from: 3,
to: 14
});
edges.push({
from: 1,
to: 12
});
nodes[0]["level"] = 0;
nodes[1]["level"] = 1;
nodes[2]["level"] = 3;
nodes[3]["level"] = 4;
nodes[4]["level"] = 4;
nodes[5]["level"] = 5;
nodes[6]["level"] = 1;
nodes[7]["level"] = 2;
nodes[8]["level"] = 4;
nodes[9]["level"] = 4;
nodes[10]["level"] = 2;
nodes[11]["level"] = 1;
nodes[12]["level"] = 2;
nodes[13]["level"] = 1;
nodes[14]["level"] = 5;
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
hierarchicalLayout:true
};
graph = new vis.Graph(container, data, options);
// add event listeners
graph.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
</head>
<body onload="draw();">
<h2>Hierarchical Layout - User-defined</h2>
<div style="width:700px; font-size:14px;">
This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined.
</div>
<br />
<div id="mygraph"></div>
<p id="selection"></p>
</body>
</html>

+ 4
- 0
examples/graph/index.html View File

@ -32,6 +32,10 @@
<p><a href="18_fully_random_nodes_clustering.html">18_fully_random_nodes_clustering.html</a></p> <p><a href="18_fully_random_nodes_clustering.html">18_fully_random_nodes_clustering.html</a></p>
<p><a href="19_scale_free_graph_clustering.html">19_scale_free_graph_clustering.html</a></p> <p><a href="19_scale_free_graph_clustering.html">19_scale_free_graph_clustering.html</a></p>
<p><a href="20_navigation.html">20_navigation.html</a></p> <p><a href="20_navigation.html">20_navigation.html</a></p>
<p><a href="21_data_manipulation.html">21_data_manipulation.html</a></p>
<p><a href="22_les_miserables.html">22_les_miserables.html</a></p>
<p><a href="23_hierarchical_layout.html">23_hierarchical_layout.html</a></p>
<p><a href="24_hierarchical_layout_userdefined.html">24_hierarchical_layout_userdefined.html</a></p>
<p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p> <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
</div> </div>

+ 17
- 4
examples/timeline/06_event_listeners.html View File

@ -18,16 +18,25 @@
<div id="log"></div> <div id="log"></div>
<script type="text/javascript"> <script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
var items = new vis.DataSet({
convert: {
start: 'Date',
end: 'Date'
}
});
items.add([
{id: 1, content: 'item 1', start: '2013-04-20'}, {id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'}, {id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'}, {id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'}, {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'}, {id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'} {id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
]);
var container = document.getElementById('visualization');
var options = {
editable: true
};
var timeline = new vis.Timeline(container, items, options); var timeline = new vis.Timeline(container, items, options);
timeline.on('rangechange', function (properties) { timeline.on('rangechange', function (properties) {
@ -40,6 +49,10 @@
logEvent('select', properties); logEvent('select', properties);
}); });
items.on('*', function (event, properties) {
logEvent(event, properties);
});
function logEvent(event, properties) { function logEvent(event, properties) {
var log = document.getElementById('log'); var log = document.getElementById('log');
var msg = document.createElement('div'); var msg = document.createElement('div');

+ 65
- 0
examples/timeline/07_custom_time_bar.html View File

@ -0,0 +1,65 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Show current and custom time bars</title>
<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 11pt;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
<input type="text" id="setTime" value="2014-02-07" />
<input type="button" id="set" value="Set custom time" />
</p>
<p>
<input type="button" id="get" value="Get custom time" />
<span id="getTime"></span>
</p>
<p>
<code>timechange</code> event: <span id="timechangeEvent"></span>
</p>
<p>
<code>timechanged</code> event: <span id="timechangedEvent"></span>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [];
var options = {
showCurrentTime: true,
showCustomTime: true,
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);
document.getElementById('set').onclick = function () {
var time = document.getElementById('setTime').value;
timeline.setCustomTime(time);
};
document.getElementById('setTime').value = new Date().toISOString().substring(0, 10);
document.getElementById('get').onclick = function () {
document.getElementById('getTime').innerHTML = timeline.getCustomTime();
};
timeline.on('timechange', function (properties) {
document.getElementById('timechangeEvent').innerHTML = properties.time;
});
timeline.on('timechanged', function (properties) {
document.getElementById('timechangedEvent').innerHTML = properties.time;
});
</script>
</body>
</html>

+ 91
- 0
examples/timeline/08_edit_items.html View File

@ -0,0 +1,91 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Edit items</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<p></p>
<div id="log"></div>
<script type="text/javascript">
var items = new vis.DataSet();
items.add([
{id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
{id: 2, content: 'item 2', start: new Date(2013, 3, 14)},
{id: 3, content: 'item 3', start: new Date(2013, 3, 18)},
{id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)},
{id: 5, content: 'item 5', start: new Date(2013, 3, 25)},
{id: 6, content: 'item 6', start: new Date(2013, 3, 27)}
]);
var container = document.getElementById('visualization');
var options = {
editable: true,
onAdd: function (item, callback) {
item.content = prompt('Enter text content for new item:', item.content);
if (item.content != null) {
callback(item); // send back adjusted new item
}
else {
callback(null); // cancel item creation
}
},
onMove: function (item, callback) {
if (confirm('Do you really want to move the item to\n' +
'start: ' + item.start + '\n' +
'end: ' + item.end + '?')) {
callback(item); // send back item as confirmation (can be changed
}
else {
callback(null); // cancel editing item
}
},
onUpdate: function (item, callback) {
item.content = prompt('Edit items text:', item.content);
if (item.content != null) {
callback(item); // send back adjusted item
}
else {
callback(null); // cancel updating the item
}
},
onRemove: function (item, callback) {
if (confirm('Remove item ' + item.content + '?')) {
callback(item); // confirm deletion
}
else {
callback(null); // cancel deletion
}
}
};
var timeline = new vis.Timeline(container, items, options);
items.on('*', function (event, properties) {
logEvent(event, properties);
});
function logEvent(event, properties) {
var log = document.getElementById('log');
var msg = document.createElement('div');
msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
'properties=' + JSON.stringify(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
</script>
</body>
</html>

+ 2
- 0
examples/timeline/index.html View File

@ -18,6 +18,8 @@
<p><a href="04_html_data.html">04_html_data.html</a></p> <p><a href="04_html_data.html">04_html_data.html</a></p>
<p><a href="05_groups.html">05_groups.html</a></p> <p><a href="05_groups.html">05_groups.html</a></p>
<p><a href="06_event_listeners.html">06_event_listeners.html</a></p> <p><a href="06_event_listeners.html">06_event_listeners.html</a></p>
<p><a href="07_custom_time_bar.html">07_custom_time_bar.html</a></p>
<p><a href="08_edit_items.html">08_edit_items.html</a></p>
</div> </div>
</body> </body>

+ 1
- 1
index.html View File

@ -73,7 +73,7 @@ bower install vis
<h3>download</h3> <h3>download</h3>
<a href="download/vis.zip">Click here to download vis.js</a> <a href="download/vis.zip">Click here to download vis.js</a>
(version <span class="version">0.4.0</span>)
(version <span class="version">0.5.1</span>)
<h2 id="example">Example</h2> <h2 id="example">Example</h2>

Loading…
Cancel
Save