Browse Source

Merge branch 'develop' into css_transitions

Conflicts:
	src/DataSet.js
	src/timeline/Timeline.js
	src/timeline/component/Group.js
css_transitions
jos 10 years ago
parent
commit
72b978d067
208 changed files with 15819 additions and 5454 deletions
  1. +1
    -0
      .gitignore
  2. +52
    -1
      HISTORY.md
  3. +35
    -24
      Jakefile.js
  4. +7
    -6
      README.md
  5. +1
    -1
      bower.json
  6. +0
    -0
      dist/img/network/acceptDeleteIcon.png
  7. +0
    -0
      dist/img/network/addNodeIcon.png
  8. +0
    -0
      dist/img/network/backIcon.png
  9. +0
    -0
      dist/img/network/connectIcon.png
  10. +0
    -0
      dist/img/network/cross.png
  11. +0
    -0
      dist/img/network/cross2.png
  12. +0
    -0
      dist/img/network/deleteIcon.png
  13. +0
    -0
      dist/img/network/downArrow.png
  14. +0
    -0
      dist/img/network/editIcon.png
  15. +0
    -0
      dist/img/network/leftArrow.png
  16. +0
    -0
      dist/img/network/minus.png
  17. +0
    -0
      dist/img/network/plus.png
  18. +0
    -0
      dist/img/network/rightArrow.png
  19. +0
    -0
      dist/img/network/upArrow.png
  20. +0
    -0
      dist/img/network/zoomExtends.png
  21. +343
    -108
      dist/vis.css
  22. +7692
    -3808
      dist/vis.js
  23. +1
    -1
      dist/vis.min.css
  24. +14
    -12
      dist/vis.min.js
  25. +16
    -5
      docs/dataset.html
  26. +0
    -2
      docs/dataview.html
  27. +859
    -0
      docs/graph2d.html
  28. +5
    -2
      docs/graph3d.html
  29. +6
    -2
      docs/index.html
  30. +242
    -150
      docs/network.html
  31. +268
    -235
      docs/timeline.html
  32. +0
    -18
      examples/graph/14_dot_language.html
  33. +53
    -0
      examples/graph2d/01_basic.html
  34. +57
    -0
      examples/graph2d/02_bars.html
  35. +112
    -0
      examples/graph2d/03_groups.html
  36. +126
    -0
      examples/graph2d/04_rightAxis.html
  37. +138
    -0
      examples/graph2d/05_bothAxis.html
  38. +101
    -0
      examples/graph2d/06_interpolation.html
  39. +74
    -0
      examples/graph2d/07_scrollingAndSorting.html
  40. +150
    -0
      examples/graph2d/08_performance.html
  41. +87
    -0
      examples/graph2d/default.css
  42. +21
    -0
      examples/graph2d/index.html
  43. +2
    -1
      examples/index.html
  44. +6
    -6
      examples/network/01_basic_usage.html
  45. +10
    -10
      examples/network/02_random_nodes.html
  46. +8
    -8
      examples/network/03_images.html
  47. +7
    -7
      examples/network/04_shapes.html
  48. +7
    -7
      examples/network/05_social_network.html
  49. +8
    -8
      examples/network/06_groups.html
  50. +8
    -8
      examples/network/07_selections.html
  51. +8
    -8
      examples/network/08_mobile_friendly.html
  52. +7
    -7
      examples/network/09_sizing.html
  53. +6
    -6
      examples/network/10_multiline_text.html
  54. +7
    -7
      examples/network/11_custom_style.html
  55. +7
    -7
      examples/network/12_scalable_images.html
  56. +6
    -6
      examples/network/13_dashed_lines.html
  57. +18
    -0
      examples/network/14_dot_language.html
  58. +9
    -9
      examples/network/15_dot_language_playground.html
  59. +8
    -8
      examples/network/16_dynamic_data.html
  60. +11
    -11
      examples/network/17_network_info.html
  61. +9
    -9
      examples/network/18_fully_random_nodes_clustering.html
  62. +11
    -11
      examples/network/19_scale_free_graph_clustering.html
  63. +16
    -16
      examples/network/20_navigation.html
  64. +16
    -16
      examples/network/21_data_manipulation.html
  65. +6
    -6
      examples/network/22_les_miserables.html
  66. +11
    -11
      examples/network/23_hierarchical_layout.html
  67. +8
    -8
      examples/network/24_hierarchical_layout_userdefined.html
  68. +11
    -11
      examples/network/25_physics_configuration.html
  69. +0
    -0
      examples/network/graphviz/data/fsm.gv.txt
  70. +0
    -0
      examples/network/graphviz/data/hello.gv.txt
  71. +0
    -0
      examples/network/graphviz/data/process.gv.txt
  72. +0
    -0
      examples/network/graphviz/data/siblings.gv.txt
  73. +0
    -0
      examples/network/graphviz/data/softmaint.gv.txt
  74. +0
    -0
      examples/network/graphviz/data/traffic_lights.gv.txt
  75. +0
    -0
      examples/network/graphviz/data/transparency.gv.txt
  76. +0
    -0
      examples/network/graphviz/data/twopi2.gv.txt
  77. +0
    -0
      examples/network/graphviz/data/unix.gv.txt
  78. +0
    -0
      examples/network/graphviz/data/world.gv.txt
  79. +4
    -4
      examples/network/graphviz/graphviz_gallery.html
  80. +0
    -0
      examples/network/graphviz/screenshots/fsm.png
  81. +0
    -0
      examples/network/graphviz/screenshots/hello.png
  82. +0
    -0
      examples/network/graphviz/screenshots/softmaint.png
  83. +0
    -0
      examples/network/graphviz/screenshots/traffic_lights.png
  84. +0
    -0
      examples/network/img/refresh-cl/Hardware-Fax-icon.png
  85. +0
    -0
      examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png
  86. +0
    -0
      examples/network/img/refresh-cl/Hardware-Mobile-Phone-icon.png
  87. +0
    -0
      examples/network/img/refresh-cl/Hardware-My-Computer-3-icon.png
  88. +0
    -0
      examples/network/img/refresh-cl/Hardware-My-PDA-02-icon.png
  89. +0
    -0
      examples/network/img/refresh-cl/Hardware-My-PDA-04-icon.png
  90. +0
    -0
      examples/network/img/refresh-cl/Hardware-My-PDA-05-icon.png
  91. +0
    -0
      examples/network/img/refresh-cl/Hardware-My-Phone-Picture-icon.png
  92. +0
    -0
      examples/network/img/refresh-cl/Hardware-Printer-Blue-icon.png
  93. +0
    -0
      examples/network/img/refresh-cl/Misc-Scanner-default-icon.png
  94. +0
    -0
      examples/network/img/refresh-cl/Network-Drive-icon.png
  95. +0
    -0
      examples/network/img/refresh-cl/Network-Internet-Connection-icon.png
  96. +0
    -0
      examples/network/img/refresh-cl/Network-Pipe-icon.png
  97. +0
    -0
      examples/network/img/refresh-cl/System-Firewall-2-icon.png
  98. +0
    -0
      examples/network/img/refresh-cl/System-Globe-icon.png
  99. +0
    -0
      examples/network/img/refresh-cl/license.txt
  100. +0
    -0
      examples/network/img/soft-scraps-icons/Document-icon24.png

+ 1
- 0
.gitignore View File

@ -6,3 +6,4 @@ node_modules
.settings/org.eclipse.wst.jsdt.ui.superType.container .settings/org.eclipse.wst.jsdt.ui.superType.container
.settings/org.eclipse.wst.jsdt.ui.superType.name .settings/org.eclipse.wst.jsdt.ui.superType.name
npm-debug.log npm-debug.log
examples/graph/24_hierarchical_layout_userdefined2.html

+ 52
- 1
HISTORY.md View File

@ -2,20 +2,71 @@
http://visjs.org http://visjs.org
## 2014-06-06, version 1.1.1
## not yet released, version 3.0.1-SNAPSHOT
## 2014-07-07, version 3.0.0
### Timeline ### Timeline
- Implemented support for displaying a `title` for both items and groups.
- Fixed auto detected item type being preferred over the global item `type`.
- Throws an error when constructing without new keyword.
- Removed the 'rangeoverflow' item type. Instead, one can use a regular range
and change css styling of the item contents to:
.vis.timeline .item.range .content {
overflow: visible;
}
- Fixed the height of background and foreground panels of groups.
- Fixed ranges in the Timeline sometimes overlapping when dragging the Timeline.
- Fixed `DataView` not working in Timeline.
### Network (formerly named Graph)
- Renamed `Graph` to `Network` to prevent confusion with the visualizations
`Graph2d` and `Graph3d`.
- Renamed option `dragGraph` to `dragNetwork`.
- Now throws an error when constructing without new keyword.
- Added pull request from Vukk, user can now define the edge width multiplier
when selected.
- Fixed `graph.storePositions()`.
- Extended Selection API with `selectNodes` and `selectEdges`, deprecating
`setSelection`.
- Fixed multiline labels.
- Changed hierarchical physics solver and updated docs.
### Graph2d
- Added first iteration of the Graph2d.
### Graph3d
- Now throws an error when constructing without new keyword.
## 2014-06-19, version 2.0.0
### Timeline
- Implemented function `destroy` to neatly cleanup a Timeline.
- Implemented support for dragging the timeline contents vertically. - Implemented support for dragging the timeline contents vertically.
- Implemented options `zoomable` and `moveable`. - Implemented options `zoomable` and `moveable`.
- Changed default value of option `showCurrentTime` to true. - Changed default value of option `showCurrentTime` to true.
- Internal refactoring and simplification of the code. - Internal refactoring and simplification of the code.
- Fixed property `className` of groups not being applied to related contents and
background elements, and not being updated once applied.
### Graph ### Graph
- Reduced the timestep a little for smoother animations. - Reduced the timestep a little for smoother animations.
- Fixed dataManipulation.initiallyVisible functionality (thanks theGrue). - Fixed dataManipulation.initiallyVisible functionality (thanks theGrue).
- Forced typecast of fontSize to Number. - Forced typecast of fontSize to Number.
- Added editing of edges using the data manipulation toolkit.
### DataSet
- Renamed option `convert` to `type`.
## 2014-06-06, version 1.1.0 ## 2014-06-06, version 1.1.0

+ 35
- 24
Jakefile.js View File

