updated examples for 4.18.1

examples/network/basicUsage.html

@@ -37,7 +37,8 @@
     {from: 1, to: 3},
     {from: 1, to: 2},
     {from: 2, to: 4},
-    {from: 2, to: 5}
+    {from: 2, to: 5},
+    {from: 3, to: 3}
   ]);
 
   // create a network

examples/network/edgeStyles/colors.html

@@ -30,14 +30,14 @@
 <script type="text/javascript">
   // create an array with nodes
   var nodes = new vis.DataSet([
-    {id: 1, label: 1, color:'#97C2FC'},
-    {id: 2, label: 2, color:'#FFFF00'},
-    {id: 3, label: 3, color:'#FB7E81'},
-    {id: 4, label: 4, color:'#7BE141'},
-    {id: 5, label: 5, color:'#6E6EFD'},
-    {id: 6, label: 6, color:'#C2FABC'},
-    {id: 7, label: 7, color:'#FFA807'},
-    {id: 8, label: 8, color:'#6E6EFD'}
+    {id: 1, label: 'node\none', shape: 'box', color:'#97C2FC'},
+    {id: 2, label: 'node\ntwo', shape: 'circle', color:'#FFFF00'},
+    {id: 3, label: 'node\nthree', shape: 'diamond', color:'#FB7E81'},
+    {id: 4, label: 'node\nfour', shape: 'dot', size: 10, color:'#7BE141'},
+    {id: 5, label: 'node\nfive', shape: 'ellipse', color:'#6E6EFD'},
+    {id: 6, label: 'node\nsix', shape: 'star', color:'#C2FABC'},
+    {id: 7, label: 'node\nseven', shape: 'triangle', color:'#FFA807'},
+    {id: 8, label: 'node\neight', shape: 'triangleDown', color:'#6E6EFD'}
   ]);
 
   // create an array with edges
@@ -58,7 +58,11 @@
     nodes: nodes,
     edges: edges
   };
-  var options = {};
+  var options = {
+    nodes: {
+      shape: 'circle'
+    }
+  };
   var network = new vis.Network(container, data, options);
 </script>
 

examples/network/nodeStyles/widthHeight.html

@@ -86,7 +86,7 @@ Whole-set node and edge constraints are exclusive.
     { from: 300, to: 301, label: "more minimum height"},
     { from: 100, to: 400, label: "unconstrained to top valign"},
     { from: 400, to: 401, label: "top valign to middle valign"},
-    { from: 401, to: 402, label: "middle valign to bottom valign"},
+    { from: 401, to: 402, widthConstraint: { maximum: 150 }, label: "middle valign to bottom valign"},
   ];
 
   var container = document.getElementById('mynetwork');
@@ -105,7 +105,10 @@ Whole-set node and edge constraints are exclusive.
     },
     nodes: {
       shape: 'box',
-      margin: 10
+      margin: 10,
+      widthConstraint: {
+        maximum: 200
+      }
     },
     physics: {
       enabled: false

examples/timeline/items/htmlContents.html

@@ -48,7 +48,7 @@
   item5.appendChild(document.createTextNode('item 5'));
   item5.appendChild(document.createElement('br'));
   var img5 = document.createElement('img');
-  img5.src = 'img/attachment-icon.png';
+  img5.src = '../resources/img/attachment-icon.png';
   img5.style.width = '48px';
   img5.style.height = '48px';
   item5.appendChild(img5);
@@ -72,4 +72,4 @@
   var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
-</html>
+</html>

examples/timeline/other/usingReact.html

@@ -93,7 +93,7 @@
                 return ReactDOM.render(<ItemTemplate item={item} />, element);
             },
             groupTemplate: function (group, element) {
-                if (!item) { return }
+                if (!group) { return }
                 ReactDOM.unmountComponentAtNode(element);
                 return ReactDOM.render(<GroupTemplate group={group} />, element);
             }