@ -46,8 +46,11 @@ task('build', {async: true}, function () {
'./src/timeline/component/css/customtime.css', './src/timeline/component/css/customtime.css',
'./src/timeline/component/css/animation.css', './src/timeline/component/css/animation.css',
'./src/graph/css/graph-manipulation.css',
'./src/graph/css/graph-navigation.css'
'./src/timeline/component/css/dataaxis.css',
'./src/timeline/component/css/pathStyles.css',
'./src/network/css/network-manipulation.css',
'./src/network/css/network-navigation.css'
], ],
dest: VIS_CSS, dest: VIS_CSS,
separator: '\n' separator: '\n'
@ -62,10 +65,17 @@ task('build', {async: true}, function () {
'./src/shim.js', './src/shim.js',
'./src/util.js', './src/util.js',
'./src/DOMutil.js',
'./src/DataSet.js', './src/DataSet.js',
'./src/DataView.js', './src/DataView.js',
'./src/timeline/stack.js',
'./src/timeline/component/GraphGroup.js',
'./src/timeline/component/Legend.js',
'./src/timeline/component/DataAxis.js',
'./src/timeline/component/LineGraph.js',
'./src/timeline/DataStep.js',
'./src/timeline/Stack.js',
'./src/timeline/TimeStep.js', './src/timeline/TimeStep.js',
'./src/timeline/Range.js', './src/timeline/Range.js',
'./src/timeline/component/Component.js', './src/timeline/component/Component.js',
@ -76,26 +86,27 @@ task('build', {async: true}, function () {
'./src/timeline/component/item/*.js', './src/timeline/component/item/*.js',
'./src/timeline/component/Group.js', './src/timeline/component/Group.js',
'./src/timeline/Timeline.js', './src/timeline/Timeline.js',
'./src/graph/dotparser.js',
'./src/graph/shapes.js',
'./src/graph/Node.js',
'./src/graph/Edge.js',
'./src/graph/Popup.js',
'./src/graph/Groups.js',
'./src/graph/Images.js',
'./src/graph/graphMixins/physics/PhysicsMixin.js',
'./src/graph/graphMixins/physics/HierarchialRepulsion.js',
'./src/graph/graphMixins/physics/BarnesHut.js',
'./src/graph/graphMixins/physics/Repulsion.js',
'./src/graph/graphMixins/HierarchicalLayoutMixin.js',
'./src/graph/graphMixins/ManipulationMixin.js',
'./src/graph/graphMixins/SectorsMixin.js',
'./src/graph/graphMixins/ClusterMixin.js',
'./src/graph/graphMixins/SelectionMixin.js',
'./src/graph/graphMixins/NavigationMixin.js',
'./src/graph/graphMixins/MixinLoader.js',
'./src/graph/Graph.js',
'./src/timeline/Graph2d.js',
'./src/network/dotparser.js',
'./src/network/shapes.js',
'./src/network/Node.js',
'./src/network/Edge.js',
'./src/network/Popup.js',
'./src/network/Groups.js',
'./src/network/Images.js',
'./src/network/networkMixins/physics/PhysicsMixin.js',
'./src/network/networkMixins/physics/HierarchialRepulsion.js',
'./src/network/networkMixins/physics/BarnesHut.js',
'./src/network/networkMixins/physics/Repulsion.js',
'./src/network/networkMixins/HierarchicalLayoutMixin.js',
'./src/network/networkMixins/ManipulationMixin.js',
'./src/network/networkMixins/SectorsMixin.js',
'./src/network/networkMixins/ClusterMixin.js',
'./src/network/networkMixins/SelectionMixin.js',
'./src/network/networkMixins/NavigationMixin.js',
'./src/network/networkMixins/MixinLoader.js',
'./src/network/Network.js',
'./src/graph3d/Graph3d.js', './src/graph3d/Graph3d.js',
@ -106,7 +117,7 @@ task('build', {async: true}, function () {
}); });
// copy images // copy images
wrench.copyDirSyncRecursive('./src/graph/img', DIST + '/img/graph', {
wrench.copyDirSyncRecursive('./src/network/img', DIST + '/img/network', {
forceDelete: true forceDelete: true
}); });
wrench.copyDirSyncRecursive('./src/timeline/img', DIST + '/img/timeline', { wrench.copyDirSyncRecursive('./src/timeline/img', DIST + '/img/timeline', {

+ 7
- 6
README.md View File

@ -6,13 +6,14 @@ The library is designed to be easy to use, handle large amounts
of dynamic data, and enable manipulation of the data. of dynamic data, and enable manipulation of the data.
The library consists of the following components: The library consists of the following components:
- DataSet and DataView. A flexible key/value based data set.
Add, update, and remove items. Subscribe on changes in the data set.
Filter and order items and convert fields of items.
- DataSet and DataView. A flexible key/value based data set. Add, update, and
remove items. Subscribe on changes in the data set. A DataSet can filter and
order items, and convert fields of items.
- DataView. A filtered and/or formatted view on a DataSet.
- Graph2d. Plot data on a timeline with lines or barcharts.
- Graph3d. Display data in a three dimensional graph.
- Network. Display a network (force directed graph) with nodes and edges.
- Timeline. Display different types of data on a timeline. - Timeline. Display different types of data on a timeline.
The timeline and the items on the timeline can be interactively moved,
zoomed, and manipulated.
- Graph. Display an interactive graph or network with nodes and edges.
The vis.js library is developed by [Almende B.V](http://almende.com). The vis.js library is developed by [Almende B.V](http://almende.com).

+ 1
- 1
bower.json View File

@ -1,6 +1,6 @@
{ {
"name": "vis", "name": "vis",
"version": "1.1.0",
"version": "3.0.1-SNAPSHOT",
"description": "A dynamic, browser-based visualization library.", "description": "A dynamic, browser-based visualization library.",
"homepage": "http://visjs.org/", "homepage": "http://visjs.org/",
"repository": { "repository": {

dist/img/graph/acceptDeleteIcon.png → dist/img/network/acceptDeleteIcon.png View File


dist/img/graph/addNodeIcon.png → dist/img/network/addNodeIcon.png View File


dist/img/graph/backIcon.png → dist/img/network/backIcon.png View File


dist/img/graph/connectIcon.png → dist/img/network/connectIcon.png View File


dist/img/graph/cross.png → dist/img/network/cross.png View File


dist/img/graph/cross2.png → dist/img/network/cross2.png View File


dist/img/graph/deleteIcon.png → dist/img/network/deleteIcon.png View File


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


dist/img/graph/editIcon.png → dist/img/network/editIcon.png View File


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


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


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


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


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


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


+ 343
- 108
dist/vis.css View File

@ -2,34 +2,76 @@
} }
.vis.timeline.rootpanel {
.vis.timeline.root {
position: relative; position: relative;
border: 1px solid #bfbfbf;
overflow: hidden; overflow: hidden;
padding: 0;
margin: 0;
border: 1px solid #bfbfbf;
box-sizing: border-box; box-sizing: border-box;
/* FIXME: there is an issue with the height of the items when panel height is animated
-webkit-transition: height 4s ease-in-out;
transition: height 4s ease-in-out;
/**/
} }
.vis.timeline .vpanel {
.vis.timeline .vispanel {
position: absolute; position: absolute;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .vpanel.side {
border-right: 1px solid #bfbfbf;
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border: 1px #bfbfbf;
} }
.vis.timeline .vpanel.side.hidden {
display: none;
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right {
border-top-style: solid;
border-bottom-style: solid;
overflow: hidden;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border-left-style: solid;
border-right-style: solid;
}
.vis.timeline .background {
overflow: hidden;
} }
.vis.timeline .vispanel > .content {
position: relative;
}
.vis.timeline .vispanel .shadow {
position: absolute;
width: 100%;
height: 1px;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
/* TODO: find a nice way to ensure shadows are drawn on top of items
z-index: 1;
*/
}
.vis.timeline .vispanel .shadow.top {
top: -1px;
left: 0;
}
.vis.timeline .vispanel .shadow.bottom {
bottom: -1px;
left: 0;
}
.vis.timeline .labelset { .vis.timeline .labelset {
position: relative; position: relative;
@ -50,14 +92,12 @@
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline.top .labelset .vlabel {
border-top: 1px solid #bfbfbf;
border-bottom: none;
.vis.timeline .labelset .vlabel {
border-bottom: 1px solid #bfbfbf;
} }
.vis.timeline.bottom .labelset .vlabel {
border-top: none;
border-bottom: 1px solid #bfbfbf;
.vis.timeline .labelset .vlabel:last-child {
border-bottom: none;
} }
.vis.timeline .labelset .vlabel .inner { .vis.timeline .labelset .vlabel .inner {
@ -65,6 +105,10 @@
padding: 5px; padding: 5px;
} }
.vis.timeline .labelset .vlabel .inner.hidden {
padding: 0;
}
.vis.timeline .itemset { .vis.timeline .itemset {
position: relative; position: relative;
@ -72,38 +116,33 @@
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
/* FIXME: get transition working for rootpanel and itemset
-webkit-transition: height 4s ease-in-out;
transition: height 4s ease-in-out;
/**/
} }
.vis.timeline .background {
}
.vis.timeline .foreground {
.vis.timeline .itemset .background,
.vis.timeline .itemset .foreground {
position: absolute;
width: 100%;
height: 100%;
} }
.vis.timeline .axis { .vis.timeline .axis {
overflow: visible;
position: absolute;
width: 100%;
height: 0;
left: 1px;
z-index: 1;
} }
.vis.timeline .group {
.vis.timeline .foreground .group {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #bfbfbf;
} }
.vis.timeline.top .group {
border-top: 1px solid #bfbfbf;
.vis.timeline .foreground .group:last-child {
border-bottom: none; border-bottom: none;
} }
.vis.timeline.bottom .group {
border-top: none;
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .item { .vis.timeline .item {
position: absolute; position: absolute;
@ -113,11 +152,6 @@
background-color: #D5DDF6; background-color: #D5DDF6;
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
/* TODO: enable css transitions
-webkit-transition: top .4s ease-in-out, bottom .4s ease-in-out;
transition: top .4s ease-in-out, bottom .4s ease-in-out;
/**/
} }
.vis.timeline .item.selected { .vis.timeline .item.selected {
@ -126,7 +160,7 @@
z-index: 999; z-index: 999;
} }
.vis.timeline.editable .item.selected {
.vis.timeline .editable .item.selected {
cursor: move; cursor: move;
} }
@ -152,15 +186,13 @@
border-radius: 4px; border-radius: 4px;
} }
.vis.timeline .item.range,
.vis.timeline .item.rangeoverflow{
.vis.timeline .item.range {
border-style: solid; border-style: solid;
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .item.range .content,
.vis.timeline .item.rangeoverflow .content {
.vis.timeline .item.range .content {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
@ -176,11 +208,6 @@
width: 0; width: 0;
border-left-width: 1px; border-left-width: 1px;
border-left-style: solid; border-left-style: solid;
/* TODO: enable css transitions
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
/**/
} }
.vis.timeline .item .content { .vis.timeline .item .content {
@ -198,8 +225,7 @@
cursor: pointer; cursor: pointer;
} }
.vis.timeline .item.range .drag-left,
.vis.timeline .item.rangeoverflow .drag-left {
.vis.timeline .item.range .drag-left {
position: absolute; position: absolute;
width: 24px; width: 24px;
height: 100%; height: 100%;
@ -210,8 +236,7 @@
z-index: 10000; z-index: 10000;
} }
.vis.timeline .item.range .drag-right,
.vis.timeline .item.rangeoverflow .drag-right {
.vis.timeline .item.range .drag-right {
position: absolute; position: absolute;
width: 24px; width: 24px;
height: 100%; height: 100%;
@ -223,7 +248,22 @@
} }
.vis.timeline .timeaxis { .vis.timeline .timeaxis {
position: relative;
overflow: hidden;
}
.vis.timeline .timeaxis.foreground {
top: 0;
left: 0;
width: 100%;
}
.vis.timeline .timeaxis.background {
position: absolute; position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} }
.vis.timeline .timeaxis .text { .vis.timeline .timeaxis .text {
@ -248,14 +288,6 @@
border-right: 1px solid; border-right: 1px solid;
} }
.vis.timeline .timeaxis .grid.horizontal {
position: absolute;
left: 0;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.vis.timeline .timeaxis .grid.minor { .vis.timeline .timeaxis .grid.minor {
border-color: #e5e5e5; border-color: #e5e5e5;
} }
@ -267,15 +299,218 @@
.vis.timeline .currenttime { .vis.timeline .currenttime {
background-color: #FF7F6E; background-color: #FF7F6E;
width: 2px; width: 2px;
z-index: 9;
z-index: 1;
} }
.vis.timeline .customtime { .vis.timeline .customtime {
background-color: #6E94FF; background-color: #6E94FF;
width: 2px; width: 2px;
cursor: move; cursor: move;
z-index: 9;
z-index: 1;
}
.vis.timeline.root {
/*
-webkit-transition: height .4s ease-in-out;
transition: height .4s ease-in-out;
*/
} }
div.graph-manipulationDiv {
.vis.timeline .vispanel {
/*
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
*/
}
.vis.timeline .axis {
/*
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
*/
}
/* TODO: get animation working nicely
.vis.timeline .item {
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
}
.vis.timeline .item.line {
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
}
/**/
.vis.timeline .vispanel.background.horizontal .grid.horizontal {
position: absolute;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.vis.timeline .vispanel.background.horizontal .grid.minor {
border-color: #e5e5e5;
}
.vis.timeline .vispanel.background.horizontal .grid.major {
border-color: #bfbfbf;
}
.vis.timeline .dataaxis .yAxis.major {
width: 100%;
position: absolute;
color: #4d4d4d;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.major.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.minor{
position: absolute;
width: 100%;
color: #bebebe;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.minor.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .legend {
background-color: rgba(247, 252, 255, 0.65);
padding: 5px;
border-color: #b3b3b3;
border-style:solid;
border-width: 1px;
box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
}
.vis.timeline .legendText {
/*font-size: 10px;*/
white-space: nowrap;
display: inline-block
}
.vis.timeline .graphGroup0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.vis.timeline .graphGroup1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.vis.timeline .graphGroup2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.vis.timeline .graphGroup3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.vis.timeline .graphGroup4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.vis.timeline .graphGroup5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.vis.timeline .graphGroup6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.vis.timeline .graphGroup7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.vis.timeline .graphGroup8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.vis.timeline .graphGroup9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.vis.timeline .fill {
fill-opacity:0.1;
stroke: none;
}
.vis.timeline .bar {
fill-opacity:0.5;
stroke-width:1px;
}
.vis.timeline .point {
stroke-width:2px;
fill-opacity:1.0;
}
.vis.timeline .legendBackground {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.vis.timeline .outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.vis.timeline .iconFill {
fill-opacity:0.3;
stroke: none;
}
div.network-manipulationDiv {
border-width:0px; border-width:0px;
border-bottom: 1px; border-bottom: 1px;
border-style:solid; border-style:solid;
@ -295,14 +530,14 @@ div.graph-manipulationDiv {
position:absolute; position:absolute;
} }
div.graph-manipulation-editMode {
div.network-manipulation-editMode {
height:30px; height:30px;
z-index:10; z-index:10;
position:absolute; position:absolute;
margin-top:20px; margin-top:20px;
} }
div.graph-manipulation-closeDiv {
div.network-manipulation-closeDiv {
height:30px; height:30px;
width:30px; width:30px;
z-index:11; z-index:11;
@ -311,7 +546,7 @@ div.graph-manipulation-closeDiv {
margin-left:590px; margin-left:590px;
background-position: 0px 0px; background-position: 0px 0px;
background-repeat:no-repeat; background-repeat:no-repeat;
background-image: url("img/graph/cross.png");
background-image: url("img/network/cross.png");
cursor: pointer; cursor: pointer;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -321,7 +556,7 @@ div.graph-manipulation-closeDiv {
user-select: none; user-select: none;
} }
span.graph-manipulationUI {
span.network-manipulationUI {
font-family: verdana; font-family: verdana;
font-size: 12px; font-size: 12px;
-moz-border-radius: 15px; -moz-border-radius: 15px;
@ -342,68 +577,68 @@ span.graph-manipulationUI {
user-select: none; user-select: none;
} }
span.graph-manipulationUI:hover {
span.network-manipulationUI:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
} }
span.graph-manipulationUI:active {
span.network-manipulationUI:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
} }
span.graph-manipulationUI.back {
background-image: url("img/graph/backIcon.png");
span.network-manipulationUI.back {
background-image: url("img/network/backIcon.png");
} }
span.graph-manipulationUI.none:hover {
span.network-manipulationUI.none:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
cursor: default; cursor: default;
} }
span.graph-manipulationUI.none:active {
span.network-manipulationUI.none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
} }
span.graph-manipulationUI.none {
span.network-manipulationUI.none {
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
} }
span.graph-manipulationUI.notification{
span.network-manipulationUI.notification{
margin: 2px; margin: 2px;
font-weight: bold; font-weight: bold;
} }
span.graph-manipulationUI.add {
background-image: url("img/graph/addNodeIcon.png");
span.network-manipulationUI.add {
background-image: url("img/network/addNodeIcon.png");
} }
span.graph-manipulationUI.edit {
background-image: url("img/graph/editIcon.png");
span.network-manipulationUI.edit {
background-image: url("img/network/editIcon.png");
} }
span.graph-manipulationUI.edit.editmode {
span.network-manipulationUI.edit.editmode {
background-color: #fcfcfc; background-color: #fcfcfc;
border-style:solid; border-style:solid;
border-width:1px; border-width:1px;
border-color: #cccccc; border-color: #cccccc;
} }
span.graph-manipulationUI.connect {
background-image: url("img/graph/connectIcon.png");
span.network-manipulationUI.connect {
background-image: url("img/network/connectIcon.png");
} }
span.graph-manipulationUI.delete {
background-image: url("img/graph/deleteIcon.png");
span.network-manipulationUI.delete {
background-image: url("img/network/deleteIcon.png");
} }
/* top right bottom left */ /* top right bottom left */
span.graph-manipulationLabel {
span.network-manipulationLabel {
margin: 0px 0px 0px 23px; margin: 0px 0px 0px 23px;
line-height: 25px; line-height: 25px;
} }
div.graph-seperatorLine {
div.network-seperatorLine {
display:inline-block; display:inline-block;
width:1px; width:1px;
height:20px; height:20px;
background-color: #bdbdbd; background-color: #bdbdbd;
margin: 5px 7px 0px 15px; margin: 5px 7px 0px 15px;
} }
div.graph-navigation {
div.network-navigation {
width:34px; width:34px;
height:34px; height:34px;
z-index:10; z-index:10;
@ -422,50 +657,50 @@ div.graph-navigation {
user-select: none; user-select: none;
} }
div.graph-navigation:hover {
div.network-navigation:hover {
box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30); box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
} }
div.graph-navigation:active {
div.network-navigation:active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95); box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
} }
div.graph-navigation.active {
div.network-navigation.active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95); box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
} }
div.graph-navigation.up {
background-image: url("img/graph/upArrow.png");
div.network-navigation.up {
background-image: url("img/network/upArrow.png");
bottom:50px; bottom:50px;
left:55px; left:55px;
} }
div.graph-navigation.down {
background-image: url("img/graph/downArrow.png");
div.network-navigation.down {
background-image: url("img/network/downArrow.png");
bottom:10px; bottom:10px;
left:55px; left:55px;
} }
div.graph-navigation.left {
background-image: url("img/graph/leftArrow.png");
div.network-navigation.left {
background-image: url("img/network/leftArrow.png");
bottom:10px; bottom:10px;
left:15px; left:15px;
} }
div.graph-navigation.right {
background-image: url("img/graph/rightArrow.png");
div.network-navigation.right {
background-image: url("img/network/rightArrow.png");
bottom:10px; bottom:10px;
left:95px; left:95px;
} }
div.graph-navigation.zoomIn {
background-image: url("img/graph/plus.png");
div.network-navigation.zoomIn {
background-image: url("img/network/plus.png");
bottom:10px; bottom:10px;
right:15px; right:15px;
} }
div.graph-navigation.zoomOut {
background-image: url("img/graph/minus.png");
div.network-navigation.zoomOut {
background-image: url("img/network/minus.png");
bottom:10px; bottom:10px;
right:55px; right:55px;
} }
div.graph-navigation.zoomExtends {
background-image: url("img/graph/zoomExtends.png");
div.network-navigation.zoomExtends {
background-image: url("img/network/zoomExtends.png");
bottom:50px; bottom:50px;
right:15px; right:15px;
} }

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


+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


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


+ 16
- 5
docs/dataset.html View File

@ -91,7 +91,7 @@ console.log('filtered items', items);
// retrieve formatted items // retrieve formatted items
var items = data.get({ var items = data.get({
fields: ['id', 'date'], fields: ['id', 'date'],
convert: {
type: {
date: 'ISODate' date: 'ISODate'
} }
}); });
@ -149,7 +149,7 @@ var data = new vis.DataSet([data] [, options])
</td> </td>
</tr> </tr>
<tr> <tr>
<td>convert</td>
<td>type</td>
<td>Object.&lt;String,&nbsp;String&gt;</td> <td>Object.&lt;String,&nbsp;String&gt;</td>
<td>none</td> <td>none</td>
<td> <td>
@ -220,6 +220,17 @@ var data = new vis.DataSet([data] [, options])
</td> </td>
</tr> </tr>
<tr>
<td>
getDataSet()
</td>
<td>DataSet</td>
<td>
Get the DataSet itself. In case of a DataView, this function does not
return the DataSet to which the DataView is connected.
</td>
</tr>
<tr> <tr>
<td> <td>
getIds([options]) getIds([options])
@ -227,7 +238,7 @@ var data = new vis.DataSet([data] [, options])
<td>Number[]</td> <td>Number[]</td>
<td> <td>
Get ids of all items or of a filtered set of items. Get ids of all items or of a filtered set of items.
Available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>convert</code> are not applicable in case of <code>getIds</code>.
Available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>type</code> are not applicable in case of <code>getIds</code>.
</td> </td>
</tr> </tr>
@ -649,7 +660,7 @@ DataSet.map(callback [, options]);
</tr> </tr>
<tr> <tr>
<td>convert</td>
<td>type</td>
<td>Object.&lt;String,&nbsp;String&gt;</td> <td>Object.&lt;String,&nbsp;String&gt;</td>
<td> <td>
An object containing field names as key, and data types as value. An object containing field names as key, and data types as value.
@ -700,7 +711,7 @@ data.add([
// retrieve formatted items // retrieve formatted items
var items = data.get({ var items = data.get({
fields: ['id', 'date', 'group'], // output the specified fields only fields: ['id', 'date', 'group'], // output the specified fields only
convert: {
type: {
date: 'Date', // convert the date fields to Date objects date: 'Date', // convert the date fields to Date objects
group: 'String' // convert the group fields to Strings group: 'String' // convert the group fields to Strings
} }

+ 0
- 2
docs/dataview.html View File

@ -103,8 +103,6 @@ var data = new vis.DataView(dataset, options)
are exactly the same as the properties available in methods are exactly the same as the properties available in methods
<code>DataSet.get</code> and <code>DataView.get</code>. <code>DataSet.get</code> and <code>DataView.get</code>.
<table> <table>
<tr> <tr>
<th>Name</th> <th>Name</th>

+ 859
- 0
docs/graph2d.html View File

@ -0,0 +1,859 @@
<html>
<head>
<title>vis.js | Graph2d documentation</title>
<style>
td.greenField {
background-color: #c9ffc7;
}
</style>
<link href='css/prettify.css' type='text/css' rel='stylesheet'>
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>Graph2d documentation</h1>
<h2 id="Overview">Overview</h2>
<p>
Graph2d is an interactive visualization chart to draw data in a 2D graph.
You can freely move and zoom in the graph by dragging and scrolling in the
window.
</p>
<p>
Graph2d uses HTML DOM and SVG for rendering. This allows for flexible
customization using css styling.
</p>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Loading">Loading</a></li>
<li><a href="#Data_Format">Data Format</a>
<ul>
<li><a href="#items">Items</a></li>
<li><a href="#groups">Groups</a></li>
</ul>
</li>
<li><a href="#Configuration_Options">Configuration Options</a>
<ul>
<li><a href="#graph2dOptions">Graph2d options</a></li>
<li><a href="#timelineOptions">Timeline options</a></li>
</ul>
</li>
<li><a href="#Methods">Methods</a></li>
<li><a href="#Events">Events</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
<h2 id="Example">Example</h2>
<p>
The following code shows how to create a Graph2d and provide it with data.
More examples can be found in the <a href="../examples">examples</a> directory.
</p>
<pre class="prettyprint lang-html">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Graph2d | Basic Example&lt;/title&gt;
&lt;style type="text/css"&gt;
body, html {
font-family: sans-serif;
}
&lt;/style&gt;
&lt;script src="../../dist/vis.js"&gt;&lt;/script&gt;
&lt;link href="../../dist/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="visualization"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="Loading">Loading</h2>
<p>
The class name of the Graph2d is <code>vis.Graph2d</code>.
When constructing a Graph2d, an HTML DOM container must be provided to attach
the graph to. Optionally, data an options can be provided.
Data is a vis <code>DataSet</code> or an <code>Array</code>, described in
section <a href="#Data_Format">Data Format</a>.
Options is a name-value map in the JSON format. The available options
are described in section <a href="#Configuration_Options">Configuration Options</a>.
Groups is a vis <code>DataSet</code> containing groups. The available options and the method of construction
are described in section <a href="#Group_Options">Data Format</a>.
</p>
<pre class="prettyprint lang-js">var graph = new vis.Graph2d(container [, data] [, options] [,groups]);</pre>
<p>
Data, options and groups can be set or changed later on using the functions
<code>Graph2d.setData(data)</code>, <code>Graph2d.setOptions(options)</code> and <code>Graph2d.setGroups(groups)</code>.
</p>
<h2 id="Data_Format">Data Format</h2>
<p>
Graph2d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
JSON objects are added to this DataSet by using the <code>add()</code> function.
Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
and can optionally have a property <code>style</code> and <code>filter</code>.
<p>
Graph2d can be provided with two types of data:
</p>
<ul>
<li><a href="#items">Items</a> containing a set of points to be displayed.</li>
<li><a href="#groups">Groups</a> containing a set of groups used to group items
together. All items belonging to a group will be drawn as a single graph.</li>
</ul>
<h3 id="items">Items</h3>
<pre class="prettyprint lang-js">
var items = [
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1}
];
</pre>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td>x</td>
<td>number</td>
<td>yes</td>
<td>Location on the x-axis.</td>
</tr>
<tr>
<td>y</td>
<td>number</td>
<td>yes</td>
<td>Location on the y-axis.</td>
</tr>
</tr>
<tr>
<td>group</td>
<td>number | string</td>
<td>no</td>
<td>The ID of the group this point belongs to.</td>
</tr>
</table>
<h3 id="Groups">Groups</h3>
<p>
Like the items, groups are regular JavaScript Arrays and Objects.
Using groups, items can be grouped together.
Items are filtered per group, and displayed as individual graphs. Groups can contain the properties <code>id</code>,
<code>content</code>, <code>className</code> (optional) and <code>options</code> (optional).
</p>
<p>
Groups can be applied to a timeline using the method <code>setGroups</code>.
A table with groups can be created like:
</p>
<pre class="prettyprint lang-js">
var groups = new vis.DataSet();
groups.add({
id: 1,
content: 'Group 1'
// Optional: a field 'className'
// Optional: options
})
groups.add({
// more groups...
});
</pre>
<p>
Groups can have the following properties:
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td>id</td>
<td>String | Number</td>
<td>yes</td>
<td>An id for the group. The group will display all items having a
property <code>group</code> which matches the <code>id</code>
of the group.</td>
</tr>
<tr>
<td>content</td>
<td>String</td>
<td>yes</td>
<td>The contents of the group. This can be plain text or html code.</td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td>no</td>
<td>This field is optional. A className can be used to give groups
an individual css style.
</td>
</tr>
<tr>
<td>options</td>
<td>JSON object</td>
<td>no</td>
<td>This field is optional. The options can be used to give a group a specific draw style.
Any options that are colored green in the Configuration Options can be used as options here.
</tr>
</table>
<h2 id="Configuration_Options">Configuration Options</h2>
<h3 id="graph2dOptions">Graph2d Options</h3>
Options can be used to customize the Graph2d to your purposes. These options can be passed to the Graph2d object either in
the constructor, or by the <code>setOptions</code> function.
<pre class="prettyprint lang-js">
var options = {
width: '100%',
height: '400px',
style: 'surface'
};
</pre>
The options colored in green can also be used as options for the groups. All options are optional.
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td class="greenField">yAxisOrientation</td>
<td>String</td>
<td>'left'</td>
<td>This defines with which axis, left or right, the graph is coupled. <a href="../examples/graph2d/05_bothAxis.html">Example 5</a> shows groups with different Y axis. If no groups are coupled
with an axis, it will not be shown.</td>
</tr>
<tr>
<td>defaultGroup</td>
<td>String</td>
<td>'default'</td>
<td>This is the label for the default, ungrouped items when shown in a legend.</td>
</tr>
<tr>
<td class="greenField">sort</td>
<td>Boolean</td>
<td>true</td>
<td>This determines if the items are sorted automatically.
They are sorted by the x value. If sort is enabled, more optimizations are possible, increasing the performance.</td>
</tr>
<tr>
<td class="greenField">sampling</td>
<td>Boolean</td>
<td>true</td>
<td>If sampling is enabled, graph2D will automatically determine the amount of points per pixel.
If there are more than 1 point per pixel, not all points will be drawn. Disabling sampling will cause a decrease in performance.</td>
</tr>
<tr>
<td>graphHeight</td>
<td>Number | String</td>
<td>'400px'</td>
<td>This is the height of the graph SVG canvas.
If it is larger than the height of the outer frame, you can drag up and down
the vertical direction as well as the usual horizontal direction.</td>
</tr>
<tr>
<td class="greenField">shaded</td>
<td>Boolean | Object</td>
<td>false</td>
<td>Toggle a shaded area with the default settings.</td>
</tr>
<tr>
<td class="greenField">shaded.enabled</td>
<td>Boolean</td>
<td>false</td>
<td>This toggles the shading.</td>
</tr>
<tr>
<td class="greenField">shaded.orientation</td>
<td>String</td>
<td>'bottom'</td>
<td>This determines if the shaded area is at the bottom or at the top of the curve. The options are 'bottom' or 'top'.</td>
</tr>
<tr>
<td class="greenField">style</td>
<td>String</td>
<td>'line'</td>
<td>This allows the user to define if this should be a linegraph or a barchart. The options are: 'line' or 'bar'.</td>
</tr>
<tr>
<td class="greenField">barChart.width</td>
<td>Number</td>
<td>50</td>
<td>The width of the bars.</td>
</tr>
<tr>
<td class="greenField">barChart.align</td>
<td>String</td>
<td>'center'</td>
<td>The alignment of the bars with regards to the coordinate. The options are 'left', 'right' or 'center'.</td>
</tr>
<tr>
<td class="greenField">catmullRom</td>
<td>Boolean | Object</td>
<td>true</td>
<td>Toggle the interpolation with the default settings. For more customization use the JSON format.</td>
</tr>
<tr>
<td class="greenField">catmullRom.enabled</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the interpolation.</td>
</tr>
<tr>
<td class="greenField">catmullRom.parametrization</td>
<td>String</td>
<td>'centripetal'</td>
<td>Define the type of parametrizaion. <a href="../examples/graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
If catmullRom is disabled, linear interpolation is used.</td>
</tr>
<tr>
<td class="greenField">drawPoints</td>
<td>Boolean | Object</td>
<td>true</td>
<td>Toggle the drawing of the datapoints with the default settings.</td>
</tr>
<tr>
<td class="greenField">drawPoints.enabled</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the datapoints.</td>
</tr>
<tr>
<td class="greenField">drawPoints.size</td>
<td>Number</td>
<td>6</td>
<td>Determine the size at which the data points are drawn.</td>
</tr>
<tr>
<td class="greenField">drawPoints.style</td>
<td>String</td>
<td>'square'</td>
<td>Determine the shape of the data points. The options are 'square' or 'circle'.</td>
</tr>
<tr>
<td>dataAxis.showMinorLabels</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the minor labels on the Y axis.</td>
</tr>
<tr>
<td>dataAxis.showMajorLabels</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the major labels on the Y axis.</td>
</tr>
<tr>
<td>dataAxis.icons</td>
<td>Boolean</td>
<td>false</td>
<td>Toggle the drawing of automatically generated icons the Y axis.</td>
</tr>
<tr>
<td>dataAxis.width</td>
<td>Number | String</td>
<td>'40px'</td>
<td>Set the (minimal) width of the yAxis. The axis will resize to accomodate the labels of the Y values.</td>
</tr>
<tr>
<td>dataAxis.visible</td>
<td>Boolean</td>
<td>true</td>
<td>Show or hide the data axis.</td>
</tr>
<tr>
<td>legend</td>
<td>Boolean</td>
<td>false</td>
<td>Toggle the legend with the default settings.</td>
</tr>
<tr>
<td>legend.enabled</td>
<td>Boolean</td>
<td>false</td>
<td>Toggle the legend.</td>
</tr>
<tr>
<td>legend.icons</td>
<td>Boolean</td>
<td>true</td>
<td>Show automatically generated icons on the legend.</td>
</tr>
<tr>
<td>legend.left.visible</td>
<td>Boolean</td>
<td>true</td>
<td>Both axis, left and right, have a corresponding legend. This toggles the visibility of the legend that is coupled with the left axis.</td>
</tr>
<tr>
<td>legend.left.position</td>
<td>String</td>
<td>'top-left'</td>
<td>Determine the position of the legend coupled to the left axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.</td>
</tr>
<tr>
<td>legend.right.visible</td>
<td>Boolean</td>
<td>true</td>
<td>This toggles the visibility of the legend that is coupled with the right axis.</td>
</tr>
<tr>
<td>legend.right.position</td>
<td>String</td>
<td>'top-right'</td>
<td>Determine the position of the legend coupled to the right axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.</td>
</tr>
</table>
<h3 id="timelineOptions">Timeline Options</h3>
<p>
Graph2d is built upon the framework of the timeline. These options from the timeline can be used with graph2D.
All options are optional.
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>autoResize</td>
<td>boolean</td>
<td>true</td>
<td>If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function <code>redraw()</code>.</td>
</tr>
<tr>
<td>end</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial end date for the axis of the timeline.
If not provided, the latest date present in the items set is taken as
end date.</td>
</tr>
<tr>
<td>height</td>
<td>Number | String</td>
<td>none</td>
<td>The height of the timeline in pixels or as a percentage.
When height is undefined or null, the height of the timeline is automatically
adjusted to fit the contents.
It is possible to set a maximum height using option <code>maxHeight</code>
to prevent the timeline from getting too high in case of automatically
calculated height.
</td>
</tr>
<tr>
<td>margin.axis</td>
<td>Number</td>
<td>20</td>
<td>The minimal margin in pixels between items and the time axis.</td>
</tr>
<tr>
<td>margin.item</td>
<td>Number</td>
<td>10</td>
<td>The minimal margin in pixels between items.</td>
</tr>
<tr>
<td>max</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a maximum Date for the visible range.
It will not be possible to move beyond this maximum.
</td>
</tr>
<tr>
<td>maxHeight</td>
<td>Number | String</td>
<td>none</td>
<td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
</tr>
<tr>
<td>min</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a minimum Date for the visible range.
It will not be possible to move beyond this minimum.
</td>
</tr>
<tr>
<td>minHeight</td>
<td>Number | String</td>
<td>none</td>
<td>Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
</tr>
<tr>
<td>orientation</td>
<td>String</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>
</tr>
<tr>
<td>showCurrentTime</td>
<td>boolean</td>
<td>true</td>
<td>Show a vertical bar at the current time.</td>
</tr>
<tr>
<td>showCustomTime</td>
<td>boolean</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. 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>
<td>showMajorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMajorLabels</code> is <code>false</code>, no major labels
are shown.</td>
</tr>
<tr>
<td>showMinorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMinorLabels</code> is <code>false</code>, no minor labels
are shown. When both <code>showMajorLabels</code> and
<code>showMinorLabels</code> are false, no horizontal axis will be
visible.</td>
</tr>
<tr>
<td>start</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial start date for the axis of the timeline.
If not provided, the earliest date present in the events is taken as start date.</td>
</tr>
<tr>
<td>width</td>
<td>String</td>
<td>'100%'</td>
<td>The width of the timeline in pixels or as a percentage.</td>
</tr>
<tr>
<td>zoomMax</td>
<td>Number</td>
<td>315360000000000</td>
<td>Set a maximum zoom interval for the visible range in milliseconds.
It will not be possible to zoom out further than this maximum.
Default value equals about 10000 years.
</td>
</tr>
<tr>
<td>zoomMin</td>
<td>Number</td>
<td>10</td>
<td>Set a minimum zoom interval for the visible range in milliseconds.
It will not be possible to zoom in further than this minimum.
</td>
</tr>
</table>
<h2 id="Methods">Methods</h2>
<p>
The Graph2d supports the following methods.
</p>
<table>
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>clear([what])</td>
<td>none</td>
<td>
Clear the Graph2d. An object can be passed specifying which sections to clear: items, groups,
and/or options. By Default, items, groups and options are cleared, i.e. <code>what = {items: true, groups: true, options: true}</code>. Example usage:
<pre class="prettyprint lang-js">Graph2d.clear(); // clear items, groups, and options
Graph2d.clear({options: true}); // clear options only
</pre>
</td>
</tr>
<tr>
<td>destroy()</td>
<td>none</td>
<td>Destroy the Graph2d. The Graph2d is removed from memory. all DOM elements and event listeners are cleaned up.
</td>
</tr>
<tr>
<td>getCustomTime()</td>
<td>Date</td>
<td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true.
</td>
</tr>
<tr>
<td>setCustomTime(time)</td>
<td>none</td>
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> is a Date object.
</td>
</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>
<td>on(event, callback)</td>
<td>none</td>
<td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
</tr>
<tr>
<td>off(event, callback)</td>
<td>none</td>
<td>Remove an event listener created before via function <code>on(event, callback)</code>. See section <a href="#Events">Events for more information</a>.</td>
</tr>
<tr>
<td>redraw()</td>
<td>none</td>
<td>Force a redraw of the Graph2d. Can be useful to manually redraw when option autoResize=false.
</td>
</tr>
<tr>
<td>setGroups(groups)</td>
<td>none</td>
<td>Set a data set with groups for the Graph2d.
<code>groups</code> can be an Array with Objects,
a DataSet, or a DataView. For each of the groups, the items of the
Graph2d are filtered on the property <code>group</code>, which
must correspond with the id of the group.
</td>
</tr>
<tr>
<td>setItems(items)</td>
<td>none</td>
<td>Set a data set with items for the Graph2d.
<code>items</code> can be an Array with Objects,
a DataSet, or a DataView.
</td>
</tr>
<tr>
<td>setOptions(options)</td>
<td>none</td>
<td>Set or update options. It is possible to change any option of the Graph2d at any time. You can for example switch orientation on the fly.
</td>
</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>
<h2 id="Events">Events</h2>
<p>
Graph2d fires events when changing the visible window by dragging, when
selecting items, and when dragging the custom time bar.
</p>
<p>
Here an example on how to listen for a <code>rangeChanged</code> event.
</p>
<pre class="prettyprint lang-js">
Graph2d.on('select', function (properties) {
alert('selected items: ' + properties.nodes);
});
</pre>
<p>
A listener can be removed via the function <code>off</code>:
</p>
<pre class="prettyprint lang-js">
function onChange (properties) {
alert('changed!');
}
// add event listener
Graph2d.on('rangechanged', onChange);
// do stuff...
// remove event listener
Graph2d.off('rangechanged', onChange);
</pre>
<p>
The following events are available.
</p>
<table>
<colgroup>
<col style="width: 20%;">
<col style="width: 40%;">
<col style="width: 40%;">
</colgroup>
<tr>
<th>name</th>
<th>Description</th>
<th>Properties</th>
</tr>
<tr>
<td>rangechange</td>
<td>Fired repeatedly when the user is dragging the Graph2d window.
</td>
<td>
<ul>
<li><code>start</code> (Number): timestamp of the current start of the window.</li>
<li><code>end</code> (Number): timestamp of the current end of the window.</li>
</ul>
</td>
</tr>
<tr>
<td>rangechanged</td>
<td>Fired once after the user has dragged the Graph2d window.
</td>
<td>
<ul>
<li><code>start</code> (Number): timestamp of the current start of the window.</li>
<li><code>end</code> (Number): timestamp of the current end of the window.</li>
</ul>
</td>
</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>
<h2 id="Styles">Styles</h2>
<p>
All parts of the Graph2d have a class name and a default css style just like the Timeline.
The styles can be overwritten, which enables full customization of the layout
of the Graph2d.
</p>
<p>
Additionally, Graph2d has 10 preset styles for graphs, which are cycled through when loading groups. These styles can be overwritten
as well, along with defining your own classes to style the graphs! <a href="../examples/graph2d/04_rightAxis.html">Example 4</a> and
<a href="../examples/graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
</p>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data is processed and rendered in the browser.
No data is sent to any server.
</p>
</div>
</body>
</html>

+ 5
- 2
docs/graph3d.html View File

@ -18,8 +18,11 @@
<p> <p>
Graph3d is an interactive visualization chart to draw data in a three dimensional Graph3d is an interactive visualization chart to draw data in a three dimensional
graph. You can freely move and zoom in the graph by dragging and scrolling in the graph. You can freely move and zoom in the graph by dragging and scrolling in the
window.
Graph3d also supports animation of a graph.
window. Graph3d also supports animation of a graph.
</p>
<p>
Graph3d uses <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas">HTML canvas</a>
to render graphs, and can render up to a few thousands of data points smoothly.
</p> </p>
<h2 id="Contents">Contents</h2> <h2 id="Contents">Contents</h2>

+ 6
- 2
docs/index.html View File

@ -53,8 +53,12 @@
A filtered and/or formatted view on a DataSet. A filtered and/or formatted view on a DataSet.
</li> </li>
<li> <li>
<a href="graph.html"><b>Graph</b></a>.
Display a graph or network with nodes and edges.
<a href="network.html"><b>Network</b></a>.
Display a network (force directed graph) with nodes and edges (previously called Graph).
</li>
<li>
<a href="graph2d.html"><b>Graph2d</b></a>.
Plot data on a timeline with lines or barcharts.
</li> </li>
<li> <li>
<a href="graph3d.html"><b>Graph3d</b></a>. <a href="graph3d.html"><b>Graph3d</b></a>.

docs/graph.html → docs/network.html View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>vis.js | graph documentation</title>
<title>vis.js | network documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" /> <link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'> <link href='css/style.css' type='text/css' rel='stylesheet'>
@ -13,29 +13,31 @@
<body onload="prettyPrint();"> <body onload="prettyPrint();">
<div id="container"> <div id="container">
<h1>Graph documentation</h1>
<h1>Network documentation</h1>
<h2 id="Overview">Overview</h2> <h2 id="Overview">Overview</h2>
<p> <p>
Graph is a visualization to display graphs and networks consisting of nodes
Network is a visualization to display networks and networks consisting of nodes
and edges. The visualization is easy to use and supports custom shapes, and edges. The visualization is easy to use and supports custom shapes,
styles, colors, sizes, images, and more. styles, colors, sizes, images, and more.
</p> </p>
<p> <p>
The graph visualization works smooth on any modern browser for up to a
few thousand nodes and edges. To handle a larger amount of nodes, Graph
has <a href="#Clustering">clustering</a> support.
The network visualization works smooth on any modern browser for up to a
few thousand nodes and edges. To handle a larger amount of nodes, Network
has <a href="#Clustering">clustering</a> support. Network uses
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas">HTML canvas</a>
for rendering.
</p> </p>
<p> <p>
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, graph has a special option
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option
that the user can use to explore which settings may be good for you. Use configurePhysics as described in the <u><a href="#PhysicsConfiguration">Physics</a></u> section or by that the user can use to explore which settings may be good for you. Use configurePhysics as described in the <u><a href="#PhysicsConfiguration">Physics</a></u> section or by
<u><a href="../examples/graph/25_physics_configuration.html">example 25</a></u>.
<u><a href="../examples/Network/25_physics_configuration.html">example 25</a></u>.
</p> </p>
<p> <p>
To get started with Graph, install or download the
To get started with Network, install or download the
<a href="http://visjs.org" target="_blank">vis.js</a> library. <a href="http://visjs.org" target="_blank">vis.js</a> library.
</p> </p>
@ -77,8 +79,8 @@
<h2 id="Example">Example</h2> <h2 id="Example">Example</h2>
<p> <p>
Here a basic graph example. Note that unlike the
<a href="timeline.html">Timeline</a>, the Graph does not need the vis.css
Here a basic network example. Note that unlike the
<a href="timeline.html">Timeline</a>, the Network does not need the vis.css
file. file.
</p> </p>
@ -90,14 +92,14 @@
<pre class="prettyprint lang-html">&lt;!doctype html&gt; <pre class="prettyprint lang-html">&lt;!doctype html&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
&lt;title&gt;Graph | Basic usage&lt;/title&gt;
&lt;title&gt;Network | Basic usage&lt;/title&gt;
&lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&gt; &lt;body&gt;
&lt;div id="mygraph"&gt;&lt;/div&gt;
&lt;div id="mynetwork"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt; &lt;script type="text/javascript"&gt;
// create an array with nodes // create an array with nodes
@ -117,8 +119,8 @@
{from: 2, to: 5} {from: 2, to: 5}
]; ];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data= { var data= {
nodes: nodes, nodes: nodes,
edges: edges, edges: edges,
@ -127,7 +129,7 @@
width: '400px', width: '400px',
height: '400px' height: '400px'
}; };
var graph = new vis.Graph(container, data, options);
var network = new vis.Network(container, data, options);
&lt;/script&gt; &lt;/script&gt;
&lt;/body&gt; &lt;/body&gt;
@ -146,13 +148,13 @@
</pre> </pre>
The constructor of the Graph is <code>vis.Graph</code>.
<pre class="prettyprint lang-js">var graph = new vis.Graph(container, data, options);</pre>
The constructor of the Network is <code>vis.Network</code>.
<pre class="prettyprint lang-js">var network = new vis.Network(container, data, options);</pre>
The constructor accepts three parameters: The constructor accepts three parameters:
<ul> <ul>
<li> <li>
<code>container</code> is the DOM element in which to create the graph.
<code>container</code> is the DOM element in which to create the network.
</li> </li>
<li> <li>
<code>data</code> is an Object containing properties <code>nodes</code> and <code>data</code> is an Object containing properties <code>nodes</code> and
@ -173,7 +175,7 @@ The constructor accepts three parameters:
<h2 id="Data_format">Data format</h2> <h2 id="Data_format">Data format</h2>
<p> <p>
The <code>data</code> parameter of the Graph constructor is an object
The <code>data</code> parameter of the Network constructor is an object
which can contain different types of data. which can contain different types of data.
The following properties are supported in the <code>data</code> object: The following properties are supported in the <code>data</code> object:
</p> </p>
@ -207,7 +209,7 @@ var data = {
<li> <li>
<span style="font-weight: bold;">A property <code>options</code></span>, <span style="font-weight: bold;">A property <code>options</code></span>,
containing an object with global options. containing an object with global options.
Options can be provided as third parameter in the graph constructor
Options can be provided as third parameter in the network constructor
as well. Section <a href="#Configuration_Options">Configuration Options</a> as well. Section <a href="#Configuration_Options">Configuration Options</a>
describes the available options. describes the available options.
@ -246,7 +248,7 @@ nodes.add([
// ... more nodes // ... more nodes
]); ]);
</pre> </pre>
When using a DataSet, the graph is automatically updating to changes in the DataSet.
When using a DataSet, the network is automatically updating to changes in the DataSet.
<p> <p>
Nodes support the following properties: Nodes support the following properties:
@ -514,7 +516,7 @@ edges.add([
// ... more edges // ... more edges
]); ]);
</pre> </pre>
When using a DataSet, the graph is automatically updating to changes in the DataSet.
When using a DataSet, the network is automatically updating to changes in the DataSet.
<p> <p>
Edges support the following properties: Edges support the following properties:
@ -527,45 +529,45 @@ When using a DataSet, the graph is automatically updating to changes in the Data
<th>Required</th> <th>Required</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>arrowScaleFactor</td>
<td>Number</td>
<td>no</td>
<td>If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1.</td>
</tr>
<tr>
<td>color</td>
<td>String | Object</td>
<td>no</td>
<td>Color for the edge.</td>
</tr>
<tr>
<td>arrowScaleFactor</td>
<td>Number</td>
<td>no</td>
<td>If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1.</td>
</tr>
<tr>
<td>color</td>
<td>String | Object</td>
<td>no</td>
<td>Color for the edge.</td>
</tr>
<tr>
<td>color.color</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when not selected.</td>
</tr>
<tr>
<td>color.color</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when not selected.</td>
</tr>
<tr>
<td>color.highlight</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when selected.</td>
</tr>
<tr>
<td>color.highlight</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when selected.</td>
</tr>
<tr>
<td>color.hover</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when the edge is hovered over and the hover option is enabled.</td>
</tr>
<tr>
<td>hoverWidth</td>
<td>Number</td>
<td>1.5</td>
<td>This determines the thickness of the edge if it is hovered over. This will only manifest when the hover option is enabled.</td>
</tr>
<tr>
<td>color.hover</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when the edge is hovered over and the hover option is enabled.</td>
</tr>
<tr>
<td>hoverWidth</td>
<td>Number</td>
<td>1.5</td>
<td>This determines the thickness of the edge if it is hovered over. This will only manifest when the hover option is enabled.</td>
</tr>
<tr> <tr>
<td>dash</td> <td>dash</td>
@ -714,7 +716,7 @@ When using a DataSet, the graph is automatically updating to changes in the Data
<h3 id="DOT_language">DOT language</h3> <h3 id="DOT_language">DOT language</h3>
<p> <p>
Graph supports data in the
Network supports data in the
<a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>. <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
To provide data in the DOT language, the <code>data</code> object must contain To provide data in the DOT language, the <code>data</code> object must contain
a property <code>dot</code> with a String containing the data. a property <code>dot</code> with a String containing the data.
@ -727,11 +729,11 @@ When using a DataSet, the graph is automatically updating to changes in the Data
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
// provide data in the DOT language // provide data in the DOT language
var data = { var data = {
dot: 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
dot: 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
}; };
// create a graph
var graph = new vis.Graph(container, data);
// create a network
var network = new vis.Network(container, data);
</pre> </pre>
@ -739,7 +741,7 @@ var graph = new vis.Graph(container, data);
<h2 id="Configuration_options">Configuration options</h2> <h2 id="Configuration_options">Configuration options</h2>
<p> <p>
Options can be used to customize the graph. Options are defined as a JSON object.
Options can be used to customize the network. Options are defined as a JSON object.
All options are optional. All options are optional.
</p> </p>
@ -780,7 +782,7 @@ var options = {
<td>Boolean</td> <td>Boolean</td>
<td>false</td> <td>false</td>
<td> <td>
Enabling this setting will create a physics configuration div above the graph. You can use this to fine tune the physics system to suit your needs.
Enabling this setting will create a physics configuration div above the network. You can use this to fine tune the physics system to suit your needs.
Because of the many possible configurations, there is not a one-size-fits-all setting. By using this tool, you can adapt the physics to your dataset. Because of the many possible configurations, there is not a one-size-fits-all setting. By using this tool, you can adapt the physics to your dataset.
</td> </td>
</tr> </tr>
@ -818,7 +820,7 @@ var options = {
<td>false</td> <td>false</td>
<td> <td>
With the advent of the storePosition() function, the positions of the nodes can be saved after they are stabilized. The smoothCurves require support nodes and those positions are not stored. In order With the advent of the storePosition() function, the positions of the nodes can be saved after they are stabilized. The smoothCurves require support nodes and those positions are not stored. In order
to speed up the initialization of the graph by using storePosition() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with
to speed up the initialization of the network by using storePosition() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with
an x and y position in place during the stabilization. That way only the support nodes for the smooth curves have to stabilize, greatly speeding up the stabilization process with cached positions. an x and y position in place during the stabilization. That way only the support nodes for the smooth curves have to stabilize, greatly speeding up the stabilization process with cached positions.
</td> </td>
</tr> </tr>
@ -838,7 +840,7 @@ var options = {
<td>height</td> <td>height</td>
<td>String</td> <td>String</td>
<td>"400px"</td> <td>"400px"</td>
<td>The height of the graph in pixels or as a percentage.</td>
<td>The height of the network in pixels or as a percentage.</td>
</tr> </tr>
<tr> <tr>
@ -853,15 +855,15 @@ var options = {
<td>Object</td> <td>Object</td>
<td>none</td> <td>none</td>
<td> <td>
Configuration options for shortcuts keys. Sortcut keys are turned off by default. See section <a href="#Keyboard_navigation">Keyboard navigation</a> for an overview of the available options.
Configuration options for shortcuts keys. Shortcut keys are turned off by default. See section <a href="#Keyboard_navigation">Keyboard navigation</a> for an overview of the available options.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>dragGraph</td>
<td>dragNetwork</td>
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td> <td>
Toggle if the graph can be dragged. This will not affect the dragging of nodes.
Toggle if the network can be dragged. This will not affect the dragging of nodes.
</td> </td>
</tr> </tr>
<tr> <tr>
@ -869,7 +871,7 @@ var options = {
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td> <td>
Toggle if the nodes can be dragged. This will not affect the dragging of the graph.
Toggle if the nodes can be dragged. This will not affect the dragging of the network.
</td> </td>
</tr> </tr>
@ -902,7 +904,7 @@ var options = {
<td>selectable</td> <td>selectable</td>
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td>If true, nodes in the graph can be selected by clicking them.
<td>If true, nodes in the network can be selected by clicking them.
Long press can be used to select multiple nodes.</td> Long press can be used to select multiple nodes.</td>
</tr> </tr>
@ -910,7 +912,7 @@ var options = {
<td>stabilize</td> <td>stabilize</td>
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td>If true, the graph is stabilized before displaying it. If false,
<td>If true, the network is stabilized before displaying it. If false,
the nodes move to a stabe position visibly in an animated way.</td> the nodes move to a stabe position visibly in an animated way.</td>
</tr> </tr>
@ -919,21 +921,21 @@ var options = {
<td>Number</td> <td>Number</td>
<td>1000</td> <td>1000</td>
<td>If stabilize is set to true, this number is the (maximum) amount of physics steps the stabilization process takes <td>If stabilize is set to true, this number is the (maximum) amount of physics steps the stabilization process takes
before showing the result. If your simulation takes too long to stabilize, this number can be reduced. On the other hand, if your graph is not stabilized after loading, this number can be increased.</td>
before showing the result. If your simulation takes too long to stabilize, this number can be reduced. On the other hand, if your network is not stabilized after loading, this number can be increased.</td>
</tr> </tr>
<tr> <tr>
<td>width</td> <td>width</td>
<td>String</td> <td>String</td>
<td>"400px"</td> <td>"400px"</td>
<td>The width of the graph in pixels or as a percentage.</td>
<td>The width of the network in pixels or as a percentage.</td>
</tr> </tr>
<tr> <tr>
<td>zoomable</td> <td>zoomable</td>
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td> <td>
Toggle if the graph can be zoomed.
Toggle if the network can be zoomed.
</td> </td>
</tr> </tr>
@ -943,7 +945,7 @@ var options = {
<h3 id="Nodes_configuration">Nodes configuration</h3> <h3 id="Nodes_configuration">Nodes configuration</h3>
<p> <p>
Nodes can be configured with different styles and shapes. To configure nodes, provide an object named <code>nodes</code> in the <code>options</code> for the Graph.
Nodes can be configured with different styles and shapes. To configure nodes, provide an object named <code>nodes</code> in the <code>options</code> for the Network.
</p> </p>
<p> <p>
@ -969,7 +971,7 @@ var options = {
<p> <p>
The following options are available for nodes. These options must be created The following options are available for nodes. These options must be created
inside an object <code>nodes</code> in the graphs options object.</p>
inside an object <code>nodes</code> in the networks options object.</p>
<table> <table>
<tr> <tr>
@ -1121,7 +1123,7 @@ var options = {
<h3 id="Edges_configuration">Edges configuration</h3> <h3 id="Edges_configuration">Edges configuration</h3>
<p> <p>
Edges can be configured with different length and styling. To configure edges, provide an object named <code>edges</code> in the <code>options</code> for the Graph.
Edges can be configured with different length and styling. To configure edges, provide an object named <code>edges</code> in the <code>options</code> for the Network.
</p> </p>
<p> <p>
@ -1139,7 +1141,7 @@ var options = {
<p> <p>
The following options are available for edges. These options must be created The following options are available for edges. These options must be created
inside an object <code>edges</code> in the graphs options object.
inside an object <code>edges</code> in the networks options object.
</p> </p>
<table> <table>
@ -1149,32 +1151,32 @@ var options = {
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>arrowScaleFactor</td>
<td>Number</td>
<td>1</td>
<td>If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1.</td>
</tr>
<tr>
<td>color</td>
<td>String | Object</td>
<td>Object</td>
<td>Colors of the edge. This object contains both colors for the selected and unselected state.</td>
</tr>
<tr>
<td>arrowScaleFactor</td>
<td>Number</td>
<td>1</td>
<td>If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1.</td>
</tr>
<tr>
<td>color</td>
<td>String | Object</td>
<td>Object</td>
<td>Colors of the edge. This object contains both colors for the selected and unselected state.</td>
</tr>
<tr>
<td>color.color</td>
<td>String</td>
<td>"#848484"</td>
<td>Color of the edge when not selected.</td>
</tr>
<tr>
<td>color.color</td>
<td>String</td>
<td>"#848484"</td>
<td>Color of the edge when not selected.</td>
</tr>
<tr>
<td>color.highlight</td>
<td>String</td>
<td>"#848484"</td>
<td>Color of the edge when selected.</td>
</tr>
<tr>
<td>color.highlight</td>
<td>String</td>
<td>"#848484"</td>
<td>Color of the edge when selected.</td>
</tr>
<tr> <tr>
<td>dash</td> <td>dash</td>
@ -1214,12 +1216,12 @@ var options = {
<td>Default length of a gap in pixels on a dashed line. <td>Default length of a gap in pixels on a dashed line.
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>physics.[method].springLength</td>
<td>The resting length of the edge when modeled as a spring. By default the springLength determined by the physics is used. By using this setting you can make certain edges have different resting lengths.</td>
</tr>
<tr>
<td>length</td>
<td>number</td>
<td>physics.[method].springLength</td>
<td>The resting length of the edge when modeled as a spring. By default the springLength determined by the physics is used. By using this setting you can make certain edges have different resting lengths.</td>
</tr>
<tr> <tr>
<td>style</td> <td>style</td>
@ -1235,6 +1237,12 @@ var options = {
<td>1</td> <td>1</td>
<td>The default width of a edge.</td> <td>The default width of a edge.</td>
</tr> </tr>
<tr>
<td>widthSelectionMultiplier</td>
<td>Number</td>
<td>2</td>
<td>Determines the thickness scaling of an selected edge. This is applied when an edge, or a node connected to it, is selected.</td>
</tr>
</table> </table>
<h3 id="Groups_configuration">Groups configuration</h3> <h3 id="Groups_configuration">Groups configuration</h3>
@ -1378,9 +1386,10 @@ var nodes = [
The original simulation method was based on particel physics with a repulsion field (potential) around each node, 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. 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. 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. If you want to customize the physics system easily, you can use the configurePhysics option.
If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters. If you want to customize the physics system easily, you can use the configurePhysics option. <br/>
When using the hierarchical display option, hierarchicalRepulsion is automatically used as the physics solver. Similarly, if you use the hierarchicalRepulsion physics option, hierarchical display is automatically turned on with default settings.
<p class="important_note">Note: if the behaviour of your graph is not the way you want it, use configurePhysics as described <u><a href="#PhysicsConfiguration">below</a></u> or by <u><a href="../examples/graph/25_physics_configuration.html">example 25</a></u>.</p>
<p class="important_note">Note: if the behaviour of your network is not the way you want it, use configurePhysics as described <u><a href="#PhysicsConfiguration">below</a></u> or by <u><a href="../examples/Network/25_physics_configuration.html">example 25</a></u>.</p>
</p> </p>
<pre class="prettyprint"> <pre class="prettyprint">
// These variables must be defined in an options object named physics. // These variables must be defined in an options object named physics.
@ -1402,6 +1411,13 @@ var options = {
nodeDistance: 100, nodeDistance: 100,
damping: 0.09 damping: 0.09
}, },
hierarchicalRepulsion: {
centralGravity: 0.5,
springLength: 150,
springConstant: 0.01,
nodeDistance: 60,
damping: 0.09
}
} }
</pre> </pre>
<h5>barnesHut:</h5> <h5>barnesHut:</h5>
@ -1465,6 +1481,12 @@ var options = {
<td>0.1</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> <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>
<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> <tr>
<td>springLength</td> <td>springLength</td>
<td>Number</td> <td>Number</td>
@ -1472,17 +1494,55 @@ var options = {
<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. <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> To greatly reduce the edge length, the gravitationalConstant has to be reduced as well.</td>
</tr> </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>hierarchicalRepulsion:</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.5</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> <tr>
<td>nodeDistance</td> <td>nodeDistance</td>
<td>Number</td> <td>Number</td>
<td>100</td>
<td>60</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> <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>
<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> <tr>
<td>springConstant</td> <td>springConstant</td>
<td>Number</td> <td>Number</td>
<td>0.05</td>
<td>0.01</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> <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>
<tr> <tr>
@ -1493,9 +1553,9 @@ var options = {
</tr> </tr>
</table> </table>
<h4 id="PhysicsConfiguration">Configuration:</h4> <h4 id="PhysicsConfiguration">Configuration:</h4>
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, graph has a special option
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option
that the user can use to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found that the user can use to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
settings you are happy with, you can supply them to graph using the physics options as described above.
settings you are happy with, you can supply them to network using the physics options as described above.
On start, the default settings will be loaded. Keep in mind that selecting the hierarchical simulation mode <b>disables</b> smooth curves. These will not be enabled again afterwards. On start, the default settings will be loaded. Keep in mind that selecting the hierarchical simulation mode <b>disables</b> smooth curves. These will not be enabled again afterwards.
<pre class="prettyprint"> <pre class="prettyprint">
@ -1505,9 +1565,9 @@ var options = {
</pre> </pre>
<h3 id="Data_manipulation">Data manipulation</h3> <h3 id="Data_manipulation">Data manipulation</h3>
<p> <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.
By using the data manipulation feature of the network 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 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>,
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/Network/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. To correctly display the manipulation icons, the <b>vis.css</b> file must be included. two functions have been injected into the add and edit functionality. This is described in more detail in the next subsection. To correctly display the manipulation icons, the <b>vis.css</b> file must be included.
The user is free to alter or overload the CSS classes but without them the navigation icons are not visible. The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
</p> </p>
@ -1550,7 +1610,7 @@ var options: {
<h4 id="Data_manipulation_custom">Data manipulation: custom functionality</h4> <h4 id="Data_manipulation_custom">Data manipulation: custom functionality</h4>
<p> <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. 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
If the callback is NOT called, nothing happens. <a href="../examples/Network/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 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 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 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
@ -1593,6 +1653,16 @@ var options: {
// all fields normally accepted by a node can be used. // all fields normally accepted by a node can be used.
callback(newData); // call the callback with the new data to edit the node. callback(newData); // call the callback with the new data to edit the node.
} }
onEditEdge: function(data,callback) {
/** data = {id: edgeID,
* from: nodeId1,
* to: nodeId2,
* };
*/
var newData = {..}; // alter the data as you want, except for the ID.
// all fields normally accepted by an edge can be used.
callback(newData); // call the callback with the new data to edit the edge.
}
onConnect: function(data,callback) { onConnect: function(data,callback) {
// data = {from: nodeId1, to: nodeId2}; // data = {from: nodeId1, to: nodeId2};
var newData = {..}; // check or alter data as you see fit. var newData = {..}; // check or alter data as you see fit.
@ -1612,12 +1682,12 @@ var options: {
An code snippet from example 21 is shown below. An code snippet from example 21 is shown below.
</p> </p>
<pre class="prettyprint"> <pre class="prettyprint">
graph.on("resize", function(params) {console.log(params.width,params.height)});
network.on("resize", function(params) {console.log(params.width,params.height)});
</pre> </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 network now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without
sacrificing performance. When loading a large dataset, the nodes are clustered initially (this may take a small while) to have a sacrificing performance. When loading a large dataset, the nodes are clustered initially (this may take a small while) to have a
responsive visualization to work with. The clustering is both outside-in and inside-out. Outside-in means that nodes with only one responsive visualization to work with. The clustering is both outside-in and inside-out. Outside-in means that nodes with only one
connection will be contained, or clustered, in the node it is connected to. Inside-out clustering first determines which nodes are hubs. connection will be contained, or clustered, in the node it is connected to. Inside-out clustering first determines which nodes are hubs.
@ -1629,7 +1699,7 @@ graph.on("resize", function(params) {console.log(params.width,params.height)});
to calculate the required forces. The contained nodes are removed from the global nodes index, greatly speeding up the system. to calculate the required forces. The contained nodes are removed from the global nodes index, greatly speeding up the system.
<br /> <br />
<br /> <br />
The clustering has the following user-configurable settings. The default values have been tested with the Graph examples and work well.
The clustering has the following user-configurable settings. The default values have been tested with the Network examples and work well.
The default state for clustering is <b>off</b>. The default state for clustering is <b>off</b>.
</p> </p>
@ -1792,17 +1862,17 @@ var options: {
<td>clusterLevelDifference</td> <td>clusterLevelDifference</td>
<td>Number</td> <td>Number</td>
<td>2</td> <td>2</td>
<td>At every clustering session, Graph will check if the difference between cluster levels is
<td>At every clustering session, Network will check if the difference between cluster levels is
acceptable. When a cluster is formed when zooming out, that is one cluster level. 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 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
If the highest level of your network 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> have clustered only once will join their neighbour with the lowest cluster level.</td>
</tr> </tr>
</table> </table>
<h3 id="Navigation_controls">Navigation controls</h3> <h3 id="Navigation_controls">Navigation controls</h3>
<p> <p>
Graph has a menu with navigation controls, which is disabled by default.
Network has a menu with navigation controls, which is disabled by default.
It can be configured with the following settings. To correctly display the navigation icons, the <b>vis.css</b> file must be included. It can be configured with the following settings. To correctly display the navigation icons, the <b>vis.css</b> file must be included.
The user is free to alter or overload the CSS classes but without them the navigation icons are not visible. The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
</p> </p>
@ -1817,8 +1887,8 @@ var options: {
<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 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 network can be navigated using shortcut keys.
The default state for the keyboard navigation is <b>off</b>. The predefined keys can be found in the example <a href="../examples/Network/20_navigation.html">20_navigation.html</a>.
</p> </p>
<pre class="prettyprint"> <pre class="prettyprint">
@ -1871,9 +1941,9 @@ var options: {
<h3 id="Hierarchical_layout">Hierarchical layout</h3> <h3 id="Hierarchical_layout">Hierarchical layout</h3>
<p> <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.
The network 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 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>.
is shown in <a href="../examples/Network/23_hierarchical_layout.html">example 23</a> and the user-defined method is shown in <a href="../examples/Network/24_hierarchical_layout_userdefined.html">example 24</a>.
This layout method does not support smooth curves or clustering. It automatically turns these features off. This layout method does not support smooth curves or clustering. It automatically turns these features off.
</p> </p>
@ -1933,7 +2003,7 @@ var options: {
<td>direction</td> <td>direction</td>
<td>String</td> <td>String</td>
<td>UD</td> <td>UD</td>
<td>This defines the direction the graph is drawn in. The supported directions are: Up-Down (UD), Down-Up (DU), Left-Right (LR) and Right-Left (RL).
<td>This defines the direction the network is drawn in. The supported directions are: Up-Down (UD), Down-Up (DU), Left-Right (LR) and Right-Left (RL).
These need to be supplied by the acronyms in parentheses.</td> These need to be supplied by the acronyms in parentheses.</td>
</tr> </tr>
</table> </table>
@ -1951,10 +2021,12 @@ var options: {
link:"Add Link", link:"Add Link",
del:"Delete selected", del:"Delete selected",
editNode:"Edit Node", editNode:"Edit Node",
editEdge:"Edit Edge",
back:"Back", back:"Back",
addDescription:"Click in an empty space to place a new node.", addDescription:"Click in an empty space to place a new node.",
linkDescription:"Click on a node and drag the edge to another linkDescription:"Click on a node and drag the edge to another
node to connect them.", node to connect them.",
editEdgeDescription:"Click on either one of the control points and drag them to another node to connect to it.".
addError:"The function for add does not support two arguments addError:"The function for add does not support two arguments
(data,callback).", (data,callback).",
linkError:"The function for connect does not support two arguments linkError:"The function for connect does not support two arguments
@ -2056,7 +2128,7 @@ var options: {
<h2 id="Methods">Methods</h2> <h2 id="Methods">Methods</h2>
<p> <p>
Graph supports the following methods.
Network supports the following methods.
</p> </p>
<table> <table>
@ -2085,19 +2157,19 @@ var options: {
<td>storePosition()</td> <td>storePosition()</td>
<td>none</td> <td>none</td>
<td>This will put the X and Y positions of all nodes in the dataset. It will also include allowedToMoveX and allowedToMoveY with the correct values. <td>This will put the X and Y positions of all nodes in the dataset. It will also include allowedToMoveX and allowedToMoveY with the correct values.
You can use this to stablize your graph once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
You can use this to stablize your network once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>DOMtoCanvas(pos)</td> <td>DOMtoCanvas(pos)</td>
<td>object</td> <td>object</td>
<td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the graph container.
<td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the network container.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>canvasToDOM(pos)</td> <td>canvasToDOM(pos)</td>
<td>object</td> <td>object</td>
<td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the graph container.
<td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the network container.
</td> </td>
</tr> </tr>
<tr> <tr>
@ -2115,7 +2187,7 @@ var options: {
<tr> <tr>
<td>redraw()</td> <td>redraw()</td>
<td>none</td> <td>none</td>
<td>Redraw the graph. Useful when the layout of the webpage changed.</td>
<td>Redraw the network. Useful when the layout of the webpage changed.</td>
</tr> </tr>
<tr> <tr>
@ -2132,21 +2204,41 @@ var options: {
<tr> <tr>
<td>setOptions(options)</td> <td>setOptions(options)</td>
<td>none</td> <td>none</td>
<td>Set options for the graph. The available options are described in
<td>Set options for the network. The available options are described in
the section <a href="#Configuration_options">Configuration Options</a>. the section <a href="#Configuration_options">Configuration Options</a>.
</td> </td>
</tr> </tr>
<tr>
<td>selectNodes(selection, [highlightEdges])</td>
<td>none</td>
<td>Select nodes.
<code>selection</code> is an array with ids of nodes to be selected.
The array <code>selection</code> can contain zero or multiple ids.
Example usage: <code>network.selectNodes([3, 5]);</code> will select
nodes with id 3 and 5. The highlisghEdges boolean can be used to automatically select the edges connected to the node.
</td>
</tr>
<tr>
<td>selectEdges(selection)</td>
<td>none</td>
<td>Select Edges.
<code>selection</code> is an array with ids of edges to be selected.
The array <code>selection</code> can contain zero or multiple ids.
Example usage: <code>network.selectEdges([3, 5]);</code> will select
edges with id 3 and 5.
</td>
</tr>
<tr> <tr>
<td>setSelection(selection)</td> <td>setSelection(selection)</td>
<td>none</td> <td>none</td>
<td>Select nodes.
<code>selection</code> is an array with ids of nodes to be selected.
The array <code>selection</code> can contain zero or multiple ids.
Example usage: <code>graph.setSelection([3, 5]);</code> will select
nodes with id 3 and 5.
<td>Select nodes [deprecated].
<code>selection</code> is an array with ids of nodes to be selected.
The array <code>selection</code> can contain zero or multiple ids.
Example usage: <code>network.setSelection([3, 5]);</code> will select
nodes with id 3 and 5.
</td> </td>
</tr>
</tr>
<tr> <tr>
<td>setSize(width, height)</td> <td>setSize(width, height)</td>
@ -2159,14 +2251,14 @@ var options: {
<tr> <tr>
<td>zoomExtent()</td> <td>zoomExtent()</td>
<td>none</td> <td>none</td>
<td>Scales the graph so all the nodes are in center view.</td>
<td>Scales the network so all the nodes are in center view.</td>
</tr> </tr>
</table> </table>
<h2 id="Events">Events</h2> <h2 id="Events">Events</h2>
<p> <p>
Graph fires events after one or multiple nodes are selected or deselected.
Network fires events after one or multiple nodes are selected or deselected.
The event can be catched by creating a listener. The event can be catched by creating a listener.
</p> </p>
@ -2175,7 +2267,7 @@ var options: {
</p> </p>
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
graph.on('select', function (properties) {
network.on('select', function (properties) {
alert('selected nodes: ' + properties.nodes); alert('selected nodes: ' + properties.nodes);
}); });
</pre> </pre>
@ -2190,12 +2282,12 @@ function onSelect (properties) {
} }
// add event listener // add event listener
graph.on('select', onSelect);
network.on('select', onSelect);
// do stuff... // do stuff...
// remove event listener // remove event listener
graph.off('select', onSelect);
network.off('select', onSelect);
</pre> </pre>
@ -2274,7 +2366,7 @@ graph.off('select', onSelect);
</tr> </tr>
<tr> <tr>
<td>stabilized</td> <td>stabilized</td>
<td>Fired when the graph has been stabilized after initialization. This event can be used to trigger the .storePosition() function after stabilization.</td>
<td>Fired when the network has been stabilized after initialization. This event can be used to trigger the .storePosition() function after stabilization.</td>
<td> <td>
<ul> <ul>
<li><code>iterations</code>: number of iterations used to stabilize</li> <li><code>iterations</code>: number of iterations used to stabilize</li>
@ -2283,14 +2375,14 @@ graph.off('select', onSelect);
</tr> </tr>
<tr> <tr>
<td>viewChanged</td> <td>viewChanged</td>
<td>Fired when the view has changed. This is when the graph has moved or zoomed.</td>
<td>Fired when the view has changed. This is when the network has moved or zoomed.</td>
<td> <td>
none none
</td> </td>
</tr> </tr>
<tr> <tr>
<td>zoom</td> <td>zoom</td>
<td>Fired when the graph has zoomed. This event can be used to trigger the .storePosition() function after stabilization.</td>
<td>Fired when the network has zoomed. This event can be used to trigger the .storePosition() function after stabilization.</td>
<td> <td>
<ul> <ul>
<li><code>direction: </code> "+" or "-" </li> <li><code>direction: </code> "+" or "-" </li>

+ 268
- 235
docs/timeline.html View File

@ -23,7 +23,10 @@
The time scale on the axis is adjusted automatically, and supports scales ranging The time scale on the axis is adjusted automatically, and supports scales ranging
from milliseconds to years. from milliseconds to years.
</p> </p>
<p>
Timeline uses regular HTML DOM to render the timeline and items put on the
timeline. This allows for flexible customization using css styling.
</p>
<h2 id="Contents">Contents</h2> <h2 id="Contents">Contents</h2>
<ul> <ul>
@ -68,16 +71,23 @@
&lt;div id="visualization"&gt;&lt;/div&gt; &lt;div id="visualization"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt; &lt;script type="text/javascript"&gt;
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var items = [
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{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'}
];
]);
// Configuration for the Timeline
var options = {}; var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options); var timeline = new vis.Timeline(container, items, options);
&lt;/script&gt; &lt;/script&gt;
&lt;/body&gt; &lt;/body&gt;
@ -104,7 +114,7 @@ The constructor of the Timeline is vis.Timeline
The constructor accepts three parameters: The constructor accepts three parameters:
<ul> <ul>
<li> <li>
<code>container</code> is the DOM element in which to create the graph.
<code>container</code> is the DOM element in which to create the timeline.
</li> </li>
<li> <li>
<code>items</code> is an Array containing items. The properties of an <code>items</code> is an Array containing items. The properties of an
@ -164,18 +174,27 @@ var items = [
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr> <tr>
<td>id</td>
<td>String | Number</td>
<td>className</td>
<td>String</td>
<td>no</td> <td>no</td>
<td>An id for the item. Using an id is not required but highly
recommended. An id is needed when dynamically adding, updating,
and removing items in a DataSet.</td>
<td>This field is optional. A className can be used to give items
an individual css style. For example, when an item has className
'red', one can define a css style like:
<pre class="prettyprint lang-css">
.vis.timeline .red {
color: white;
background-color: red;
border-color: darkred;
}</pre>
More details on how to style items can be found in the section
<a href="#Styles">Styles</a>.
</td>
</tr> </tr>
<tr> <tr>
<td>start</td>
<td>Date</td>
<td>content</td>
<td>String</td>
<td>yes</td> <td>yes</td>
<td>The start date of the item, for example <code>new Date(2010,09,23)</code>.</td>
<td>The contents of the item. This can be plain text or html code.</td>
</tr> </tr>
<tr> <tr>
<td>end</td> <td>end</td>
@ -185,20 +204,6 @@ var items = [
If end date is provided, the item is displayed as a range. If end date is provided, the item is displayed as a range.
If not, the item is displayed as a box.</td> If not, the item is displayed as a box.</td>
</tr> </tr>
<tr>
<td>content</td>
<td>String</td>
<td>yes</td>
<td>The contents of the item. This can be plain text or html code.</td>
</tr>
<tr>
<td>type</td>
<td>String</td>
<td>'box'</td>
<td>The type of the item. Can be 'box' (default), 'point', 'range', or 'rangeoverflow'.
Types 'box' and 'point' need a start date, and types 'range' and 'rangeoverflow' need both a start and end date. Types 'range' and rangeoverflow are equal, except that overflowing text in 'range' is hidden, while visible in 'rangeoverflow'.
</td>
</tr>
<tr> <tr>
<td>group</td> <td>group</td>
<td>any type</td> <td>any type</td>
@ -211,20 +216,33 @@ var items = [
</td> </td>
</tr> </tr>
<tr> <tr>
<td>className</td>
<td>String</td>
<td>id</td>
<td>String | Number</td>
<td>no</td> <td>no</td>
<td>This field is optional. A className can be used to give items
an individual css style. For example, when an item has className
'red', one can define a css style like:
<pre class="prettyprint lang-css">
.vis.timeline .red {
color: white;
background-color: red;
border-color: darkred;
}</pre>
More details on how to style items can be found in the section
<a href="#Styles">Styles</a>.
<td>An id for the item. Using an id is not required but highly
recommended. An id is needed when dynamically adding, updating,
and removing items in a DataSet.</td>
</tr>
<tr>
<td>start</td>
<td>Date</td>
<td>yes</td>
<td>The start date of the item, for example <code>new Date(2010,9,23)</code>.</td>
</tr>
<tr>
<td>title</td>
<td>String</td>
<td>none</td>
<td>Add a title for the item, displayed when holding the mouse on the item.
The title can only contain plain text.
</td>
</tr>
<tr>
<td>type</td>
<td>String</td>
<td>'box'</td>
<td>The type of the item. Can be 'box' (default), 'point', or 'range'.
Types 'box' and 'point' need a start date, and type 'range' needs both a start and end date.
</td> </td>
</tr> </tr>
</table> </table>
@ -266,20 +284,6 @@ var groups = [
<th>Required</th> <th>Required</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>id</td>
<td>String | Number</td>
<td>yes</td>
<td>An id for the group. The group will display all items having a
property <code>group</code> which matches the <code>id</code>
of the group.</td>
</tr>
<tr>
<td>content</td>
<td>String</td>
<td>yes</td>
<td>The contents of the group. This can be plain text or html code.</td>
</tr>
<tr> <tr>
<td>className</td> <td>className</td>
<td>String</td> <td>String</td>
@ -296,6 +300,28 @@ var groups = [
<a href="#Styles">Styles</a>. <a href="#Styles">Styles</a>.
</td> </td>
</tr> </tr>
<tr>
<td>content</td>
<td>String</td>
<td>yes</td>
<td>The contents of the group. This can be plain text or html code.</td>
</tr>
<tr>
<td>id</td>
<td>String | Number</td>
<td>yes</td>
<td>An id for the group. The group will display all items having a
property <code>group</code> which matches the <code>id</code>
of the group.</td>
</tr>
<tr>
<td>title</td>
<td>String</td>
<td>none</td>
<td>A title for the group, displayed when holding the mouse the groups label.
The title can only contain plain text.
</td>
</tr>
</table> </table>
@ -323,132 +349,132 @@ var options = {
<table> <table>
<tr> <tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr> </tr>
<tr> <tr>
<td>align</td>
<td>String</td>
<td>"center"</td>
<td>Alignment of items with type 'box'. Available values are
'center' (default), 'left', or 'right').</td>
<td>align</td>
<td>String</td>
<td>"center"</td>
<td>Alignment of items with type 'box'. Available values are
'center' (default), 'left', or 'right').</td>
</tr> </tr>
<tr> <tr>
<td>autoResize</td>
<td>boolean</td>
<td>true</td>
<td>If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function <code>repaint()</code>.</td>
<td>autoResize</td>
<td>boolean</td>
<td>true</td>
<td>If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function <code>redraw()</code>.</td>
</tr> </tr>
<tr> <tr>
<td>editable</td>
<td>Boolean | Object</td>
<td>false</td>
<td>If true, the items in the timeline can be manipulated. 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>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.
</td>
<td>editable</td>
<td>Boolean | Object</td>
<td>false</td>
<td>If true, the items in the timeline can be manipulated. 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>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.
</td>
</tr> </tr>
<tr> <tr>
<td>editable.add</td>
<td>Boolean</td>
<td>false</td>
<td>If true, new items can be created by double tapping an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
<td>editable.add</td>
<td>Boolean</td>
<td>false</td>
<td>If true, new items can be created by double tapping an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr> </tr>
<tr> <tr>
<td>editable.remove</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be deleted by first selecting them, and then clicking the delete button on the top right of the item. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
<td>editable.remove</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be deleted by first selecting them, and then clicking the delete button on the top right of the item. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr> </tr>
<tr> <tr>
<td>editable.updateGroup</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be dragged from one group to another. Only applicable when the Timeline has groups. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
<td>editable.updateGroup</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be dragged from one group to another. Only applicable when the Timeline has groups. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr> </tr>
<tr> <tr>
<td>editable.updateTime</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be dragged to another moment in time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
<td>editable.updateTime</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be dragged to another moment in time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr> </tr>
<tr> <tr>
<td>end</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial end date for the axis of the timeline.
If not provided, the latest date present in the items set is taken as
end date.</td>
<td>end</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial end date for the axis of the timeline.
If not provided, the latest date present in the items set is taken as
end date.</td>
</tr> </tr>
<tr> <tr>
<td>groupOrder</td>
<td>String | Function</td>
<td>none</td>
<td>Order the groups by a field name or custom sort function.
By default, groups are not ordered.
</td>
<td>groupOrder</td>
<td>String | Function</td>
<td>none</td>
<td>Order the groups by a field name or custom sort function.
By default, groups are not ordered.
</td>
</tr> </tr>
<tr> <tr>
<td>height</td>
<td>Number | String</td>
<td>none</td>
<td>The height of the timeline in pixels or as a percentage.
When height is undefined or null, the height of the timeline is automatically
adjusted to fit the contents.
It is possible to set a maximum height using option <code>maxHeight</code>
to prevent the timeline from getting too high in case of automatically
calculated height.
</td>
<td>height</td>
<td>Number | String</td>
<td>none</td>
<td>The height of the timeline in pixels or as a percentage.
When height is undefined or null, the height of the timeline is automatically
adjusted to fit the contents.
It is possible to set a maximum height using option <code>maxHeight</code>
to prevent the timeline from getting too high in case of automatically
calculated height.
</td>
</tr> </tr>
<tr> <tr>
<td>margin.axis</td>
<td>Number</td>
<td>20</td>
<td>The minimal margin in pixels between items and the time axis.</td>
<td>margin.axis</td>
<td>Number</td>
<td>20</td>
<td>The minimal margin in pixels between items and the time axis.</td>
</tr> </tr>
<tr> <tr>
<td>margin.item</td>
<td>Number</td>
<td>10</td>
<td>The minimal margin in pixels between items.</td>
<td>margin.item</td>
<td>Number</td>
<td>10</td>
<td>The minimal margin in pixels between items.</td>
</tr> </tr>
<tr> <tr>
<td>max</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a maximum Date for the visible range.
It will not be possible to move beyond this maximum.
</td>
<td>max</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a maximum Date for the visible range.
It will not be possible to move beyond this maximum.
</td>
</tr> </tr>
<tr> <tr>
<td>maxHeight</td>
<td>Number | String</td>
<td>none</td>
<td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
<td>maxHeight</td>
<td>Number | String</td>
<td>none</td>
<td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
</tr> </tr>
<tr> <tr>
<td>min</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a minimum Date for the visible range.
It will not be possible to move beyond this minimum.
</td>
<td>min</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a minimum Date for the visible range.
It will not be possible to move beyond this minimum.
</td>
</tr> </tr>
<tr> <tr>
@ -463,41 +489,41 @@ var options = {
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td> <td>
Specifies whether the Timeline can be moved and zoomed by dragging the window.
See also option <code>zoomable</code>.
Specifies whether the Timeline can be moved and zoomed by dragging the window.
See also option <code>zoomable</code>.
</td> </td>
</tr> </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.add</code> are set <code>true</code>.
</td>
<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.add</code> are set <code>true</code>.
</td>
</tr> </tr>
<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.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
<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.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
</tr> </tr>
<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.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
<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.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
</tr> </tr>
<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.remove</code> are set <code>true</code>.
</td>
<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.remove</code> are set <code>true</code>.
</td>
</tr> </tr>
<!-- TODO: cleanup option order <!-- TODO: cleanup option order
@ -514,128 +540,128 @@ var options = {
--> -->
<tr> <tr>
<td>orientation</td>
<td>String</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</td>
<td>String</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>
</tr> </tr>
<tr> <tr>
<td>padding</td>
<td>Number</td>
<td>5</td>
<td>The padding of items, needed to correctly calculate the size
of item ranges. Must correspond with the css of items, for example when setting <code>options.padding=10</code>, corresponding css is:
<td>padding</td>
<td>Number</td>
<td>5</td>
<td>The padding of items, needed to correctly calculate the size
of item ranges. Must correspond with the css of items, for example when setting <code>options.padding=10</code>, corresponding css is:
<pre class="prettyprint lang-css"> <pre class="prettyprint lang-css">
.vis.timeline .item { .vis.timeline .item {
padding: 10px; padding: 10px;
}</pre> }</pre>
</td>
</td>
</tr> </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>
<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> <tr>
<td>showCurrentTime</td>
<td>boolean</td>
<td>true</td>
<td>Show a vertical bar at the current time.</td>
<td>showCurrentTime</td>
<td>boolean</td>
<td>true</td>
<td>Show a vertical bar at the current time.</td>
</tr> </tr>
<tr> <tr>
<td>showCustomTime</td>
<td>boolean</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. 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>
<td>showCustomTime</td>
<td>boolean</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. 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>
<tr> <tr>
<td>showMajorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMajorLabels</code> is <code>false</code>, no major labels
are shown.</td>
<td>showMajorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMajorLabels</code> is <code>false</code>, no major labels
are shown.</td>
</tr> </tr>
<tr> <tr>
<td>showMinorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMinorLabels</code> is <code>false</code>, no minor labels
are shown. When both <code>showMajorLabels</code> and
<code>showMinorLabels</code> are false, no horizontal axis will be
visible.</td>
<td>showMinorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMinorLabels</code> is <code>false</code>, no minor labels
are shown. When both <code>showMajorLabels</code> and
<code>showMinorLabels</code> are false, no horizontal axis will be
visible.</td>
</tr> </tr>
<tr> <tr>
<td>stack</td>
<td>Boolean</td>
<td>true</td>
<td>If true (default), items will be stacked on top of each other such that they do not overlap.</td>
<td>stack</td>
<td>Boolean</td>
<td>true</td>
<td>If true (default), items will be stacked on top of each other such that they do not overlap.</td>
</tr> </tr>
<tr> <tr>
<td>start</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial start date for the axis of the timeline.
If not provided, the earliest date present in the events is taken as start date.</td>
<td>start</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial start date for the axis of the timeline.
If not provided, the earliest date present in the events is taken as start date.</td>
</tr> </tr>
<tr> <tr>
<td>type</td>
<td>String</td>
<td>'box'</td>
<td>Specifies the default type for the timeline items. Choose from 'box', 'point', 'range', and 'rangeoverflow'. Note that individual items can override this default type.
</td>
<td>type</td>
<td>String</td>
<td>none</td>
<td>Specifies the default type for the timeline items. Choose from 'box', 'point', and 'range'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created.
</td>
</tr> </tr>
<tr> <tr>
<td>width</td>
<td>String</td>
<td>'100%'</td>
<td>The width of the timeline in pixels or as a percentage.</td>
<td>width</td>
<td>String</td>
<td>'100%'</td>
<td>The width of the timeline in pixels or as a percentage.</td>
</tr> </tr>
<tr> <tr>
<td>zoomable</td>
<td>Boolean</td>
<td>true</td>
<td>
Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
Only applicable when option <code>moveable</code> is set <code>true</code>.
</td>
<td>zoomable</td>
<td>Boolean</td>
<td>true</td>
<td>
Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
Only applicable when option <code>moveable</code> is set <code>true</code>.
</td>
</tr> </tr>
<tr> <tr>
<td>zoomMax</td>
<td>Number</td>
<td>315360000000000</td>
<td>Set a maximum zoom interval for the visible range in milliseconds.
It will not be possible to zoom out further than this maximum.
Default value equals about 10000 years.
</td>
<td>zoomMax</td>
<td>Number</td>
<td>315360000000000</td>
<td>Set a maximum zoom interval for the visible range in milliseconds.
It will not be possible to zoom out further than this maximum.
Default value equals about 10000 years.
</td>
</tr> </tr>
<tr> <tr>
<td>zoomMin</td>
<td>Number</td>
<td>10</td>
<td>Set a minimum zoom interval for the visible range in milliseconds.
It will not be possible to zoom in further than this minimum.
</td>
<td>zoomMin</td>
<td>Number</td>
<td>10</td>
<td>Set a minimum zoom interval for the visible range in milliseconds.
It will not be possible to zoom in further than this minimum.
</td>
</tr> </tr>
@ -666,6 +692,13 @@ timeline.clear({options: true}); // clear options only
</td> </td>
</tr> </tr>
<tr>
<td>destroy()</td>
<td>none</td>
<td>Destroy the Timeline. The timeline is removed from memory. all DOM elements and event listeners are cleaned up.
</td>
</tr>
<tr> <tr>
<td>fit()</td> <td>fit()</td>
<td>none</td> <td>none</td>
@ -915,7 +948,7 @@ var options = {
</p> </p>
<ul> <ul>
<li><code>item</code>: the item being manipulated</li> <li><code>item</code>: the item being manipulated</li>
<li><code>callback</code>: a callback function which must be invoked to report back. The callback must be invoked as <code>callback(item | null)</code>. Here, <code>item</code> can contain changes to the passed item. When invoked as <code>callback(null)</code>, the action will be cancelled.</li>
<li><code>callback</code>: a callback function which must be invoked to report back. The callback must be invoked as <code>callback(item | null)</code>. Here, <code>item</code> can contain changes to the passed item. Parameter `item` typically contains fields `content`, `start`, and optionally `end`. The type of `start` and `end` is determined by the DataSet type configuration and is `Date` by default. When invoked as <code>callback(null)</code>, the action will be cancelled.</li>
</ul> </ul>
<p> <p>

+ 0
- 18
examples/graph/14_dot_language.html View File

@ -1,18 +0,0 @@
<html>
<head>
<title>Graph | DOT Language</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
</head>
<body>
<div id="mygraph"></div>
<script type="text/javascript">
var container = document.getElementById('mygraph');
var data = {
dot: 'digraph {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
};
var graph = new vis.Graph(container, data);
</script>
</body>
</html>

+ 53
- 0
examples/graph2d/01_basic.html View File

@ -0,0 +1,53 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Basic Example</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>
<h2>Graph2d | Basic Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
create your own styling.
<br /><br />
Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d.
In these examples however, we will focus on what's new in Graph2d!
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

+ 57
- 0
examples/graph2d/02_bars.html View File

@ -0,0 +1,57 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graph Example</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>
<h2>Graph2d | Bar Graph Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most the same data as the first example, except we plot the data as bars! The
dataAxis (y-axis) icons have been enabled as well. These icons are generated automatically from the CSS
styling of the graphs. Finally, we've used the option from Timeline where we draw the x-axis (time-axis) on top.
<br /><br />
The <code>align</code> option can be used to align the bar at the center of the datapoint or on the left or right side of it.
This example uses the default center alignment.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
barChart: {width:50, align:'center'}, // align: left, center, right
drawPoints: false,
dataAxis: {
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, options);
</script>
</body>
</html>

+ 112
- 0
examples/graph2d/03_groups.html View File

@ -0,0 +1,112 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Groups Example</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<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>
<h2>Graph2d | Groups Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the groups functionality within Graph2d. This works in the same way as it does in Timeline,
We have however simplified the constructor to accept groups as well to shorten the code. These groups are the
method used in Graph2d to define individual graphs. These groups can be given an individual class as well as all the
styling options you can supply to Graph2d! This example, as well as the ones that follow will showcase a few different usages
of these options. <br /> <br />
This example also introduces the automatically generated legend. The icons are automatically generated and the label is the
content as you define it in the groups. If you have datapoints that are not part of a group, a default group is created with the label: 'default'.
In this example, the setting <code>defaultGroup</code> is used to rename the default group to 'ungrouped'.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
options: {
style:'bar'
}});
groups.add({
id: 2,
content: names[2],
options: {drawPoints: false}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-13', y: 60},
{x: '2014-06-14', y: 40},
{x: '2014-06-15', y: 55},
{x: '2014-06-16', y: 40},
{x: '2014-06-17', y: 50},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 60, group: 2},
{x: '2014-06-23', y: 10, group: 2},
{x: '2014-06-24', y: 25, group: 2},
{x: '2014-06-25', y: 30, group: 2},
{x: '2014-06-26', y: 20, group: 3},
{x: '2014-06-27', y: 60, group: 3},
{x: '2014-06-28', y: 10, group: 3},
{x: '2014-06-29', y: 25, group: 3},
{x: '2014-06-30', y: 30, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
defaultGroup: 'ungrouped',
legend: true,
start: '2014-06-10',
end: '2014-07-04'
};
var graph2d = new vis.Graph2d(container, dataset, options, groups);
</script>
</body>
</html>

+ 126
- 0
examples/graph2d/04_rightAxis.html View File

@ -0,0 +1,126 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Right Axis Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
.customStyle1 {
fill: #0df200;
fill-opacity:0;
stroke-width:2px;
stroke: #0df200;
}
.customStyle2 {
fill: #f23303;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0004;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Right Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the all of the graphs outlined on the right side using the <code>yAxisOrientation</code> option.
We also show a few custom styles for the graph and show icons on the axis, which are adhering to the custom styling.
Finally, the legend is manually positioned. Both the left and right axis
have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
in a <code>left</code> and a <code>right</code> segment. Since this example shows the right axis, the right legend is configured.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['Custom1', 'Custom2', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 60, group: 2},
{x: '2014-06-23', y: 10, group: 2},
{x: '2014-06-24', y: 50, group: 2},
{x: '2014-06-25', y: 30, group: 2},
{x: '2014-06-26', y: 20, group: 3},
{x: '2014-06-27', y: 60, group: 3},
{x: '2014-06-28', y: 10, group: 3},
{x: '2014-06-29', y: 85, group: 3},
{x: '2014-06-30', y: 30, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
legend: {right: {position: 'top-left'}},
yAxisOrientation: 'right', // right, left
dataAxis: {icons: true},
start: '2014-06-10',
end: '2014-07-04',
movable: false
};
var graph2d = new vis.Graph2d(container, dataset, options, groups);
</script>
</body>
</html>

+ 138
- 0
examples/graph2d/05_bothAxis.html View File

@ -0,0 +1,138 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Both Axis Example</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.customStyle1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.customStyle2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.customStyle3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.customStyle3.fill {
fill-opacity:0.5 !important;
stroke: none;
}
</style>
<script src="../../dist/vis.js"></script>
</head>
<body>
<h2>Graph2d | Both Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the some of the graphs outlined on the right side using the <code>yAxisOrientation</code> option within the groups.
We also show a few more custom styles for the graphs. Finally, the legend is manually positioned. Both the left and right axis
have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
in a <code>left</code> and a <code>right</code> segment. The default position of the left axis has been changed.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: 'customStyle3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {showMinorLabels: false},
legend: {left:{position:"bottom-left"}},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, items, options, groups);
</script>
</body>
</html>

+ 101
- 0
examples/graph2d/06_interpolation.html View File

@ -0,0 +1,101 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Interpolation</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
</head>
<body>
<h2>Graph2d | Interpolation</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
The Graph2d makes use of <a href="http://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline" target="_blank">Catmull-Rom spline interpolation</a>.
The user can configure these per group, or globally. In this example we show all 4 possiblities. The differences are in the parametrization of
the curves. The options are <code>uniform</code>, <code>chordal</code> and <code>centripetal</code>. Alternatively you can disable the Catmull-Rom interpolation and
a linear interpolation will be used. The <code>centripetal</code> parametrization produces the best result (no self intersection, yet follows the line closely) and is therefore the default setting.
<br /><br />
For both the <code>centripetal</code> and <code>chordal</code> parametrization, the distances between the points have to be calculated and this makes these methods computationally intensive
if there are very many points. The <code>uniform</code> parametrization still has to do transformations, though it does not have to calculate the distance between point. Finally, the
linear interpolation is the fastest method. For more on the Catmull-Rom method, <a href="http://www.cemyuksel.com/research/catmullrom_param/catmullrom.pdf" target="_blank">C. Yuksel et al. have an interesting paper titled &Prime;On the parametrization of Catmull-Rom Curves&Prime;</a>.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['centripetal', 'chordal', 'uniform', 'disabled'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: false,
catmullRom: {
parametrization: 'centripetal'
}
}});
groups.add({
id: 1,
content: names[1],
options: {
drawPoints: false,
catmullRom: {
parametrization: 'chordal'
}
}});
groups.add({
id: 2,
content: names[2],
options: {
drawPoints: false,
catmullRom: {
parametrization: 'uniform'
}
}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: { style: 'circle' },
catmullRom: false
}});
var container = document.getElementById('visualization');
var dataset = new vis.DataSet();
for (var i = 0; i < names.length; i++) {
dataset.add( [
{x: '2014-06-12', y: 0 , group: i},
{x: '2014-06-13', y: 40, group: i},
{x: '2014-06-14', y: 10, group: i},
{x: '2014-06-15', y: 15, group: i},
{x: '2014-06-15', y: 30, group: i},
{x: '2014-06-17', y: 10, group: i},
{x: '2014-06-18', y: 15, group: i},
{x: '2014-06-19', y: 52, group: i},
{x: '2014-06-20', y: 10, group: i},
{x: '2014-06-21', y: 20, group: i}
]);
}
var options = {
dataPoints: false,
dataAxis: {visible: false},
legend: true,
start: '2014-06-11',
end: '2014-06-22'
};
var graph2d = new vis.Graph2d(container, dataset, options, groups);
</script>
</body>
</html>

+ 74
- 0
examples/graph2d/07_scrollingAndSorting.html View File

@ -0,0 +1,74 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Scrolling and Sorting</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>
<h2>Graph2d | Scrolling and Sorting</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can determine the height of the Graph2d seperately from the height of the frame. If the <code>graphHeight</code>
is defined, and the <code>height</code> is not, the frame will auto-scale to accommodate the graphHeight. If the <code>height</code>
is defined as well, the user can scroll up and down vertically as well as horizontally to view the graph.
<br /><br />
Vertical scrolling is planned, though not yet available. The graphHeight also does not conform if only the <code>height</code> is defined.
<br /><br />
You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. However, doing so does reduce the optimization
of the drawing so if you have a lot of points, keep <code>sort</code> turned on for the best results.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30},
{x: '2014-06-11', y: 100},
{x: '2014-06-12', y: 250},
{x: '2014-06-13', y: 300},
{x: '2014-06-14', y: 100},
{x: '2014-06-15', y: 150},
{x: '2014-06-16', y: 300},
{x: '2014-06-11', y: 400},
{x: '2014-06-12', y: 450},
{x: '2014-06-13', y: 400},
{x: '2014-06-14', y: 500},
{x: '2014-06-15', y: 420},
{x: '2014-06-16', y: 600},
{x: '2014-06-11', y: 810},
{x: '2014-06-12', y: 825},
{x: '2014-06-13', y: 830},
{x: '2014-06-14', y: 810},
{x: '2014-06-15', y: 815},
{x: '2014-06-16', y: 900}
];
var dataset = new vis.DataSet(items);
var options = {
legend: true,
sort: false,
defaultGroup: 'doodle',
graphHeight: '1500px',
height: '500px',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

+ 150
- 0
examples/graph2d/08_performance.html View File

@ -0,0 +1,150 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Performance</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span.label {
width:150px;
display:inline-block;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Performance</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example is a test of the performance of the Graph2d. Select the amount of datapoints you want to plot and press draw.
You can choose between the style of the points as well as the interpolation method. This can only be toggled with the buttons.
The interpolation options may not look different for this dataset but you can see their effects clearly in example 7.
<br /><br />
Linear interpolation and no points are the settings that will render quickest. By default, Graph2d will downsample when there are more
than 1 point per pixel. This can be manually disabled at the cost of performance by using the <code>sampling</code> option.
</div>
<br />
<p>
<span class="label">Number of items:</span><input id="count" value="50000">
<input id="draw" type="button" value="draw" style="width:200px;"> <span id="description"><b>Click the draw button to load the data!</b></span>
<br />
<span class="label">Interpolation method:</span><input id="interpolation" value="linear">
<input id="toggleInterpolation" type="button" value="toggle Interpolation" style="width:200px;">
<br />
<span class="label">Points style:</span><input id="points" value="none">
<input id="togglePoints" type="button" value="toggle Points" style="width:200px;">
</p>
<div id="visualization"></div>
<script>
var points = 'none';
var interpolation = 'linear';
function togglePoints() {
var pointsOptions = {};
var pointsField = document.getElementById("points");
if (points == "none") {
points = 'circle';
pointsOptions = {drawPoints: {style: points}};
}
else if (points == "circle") {
points = 'square';
pointsOptions = {drawPoints: {style: points}};
}
else if (points == "square") {
points = 'none';
pointsOptions = {drawPoints: false};
}
pointsField.value = points;
graph2d.setOptions(pointsOptions);
}
function toggleInterpolation() {
var interpolationOptions = {};
var interpolationField = document.getElementById("interpolation");
if (interpolation == "linear") {
interpolation = 'centripetal';
interpolationOptions = {catmullRom: {parametrization: interpolation}};
}
else if (interpolation == "centripetal") {
interpolation = 'chordal';
interpolationOptions = {catmullRom: {parametrization: interpolation}};
}
else if (interpolation == "chordal") {
interpolation = 'uniform';
interpolationOptions = {catmullRom: {parametrization: interpolation}};
}
else if (interpolation == "uniform") {
interpolation = 'linear';
interpolationOptions = {catmullRom: false};
}
interpolationField.value = interpolation;
graph2d.setOptions(interpolationOptions);
}
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var dataset = new vis.DataSet({
type: {start: 'ISODate', end: 'ISODate' }
});
var startPoint = now;
var endPoint = now + 3600000 * 5000;
// create data -- this is seperated into 3 functions so we can update the span.
function createData() {
var span = document.getElementById("description");
span.innerHTML = 'Generating data... (just javascript, not vis.graph2D)...';
setTimeout(generateData,10);
}
function generateData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
var span = document.getElementById("description");
var start = now;
for (var i = 0; i < count; i++) {
var yval = Math.sin(i/100) * Math.cos(i/50) * 50 + Math.sin(i/1000) * 50;
newData.push({id: i, x: start + 3600000 * i, y: yval});
}
span.innerHTML = 'Loading data into Graph2d...';
setTimeout(function() {loadDataIntoVis(newData);},10);
}
function loadDataIntoVis(newData) {
var span = document.getElementById("description");
dataset.clear();
dataset.add(newData);
span.innerHTML = 'Done!';
}
document.getElementById('draw').onclick = createData;
document.getElementById('toggleInterpolation').onclick = toggleInterpolation;
document.getElementById('togglePoints').onclick = togglePoints;
var container = document.getElementById('visualization');
var options = {
sampling: true,
drawPoints: {enabled:false, size:3},
catmullRom: false,
start: startPoint,
end: endPoint
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

+ 87
- 0
examples/graph2d/default.css View File

@ -0,0 +1,87 @@
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body, td, th {
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
}
#container {
margin: 0 auto;
padding-bottom: 50px;
width: 900px;
}
h1 {
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
}
h3 {
font-size: 140%;
}
a {
color: #2B7CE9;
text-decoration: none;
}
a:visited {
color: #2E60A4;
}
a:hover {
color: red;
text-decoration: underline;
}
hr {
border: none 0;
border-top: 1px solid #abc;
height: 1px;
}
pre {
display: block;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
}
pre, code {
background-color: #f5f5f5;
}
table
{
border-collapse: collapse;
}
th {
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
}
td {
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
}

+ 21
- 0
examples/graph2d/index.html View File

@ -0,0 +1,21 @@
<html>
<head>
<link rel='stylesheet' href='default.css' type='text/css'>
</head>
<body>
<div id="container">
<h1>Graph2d Examples</h1>
<p><a href="01_basic.html">01_basic.html</a></p>
<p><a href="02_bars.html">02_bars.html</a></p>
<p><a href="03_groups.html">03_groups.html</a></p>
<p><a href="04_rightAxis.html">04_rightAxis.html</a></p>
<p><a href="05_bothAxis.html">05_bothAxis.html</a></p>
<p><a href="06_interpolation.html">06_interpolation.html</a></p>
<p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
<p><a href="08_performance.html">08_performance.html</a></p>
</div>
</body>
</html>

+ 2
- 1
examples/index.html View File

@ -12,7 +12,8 @@
<h1>vis.js examples</h1> <h1>vis.js examples</h1>
<p><a href="graph">graph</a></p>
<p><a href="network">network</a></p>
<p><a href="graph2d">graph2d</a></p>
<p><a href="graph3d">graph3d</a></p> <p><a href="graph3d">graph3d</a></p>
<p><a href="timeline">timeline</a></p> <p><a href="timeline">timeline</a></p>

examples/graph/01_basic_usage.html → examples/network/01_basic_usage.html View File

@ -1,12 +1,12 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Basic usage</title>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../dist/vis.js"></script> <script type="text/javascript" src="../../dist/vis.js"></script>
<style type="text/css"> <style type="text/css">
#mygraph {
#mynetwork {
width: 400px; width: 400px;
height: 400px; height: 400px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -16,7 +16,7 @@
<body> <body>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<script type="text/javascript"> <script type="text/javascript">
// create an array with nodes // create an array with nodes
@ -36,14 +36,14 @@
{from: 2, to: 5} {from: 2, to: 5}
]; ];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {}; var options = {};
var graph = new vis.Graph(container, data, options);
var network = new vis.Network(container, data, options);
</script> </script>
</body> </body>

examples/graph/02_random_nodes.html → examples/network/02_random_nodes.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Random nodes</title>
<title>Network | Random nodes</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt sans; font: 10pt sans;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
function draw() { function draw() {
nodes = []; nodes = [];
@ -36,7 +36,7 @@
connectionCount[i] = 0; connectionCount[i] = 0;
// create edges in a scale-free-graph way
// create edges in a scale-free-network way
if (i == 1) { if (i == 1) {
var from = i; var from = i;
var to = 0; var to = 0;
@ -69,8 +69,8 @@
} }
} }
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -79,12 +79,12 @@
var options = { var options = {
edges: { edges: {
}, },
stabilize: false,
stabilize: false
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners // add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
}); });
} }
@ -100,7 +100,7 @@
<br> <br>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p> <p id="selection"></p>
</body> </body>

examples/graph/03_images.html → examples/network/03_images.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Images</title>
<title>Network | Images</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt arial; font: 10pt arial;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
var DIR = 'img/refresh-cl/'; var DIR = 'img/refresh-cl/';
var LENGTH_MAIN = 150; var LENGTH_MAIN = 150;
@ -50,7 +50,7 @@
nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'}); nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
edges.push({from: 3, to: 102, length: LENGTH_SUB}); edges.push({from: 3, to: 102, length: LENGTH_SUB});
nodes.push({id: 103, label: 'graph drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
nodes.push({id: 103, label: 'network drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
edges.push({from: 1, to: 103, length: LENGTH_SUB}); edges.push({from: 1, to: 103, length: LENGTH_SUB});
nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'}); nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
@ -61,8 +61,8 @@
edges.push({from: 3, to: i, length: LENGTH_SUB}); edges.push({from: 3, to: i, length: LENGTH_SUB});
} }
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -70,14 +70,14 @@
var options = { var options = {
stabilize: false // stabilize positions before displaying stabilize: false // stabilize positions before displaying
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
} }
</script> </script>
</head> </head>
<body onload="draw()"> <body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body> </body>
</html> </html>

examples/graph/04_shapes.html → examples/network/04_shapes.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Shapes</title>
<title>Network | Shapes</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt arial; font: 10pt arial;
} }
#mygraph {
#mynetwork {
width: 100%; width: 100%;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
function draw() { function draw() {
nodes = [ nodes = [
@ -54,8 +54,8 @@
} }
} }
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -63,13 +63,13 @@
var options = { var options = {
stabilize: false stabilize: false
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
} }
</script> </script>
</head> </head>
<body onload="draw()"> <body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
<div id="info"></div> <div id="info"></div>
</body> </body>

examples/graph/05_social_network.html → examples/network/05_social_network.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Social Network</title>
<title>Network | Social Network</title>
<style> <style>
body { body {
font: 10pt arial; font: 10pt arial;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -22,7 +22,7 @@
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
function draw() { function draw() {
// create people // create people
@ -55,20 +55,20 @@
{from: 2, to: 7, value: 4, label: 4, color: color} {from: 2, to: 7, value: 4, label: 4, color: color}
]; ];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {}; var options = {};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
} }
</script> </script>
</head> </head>
<body onload="draw()"> <body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p> <p>
Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a> Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
</p> </p>

examples/graph/06_groups.html → examples/network/06_groups.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Groups</title>
<title>Network | Groups</title>
<style> <style>
body { body {
font: 10pt arial; font: 10pt arial;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -20,7 +20,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
google.load('visualization', '1'); google.load('visualization', '1');
@ -57,7 +57,7 @@
}); });
connectionCount[i] = 0; connectionCount[i] = 0;
// create links in a scale-free-graph way
// create links in a scale-free-network way
if (i == 1) { if (i == 1) {
from = i; from = i;
to = 0; to = 0;
@ -124,8 +124,8 @@
group++; group++;
} }
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -139,7 +139,7 @@
length: 50 length: 50
} }
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
} }
</script> </script>
</head> </head>
@ -154,7 +154,7 @@
</form> </form>
<br> <br>
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body> </body>
</html> </html>

examples/graph/07_selections.html → examples/network/07_selections.html View File

@ -1,12 +1,12 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Selections</title>
<title>Network | Selections</title>
<script type="text/javascript" src="../../dist/vis.js"></script> <script type="text/javascript" src="../../dist/vis.js"></script>
<style type="text/css"> <style type="text/css">
#mygraph {
#mynetwork {
width: 400px; width: 400px;
height: 400px; height: 400px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -16,7 +16,7 @@
<body> <body>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<div id="info"></div> <div id="info"></div>
<script type="text/javascript"> <script type="text/javascript">
@ -37,8 +37,8 @@
{from: 2, to: 5} {from: 2, to: 5}
]; ];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -48,15 +48,15 @@
shape: 'box' shape: 'box'
} }
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listener // add event listener
graph.on('select', function(properties) {
network.on('select', function(properties) {
document.getElementById('info').innerHTML += 'selection: ' + JSON.stringify(properties) + '<br>'; 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)
graph.setSelection([3, 4, 5]);
network.setSelection([3, 4, 5]);
</script> </script>
</body> </body>

examples/graph/08_mobile_friendly.html → examples/network/08_mobile_friendly.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Graph | Mobile friendly</title>
<title>Network | Mobile friendly</title>
<style type="text/css"> <style type="text/css">
html, body { html, body {
@ -12,7 +12,7 @@
height: 100%; height: 100%;
} }
#mygraph {
#mynetwork {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -26,7 +26,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
// Called when the Visualization API is loaded. // Called when the Visualization API is loaded.
function draw() { function draw() {
@ -80,8 +80,8 @@
} }
} }
// Create a graph
var container = document.getElementById('mygraph');
// Create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -97,12 +97,12 @@
width: 2 width: 2
} }
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
} }
</script> </script>
</head> </head>
<body onload="draw()" onresize="graph.redraw();">
<div id="mygraph"></div>
<body onload="draw()" onresize="network.redraw();">
<div id="mynetwork"></div>
</body> </body>
</html> </html>

examples/graph/09_sizing.html → examples/network/09_sizing.html View File

@ -1,13 +1,13 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph | Sizing</title>
<title>Network | Sizing</title>
<style type="text/css"> <style type="text/css">
html, body { html, body {
font: 10pt arial; font: 10pt arial;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
var DIR = 'img/soft-scraps-icons/'; var DIR = 'img/soft-scraps-icons/';
@ -55,8 +55,8 @@
{from: 2, to: 7, value: 4, title: '4 emails per week'} {from: 2, to: 7, value: 4, title: '4 emails per week'}
]; ];
// Instantiate our graph object.
var container = document.getElementById('mygraph');
// Instantiate our network object.
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -69,12 +69,12 @@
color: '#97C2FC' color: '#97C2FC'
} }
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
} }
</script> </script>
</head> </head>
<body onload="draw()"> <body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body> </body>
</html> </html>

examples/graph/10_multiline_text.html → examples/network/10_multiline_text.html View File

@ -1,10 +1,10 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph | Multiline text</title>
<title>Network | Multiline text</title>
<style type="text/css"> <style type="text/css">
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -32,19 +32,19 @@
{from: 1, to: 5, style: 'arrow', width: 3, length: 200} {from: 1, to: 5, style: 'arrow', width: 3, length: 200}
]; ];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {}; var options = {};
var graph = new vis.Graph(container, data, options);
var network = new vis.Network(container, data, options);
} }
</script> </script>
</head> </head>
<body onload="draw()"> <body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body> </body>
</html> </html>

examples/graph/11_custom_style.html → examples/network/11_custom_style.html View File

@ -1,13 +1,13 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph | Custom style</title>
<title>Network | Custom style</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt arial; font: 10pt arial;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -20,7 +20,7 @@
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var options = null; var options = null;
var graph = null;
var network = null;
// Called when the Visualization API is loaded. // Called when the Visualization API is loaded.
function draw() { function draw() {
@ -114,18 +114,18 @@
} }
}; };
// create the graph
var container = document.getElementById('mygraph');
// create the network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
} }
</script> </script>
</head> </head>
<body onload="draw()"> <body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body> </body>
</html> </html>

examples/graph/12_scalable_images.html → examples/network/12_scalable_images.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Scalable images</title>
<title>Network | Scalable images</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt arial; font: 10pt arial;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -21,7 +21,7 @@
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
// Called when the Visualization API is loaded. // Called when the Visualization API is loaded.
function draw() { function draw() {
@ -57,8 +57,8 @@
{from: 2, to: 7, value: 4, title: '4 emails per week'} {from: 2, to: 7, value: 4, title: '4 emails per week'}
]; ];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -72,13 +72,13 @@
color: 'lightgray' color: 'lightgray'
} }
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
} }
</script> </script>
</head> </head>
<body onload="draw()"> <body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
<div id="info"></div> <div id="info"></div>
</body> </body>

examples/graph/13_dashed_lines.html → examples/network/13_dashed_lines.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Dashed lines</title>
<title>Network | Dashed lines</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt sans; font: 10pt sans;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -35,8 +35,8 @@
{from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}} {from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
]; ];
// create the graph
var container = document.getElementById('mygraph');
// create the network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -50,7 +50,7 @@
}, },
stabilize: false stabilize: false
}; };
var graph = new vis.Graph(container, data, options);
var network = new vis.Network(container, data, options);
} }
</script> </script>
</head> </head>
@ -60,6 +60,6 @@
This example shows the different options for dashed lines. This example shows the different options for dashed lines.
</p> </p>
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body> </body>
</html> </html>

+ 18
- 0
examples/network/14_dot_language.html View File

@ -0,0 +1,18 @@
<html>
<head>
<title>Network | DOT Language</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
var container = document.getElementById('mynetwork');
var data = {
dot: 'dinetwork {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
};
var network = new vis.Network(container, data);
</script>
</body>
</html>

examples/graph/15_dot_language_playground.html → examples/network/15_dot_language_playground.html View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | DOT language playground</title>
<title>Network | DOT language playground</title>
<script type="text/javascript" src="../../dist/vis.js"></script> <script type="text/javascript" src="../../dist/vis.js"></script>
@ -33,7 +33,7 @@
border: 1px solid #d3d3d3; border: 1px solid #d3d3d3;
} }
#mygraph {
#mynetwork {
float: left; float: left;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -73,22 +73,22 @@
<textarea id="data"></textarea> <textarea id="data"></textarea>
</td> </td>
<td> <td>
<div id="mygraph"></div>
<div id="mynetwork"></div>
</td> </td>
</tr> </tr>
</table> </table>
<script type="text/javascript"> <script type="text/javascript">
var graph, data;
var network, data;
var btnDraw = document.getElementById('draw'); var btnDraw = document.getElementById('draw');
var txtData = document.getElementById('data'); var txtData = document.getElementById('data');
var txtError = document.getElementById('error'); var txtError = document.getElementById('error');
btnDraw.onclick = draw; btnDraw.onclick = draw;
// resize the graph when window resizes
// resize the network when window resizes
window.onresize = function () { window.onresize = function () {
graph.redraw()
network.redraw()
}; };
// parse and draw the data // parse and draw the data
@ -101,10 +101,10 @@
dot: txtData.value dot: txtData.value
}; };
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var options = {}; var options = {};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
} }
catch (err) { catch (err) {
// set the cursor at the position where the error occurred // set the cursor at the position where the error occurred

examples/graph/16_dynamic_data.html → examples/network/16_dynamic_data.html View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | DataSet</title>
<title>Network | DataSet</title>
<style type="text/css"> <style type="text/css">
html, body { html, body {
@ -45,7 +45,7 @@
font-size: 10pt; font-size: 10pt;
} }
#graph {
#network {
width: 100%; width: 100%;
height: 400px; height: 400px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -56,7 +56,7 @@
<script type="text/javascript" src="../../dist/vis.js"></script> <script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var nodes, edges, graph;
var nodes, edges, network;
// convenience method to stringify a JSON object // convenience method to stringify a JSON object
function toJSON (obj) { function toJSON (obj) {
@ -157,14 +157,14 @@
{id: '4', from: '2', to: '5'} {id: '4', from: '2', to: '5'}
]); ]);
// create a graph
var container = $('#graph').get(0);
// create a network
var container = $('#network').get(0);
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {}; var options = {};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
}); });
</script> </script>
</head> </head>
@ -255,8 +255,8 @@
</td> </td>
<td> <td>
<h2>Graph</h2>
<div id="graph"></div>
<h2>Network</h2>
<div id="network"></div>
</td> </td>
</tr> </tr>
</table> </table>

examples/graph/17_network_info.html → examples/network/17_network_info.html View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- saved from url=(0046)http://visjs.org/examples/graph/03_images.html -->
<!-- saved from url=(0046)http://visjs.org/examples/network/03_images.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Graph | Images</title>
<title>Network | Images</title>
<style type="text/css"> <style type="text/css">
body { body {
@ -10,7 +10,7 @@
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
} }
#mygraph {
#mynetwork {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -22,7 +22,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
var LENGTH_MAIN = 350, var LENGTH_MAIN = 350,
LENGTH_SERVER = 150, LENGTH_SERVER = 150,
@ -92,9 +92,9 @@
// legend // legend
var mygraph = document.getElementById('mygraph');
var x = - mygraph.clientWidth / 2 + 50;
var y = - mygraph.clientHeight / 2 + 50;
var mynetwork = document.getElementById('mynetwork');
var x = - mynetwork.clientWidth / 2 + 50;
var y = - mynetwork.clientHeight / 2 + 50;
var step = 70; var step = 70;
nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1}); nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1});
nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1}); nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1});
@ -102,8 +102,8 @@
nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1}); nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1});
nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1}); nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1});
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -141,14 +141,14 @@
} }
} }
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
} }
</script> </script>
</head> </head>
<body onload="draw()"> <body onload="draw()">
<div id="mygraph"><div class="graph-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>
<div id="mynetwork"><div class="network-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>

examples/graph/18_fully_random_nodes_clustering.html → examples/network/18_fully_random_nodes_clustering.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Fully random nodes clustering</title>
<title>Network | Fully random nodes clustering</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt sans; font: 10pt sans;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
function draw() { function draw() {
nodes = []; nodes = [];
@ -45,9 +45,9 @@
to: to to: to
}); });
} }
// create a graph
// create a network
var clusteringOn = document.getElementById('clustering').checked; var clusteringOn = document.getElementById('clustering').checked;
var container = document.getElementById('mygraph');
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -61,10 +61,10 @@
}, },
stabilize: false stabilize: false
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners // add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
}); });
} }
@ -72,7 +72,7 @@
</head> </head>
<body onload="draw();"> <body onload="draw();">
<h2>Clustering - Fully random graph</h2>
<h2>Clustering - Fully random network</h2>
<div style="width:700px; font-size:14px;"> <div style="width:700px; font-size:14px;">
This example shows a fully randomly generated set of nodes and connected edges. This example shows a fully randomly generated set of nodes and connected edges.
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
@ -95,7 +95,7 @@
</form> </form>
<br> <br>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p> <p id="selection"></p>
</body> </body>

examples/graph/19_scale_free_graph_clustering.html → examples/network/19_scale_free_graph_clustering.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Scale free graph clustering</title>
<title>Network | Scale free network clustering</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt sans; font: 10pt sans;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
function draw() { function draw() {
nodes = []; nodes = [];
@ -36,7 +36,7 @@
connectionCount[i] = 0; connectionCount[i] = 0;
// create edges in a scale-free-graph way
// create edges in a scale-free-network way
if (i == 1) { if (i == 1) {
var from = i; var from = i;
var to = 0; var to = 0;
@ -68,10 +68,10 @@
} }
} }
// create a graph
// create a network
var clusteringOn = document.getElementById('clustering').checked; var clusteringOn = document.getElementById('clustering').checked;
var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value); var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value);
var container = document.getElementById('mygraph');
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -94,10 +94,10 @@
}, },
stabilize: false stabilize: false
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners // add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
}); });
} }
@ -105,9 +105,9 @@
</head> </head>
<body onload="draw();"> <body onload="draw();">
<h2>Clustering - Scale-Free-Graph</h2>
<h2>Clustering - Scale-Free-Network</h2>
<div style="width:700px; font-size:14px;"> <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.
This example shows the randomly generated <b>scale-free-network</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 />
@ -131,7 +131,7 @@
</form> </form>
<br> <br>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p> <p id="selection"></p>
</body> </body>

examples/graph/20_navigation.html → examples/network/20_navigation.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Navigation</title>
<title>Network | Navigation</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt sans; font: 10pt sans;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -39,7 +39,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
function draw() { function draw() {
nodes = []; nodes = [];
@ -56,7 +56,7 @@
connectionCount[i] = 0; connectionCount[i] = 0;
// create edges in a scale-free-graph way
// create edges in a scale-free-network way
if (i == 1) { if (i == 1) {
var from = i; var from = i;
var to = 0; var to = 0;
@ -88,8 +88,8 @@
} }
} }
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -113,10 +113,10 @@
navigation: true, navigation: true,
keyboard: true keyboard: true
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners // add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
}); });
} }
@ -130,13 +130,13 @@
<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/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>
<td><div class="table_content"><img src="../../dist/img/network/upArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/downArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/leftArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/rightArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/plus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/minus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/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>
@ -175,7 +175,7 @@
</form> </form>
<br> <br>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p> <p id="selection"></p>
</body> </body>

examples/graph/21_data_manipulation.html → examples/network/21_data_manipulation.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Navigation</title>
<title>Network | Navigation</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt sans; font: 10pt sans;
} }
#mygraph {
#mynetwork {
position:relative; position:relative;
width: 600px; width: 600px;
height: 600px; height: 600px;
@ -36,7 +36,7 @@
#operation { #operation {
font-size:28px; font-size:28px;
} }
#graph-popUp {
#network-popUp {
display:none; display:none;
position:absolute; position:absolute;
top:350px; top:350px;
@ -58,7 +58,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
function draw() { function draw() {
nodes = []; nodes = [];
@ -75,7 +75,7 @@
connectionCount[i] = 0; connectionCount[i] = 0;
// create edges in a scale-free-graph way
// create edges in a scale-free-network way
if (i == 1) { if (i == 1) {
var from = i; var from = i;
var to = 0; var to = 0;
@ -107,8 +107,8 @@
} }
} }
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -125,7 +125,7 @@
var labelInput = document.getElementById('node-label'); var labelInput = document.getElementById('node-label');
var saveButton = document.getElementById('saveButton'); var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton'); var cancelButton = document.getElementById('cancelButton');
var div = document.getElementById('graph-popUp');
var div = document.getElementById('network-popUp');
span.innerHTML = "Add Node"; span.innerHTML = "Add Node";
idInput.value = data.id; idInput.value = data.id;
labelInput.value = data.label; labelInput.value = data.label;
@ -139,7 +139,7 @@
var labelInput = document.getElementById('node-label'); var labelInput = document.getElementById('node-label');
var saveButton = document.getElementById('saveButton'); var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton'); var cancelButton = document.getElementById('cancelButton');
var div = document.getElementById('graph-popUp');
var div = document.getElementById('network-popUp');
span.innerHTML = "Edit Node"; span.innerHTML = "Edit Node";
idInput.value = data.id; idInput.value = data.id;
labelInput.value = data.label; labelInput.value = data.label;
@ -159,21 +159,21 @@
} }
} }
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners // add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
}); });
graph.on("resize", function(params) {console.log(params.width,params.height)});
network.on("resize", function(params) {console.log(params.width,params.height)});
function clearPopUp() { function clearPopUp() {
var saveButton = document.getElementById('saveButton'); var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton'); var cancelButton = document.getElementById('cancelButton');
saveButton.onclick = null; saveButton.onclick = null;
cancelButton.onclick = null; cancelButton.onclick = null;
var div = document.getElementById('graph-popUp');
var div = document.getElementById('network-popUp');
div.style.display = 'none'; div.style.display = 'none';
} }
@ -181,7 +181,7 @@
function saveData(data,callback) { function saveData(data,callback) {
var idInput = document.getElementById('node-id'); var idInput = document.getElementById('node-id');
var labelInput = document.getElementById('node-label'); var labelInput = document.getElementById('node-label');
var div = document.getElementById('graph-popUp');
var div = document.getElementById('network-popUp');
data.id = idInput.value; data.id = idInput.value;
data.label = labelInput.value; data.label = labelInput.value;
clearPopUp(); clearPopUp();
@ -204,7 +204,7 @@
</div> </div>
<br /> <br />
<div id="graph-popUp">
<div id="network-popUp">
<span id="operation">node</span> <br> <span id="operation">node</span> <br>
<table style="margin:auto;"><tr> <table style="margin:auto;"><tr>
<td>id</td><td><input id="node-id" value="new value"></td> <td>id</td><td><input id="node-id" value="new value"></td>
@ -216,7 +216,7 @@
<input type="button" value="cancel" id="cancelButton"></button> <input type="button" value="cancel" id="cancelButton"></button>
</div> </div>
<br /> <br />
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p> <p id="selection"></p>
</body> </body>

examples/graph/22_les_miserables.html → examples/network/22_les_miserables.html View File

@ -1,10 +1,10 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph | Multiline text</title>
<title>Network | Multiline text</title>
<style type="text/css"> <style type="text/css">
#mygraph {
#mynetwork {
width: 900px; width: 900px;
height: 900px; height: 900px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -354,20 +354,20 @@
{"from":76,"to":58} {"from":76,"to":58}
]; ];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {nodes: {shape:'circle'},stabilize: false}; var options = {nodes: {shape:'circle'},stabilize: false};
var graph = new vis.Graph(container, data, options);
var network = new vis.Network(container, data, options);
} }
</script> </script>
</head> </head>
<body onload="draw()"> <body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body> </body>
</html> </html>

examples/graph/23_hierarchical_layout.html → examples/network/23_hierarchical_layout.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Random nodes</title>
<title>Network | Random nodes</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt sans; font: 10pt sans;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
@ -38,7 +38,7 @@
connectionCount[i] = 0; connectionCount[i] = 0;
// create edges in a scale-free-graph way
// create edges in a scale-free-network way
if (i == 1) { if (i == 1) {
var from = i; var from = i;
var to = 0; var to = 0;
@ -71,8 +71,8 @@
} }
} }
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -86,10 +86,10 @@
direction: directionInput.value direction: directionInput.value
} }
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners // add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
}); });
} }
@ -98,9 +98,9 @@
</head> </head>
<body onload="draw();"> <body onload="draw();">
<h2>Hierarchical Layout - Scale-Free-Graph</h2>
<h2>Hierarchical Layout - Scale-Free-Network</h2>
<div style="width:700px; font-size:14px;"> <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.
This example shows the randomly generated <b>scale-free-network</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. In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
</div> </div>
<br /> <br />
@ -140,7 +140,7 @@
</script> </script>
<br> <br>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p> <p id="selection"></p>
</body> </body>

examples/graph/24_hierarchical_layout_userdefined.html → examples/network/24_hierarchical_layout_userdefined.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Random nodes</title>
<title>Network | Random nodes</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt sans; font: 10pt sans;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
function draw() { function draw() {
nodes = []; nodes = [];
@ -105,8 +105,8 @@
nodes[14]["level"] = 5; nodes[14]["level"] = 5;
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -115,10 +115,10 @@
var options = { var options = {
hierarchicalLayout:true hierarchicalLayout:true
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners // add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
}); });
} }
@ -132,7 +132,7 @@
</div> </div>
<br /> <br />
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p> <p id="selection"></p>
</body> </body>

examples/graph/25_physics_configuration.html → examples/network/25_physics_configuration.html View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Playing with Physics</title>
<title>Network | Playing with Physics</title>
<style type="text/css"> <style type="text/css">
body { body {
font: 10pt sans; font: 10pt sans;
} }
#mygraph {
#mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
var edges = null; var edges = null;
var graph = null;
var network = null;
function draw() { function draw() {
nodes = []; nodes = [];
@ -36,7 +36,7 @@
connectionCount[i] = 0; connectionCount[i] = 0;
// create edges in a scale-free-graph way
// create edges in a scale-free-network way
if (i == 1) { if (i == 1) {
var from = i; var from = i;
var to = 0; var to = 0;
@ -69,8 +69,8 @@
} }
} }
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = { var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
@ -82,10 +82,10 @@
stabilize: false, stabilize: false,
configurePhysics:true configurePhysics:true
}; };
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners // add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
}); });
} }
@ -96,14 +96,14 @@
<h2>Playing with Physics</h2> <h2>Playing with Physics</h2>
<div style="width: 700px; font-size:14px;"> <div style="width: 700px; font-size:14px;">
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, graph has a special option
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option
that the user can use to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found that the user can use to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
settings you are happy with, you can supply them to graph using the documented physics options.
settings you are happy with, you can supply them to network using the documented physics options.
On start, the default settings will be loaded. Keep in mind that selecting the hierarchical simulation mode <b>disables</b> smooth curves. These will not be enabled again afterwards. On start, the default settings will be loaded. Keep in mind that selecting the hierarchical simulation mode <b>disables</b> smooth curves. These will not be enabled again afterwards.
</div> </div>
<br /> <br />
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p> <p id="selection"></p>
</body> </body>

examples/graph/graphviz/data/fsm.gv.txt → examples/network/graphviz/data/fsm.gv.txt View File


examples/graph/graphviz/data/hello.gv.txt → examples/network/graphviz/data/hello.gv.txt View File


examples/graph/graphviz/data/process.gv.txt → examples/network/graphviz/data/process.gv.txt View File


examples/graph/graphviz/data/siblings.gv.txt → examples/network/graphviz/data/siblings.gv.txt View File


examples/graph/graphviz/data/softmaint.gv.txt → examples/network/graphviz/data/softmaint.gv.txt View File


examples/graph/graphviz/data/traffic_lights.gv.txt → examples/network/graphviz/data/traffic_lights.gv.txt View File


examples/graph/graphviz/data/transparency.gv.txt → examples/network/graphviz/data/transparency.gv.txt View File


examples/graph/graphviz/data/twopi2.gv.txt → examples/network/graphviz/data/twopi2.gv.txt View File


examples/graph/graphviz/data/unix.gv.txt → examples/network/graphviz/data/unix.gv.txt View File


examples/graph/graphviz/data/world.gv.txt → examples/network/graphviz/data/world.gv.txt View File


examples/graph/graphviz/graphviz_gallery.html → examples/network/graphviz/graphviz_gallery.html View File

@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>Graph | Graphviz Gallery</title>
<title>Network | Graphviz Gallery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../../dist/vis.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script>
@ -65,17 +65,17 @@
<script type="text/javascript"> <script type="text/javascript">
var container = document.getElementById('mygraph'); var container = document.getElementById('mygraph');
var url = document.getElementById('url'); var url = document.getElementById('url');
var graph = new vis.Graph(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
var network = new vis.Network(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
function loadData () { function loadData () {
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: url.value url: url.value
}).done(function(data) { }).done(function(data) {
graph.setOptions({
network.setOptions({
stabilize: false stabilize: false
}); });
graph.setData( {
network.setData( {
dot: data dot: data
}); });
}); });

examples/graph/graphviz/screenshots/fsm.png → examples/network/graphviz/screenshots/fsm.png View File


examples/graph/graphviz/screenshots/hello.png → examples/network/graphviz/screenshots/hello.png View File


examples/graph/graphviz/screenshots/softmaint.png → examples/network/graphviz/screenshots/softmaint.png View File


examples/graph/graphviz/screenshots/traffic_lights.png → examples/network/graphviz/screenshots/traffic_lights.png View File


examples/graph/img/refresh-cl/Hardware-Fax-icon.png → examples/network/img/refresh-cl/Hardware-Fax-icon.png View File


examples/graph/img/refresh-cl/Hardware-Laptop-1-icon.png → examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png View File


examples/graph/img/refresh-cl/Hardware-Mobile-Phone-icon.png → examples/network/img/refresh-cl/Hardware-Mobile-Phone-icon.png View File


examples/graph/img/refresh-cl/Hardware-My-Computer-3-icon.png → examples/network/img/refresh-cl/Hardware-My-Computer-3-icon.png View File


examples/graph/img/refresh-cl/Hardware-My-PDA-02-icon.png → examples/network/img/refresh-cl/Hardware-My-PDA-02-icon.png View File


examples/graph/img/refresh-cl/Hardware-My-PDA-04-icon.png → examples/network/img/refresh-cl/Hardware-My-PDA-04-icon.png View File


examples/graph/img/refresh-cl/Hardware-My-PDA-05-icon.png → examples/network/img/refresh-cl/Hardware-My-PDA-05-icon.png View File


examples/graph/img/refresh-cl/Hardware-My-Phone-Picture-icon.png → examples/network/img/refresh-cl/Hardware-My-Phone-Picture-icon.png View File


examples/graph/img/refresh-cl/Hardware-Printer-Blue-icon.png → examples/network/img/refresh-cl/Hardware-Printer-Blue-icon.png View File


examples/graph/img/refresh-cl/Misc-Scanner-default-icon.png → examples/network/img/refresh-cl/Misc-Scanner-default-icon.png View File


examples/graph/img/refresh-cl/Network-Drive-icon.png → examples/network/img/refresh-cl/Network-Drive-icon.png View File


examples/graph/img/refresh-cl/Network-Internet-Connection-icon.png → examples/network/img/refresh-cl/Network-Internet-Connection-icon.png View File


examples/graph/img/refresh-cl/Network-Pipe-icon.png → examples/network/img/refresh-cl/Network-Pipe-icon.png View File


examples/graph/img/refresh-cl/System-Firewall-2-icon.png → examples/network/img/refresh-cl/System-Firewall-2-icon.png View File


examples/graph/img/refresh-cl/System-Globe-icon.png → examples/network/img/refresh-cl/System-Globe-icon.png View File


examples/graph/img/refresh-cl/license.txt → examples/network/img/refresh-cl/license.txt View File


examples/graph/img/soft-scraps-icons/Document-icon24.png → examples/network/img/soft-scraps-icons/Document-icon24.png View File


Some files were not shown because too many files changed in this diff

Loading…
Cancel
Save