more buxfixes n doc updates and default value tweaks and example tweaks

docs/network/edges.html

@@ -89,7 +89,7 @@
 
     <p>The options for the edges have to be contained in an object titled 'edges'. All of these options can be supplied per edge as well. Obviously, 'id' should not be defined globally but per edge. Options defined
     in the global edges object, are applied to all edges. If an edge has options of its own, those will be used instead of the global options.</p>
-    <p><b><i>When you have given an edge an option, you will override the global option for that property. If you then set that option to <code>undefined</code> or <code>null</code>,
+    <p><b><i>When you have given an edge an option, you will override the global option for that property. If you then set that option to <code>null</code>,
         it will revert back to the default value.</i></b>
     </p>
     <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
@@ -138,7 +138,7 @@ var options = {
         min: 14,
         max: 30,
         maxVisible: 30,
-        drawThreshold: 3
+        drawThreshold: 6
       },
       customScalingFunction: function (min,max,total,value) {
         if (max === min) {
@@ -480,7 +480,7 @@ var options: {
         <tr parent="scaling" class="hidden">
             <td class="indent2">scaling.label.drawThreshold</td>
             <td>Number</td>
-            <td><code>3</code></td>
+            <td><code>6</code></td>
             <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn.
                 When using font scaling, you can use this together with the maxVisible to first show labels of important
                 edges when zoomed out and only show the rest when zooming in.

docs/network/nodes.html

@@ -80,7 +80,7 @@
     <h3>Options</h3>
     <p>The options for the nodes have to be contained in an object titled 'nodes'. All of these options can be supplied per node as well. Obviously, 'id' should not be defined globally but per node. Options defined
         in the global nodes object, are applied to all nodes. If a node has options of its own, those will be used instead of the global options.</p>
-    <p><b><i>When you have given a node an option, you will override the global option for that property. If you then set that option to <code>undefined</code> or <code>null</code>,
+    <p><b><i>When you have given a node an option, you will override the global option for that property. If you then set that option to <code>null</code>,
         it will revert back to the default value.</i></b>
     </p>
     <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
@@ -143,7 +143,7 @@ var options = {
         min: 14,
         max: 30,
         maxVisible: 30,
-        drawThreshold: 3
+        drawThreshold: 6
       },
       customScalingFunction: function (min,max,total,value) {
         if (max === min) {
@@ -507,7 +507,7 @@ network.setOptions(options);
         <tr parent="scaling" class="hidden">
             <td class="indent2">scaling.label.drawThreshold</td>
             <td>Number</td>
-            <td><code>3</code></td>
+            <td><code>6</code></td>
             <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn.
                 When using font scaling, you can use this together with the maxVisible to first show labels of important
                 nodes when zoomed out and only show the rest when zooming in.

examples/network/categories/02_random_nodes.html

@@ -32,52 +32,7 @@
     function draw() {
       destroy();
 
-      nodes = [];
-      edges = [];
-      var connectionCount = [];
 
-      // randomly create some nodes and edges
-      var nodeCount = document.getElementById('nodeCount').value;
-      for (var i = 0; i < nodeCount; i++) {
-          nodes.push({
-          id: i,
-          label: String(i)
-        });
-
-        connectionCount[i] = 0;
-
-        // create edges in a scale-free-network way
-        if (i == 1) {
-          var from = i;
-          var to = 0;
-          edges.push({
-            from: from,
-            to: to
-          });
-          connectionCount[from]++;
-          connectionCount[to]++;
-        }
-        else if (i > 1) {
-          var conn = edges.length * 2;
-          var rand = Math.floor(Math.random() * conn);
-          var cum = 0;
-          var j = 0;
-          while (j < connectionCount.length && cum < rand) {
-            cum += connectionCount[j];
-            j++;
-          }
-
-
-          var from = i;
-          var to = j;
-          edges.push({
-            from: from,
-            to: to
-          });
-          connectionCount[from]++;
-          connectionCount[to]++;
-        }
-      }
       // create a network
       var container = document.getElementById('mynetwork');
       var data = {

examples/network/categories/data/datasets.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-    <title>Network | Basic usage</title>
+    <title>Network | Dynamic Data</title>
 
     <script type="text/javascript" src="../../../../dist/vis.js"></script>
     <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
@@ -12,47 +12,75 @@
             height: 400px;
             border: 1px solid lightgray;
         }
+
+        p {
+            max-width:600px;
+        }
+
+        h4 {
+            margin-bottom:3px;
+        }
     </style>
 </head>
-<body>
 
 <p>
-    Create a simple network with some nodes and edges.
+    You can change any settings you want while the network is initialized using the vis Dataset, setOptions and setData. Finally you can destroy the network and completely reinitialize it.
 </p>
-<input type="button" onclick="addNode()" value="add node dynamically">
-<input type="button" onclick="changeNode1()" value="change node 1's color dynamically">
-<input type="button" onclick="removeRandomNode()" value="remove a random Node">
+
+<h4>DataSet (change the data while it's loaded and initialzed):</h4>
+<input type="button" onclick="addNode()" value="add node dynamically"> <br />
+<input type="button" onclick="changeNode1()" value="change node 1's color dynamically"> <br />
+<input type="button" onclick="removeRandomNode()" value="remove a random Node"> <br />
+<input type="button" onclick="resetAllNodes()" value="reload all nodes"> <br />
+<input type="button" onclick="resetAllNodesStabilize()" value="reload all nodes and stabilize"> <br />
+
+<h4>setOptions (change the global options):</h4>
+<input type="button" onclick="changeOptions()" value="change the global options"><br />
+
+<h4>setData (reinitialize the data): </h4>
+<input type="button" onclick="setTheData()" value="setData. This stabilizes again if stabilization is true."><br />
+
+<h4>Cleanly destroy the network and restart it:</h4>
+<input type="button" onclick="resetAll()" value="Destroy the network and restart it."><br />
 <div id="mynetwork"></div>
 
 <script type="text/javascript">
-    // this list is kept to remove a random node.. we do not add node 1 here because it's used for changes
-    var nodeIds = [2,3,4,5];
-
-    // create an array with nodes
-    var nodes = new vis.DataSet([
-        {id: 1, label: 'Node 1'},
-        {id: 2, label: 'Node 2'},
-        {id: 3, label: 'Node 3'},
-        {id: 4, label: 'Node 4'},
-        {id: 5, label: 'Node 5'}
-    ]);
-
-    // create an array with edges
-    var edges = new vis.DataSet([
-        {from: 1, to: 3},
-        {from: 1, to: 2},
-        {from: 2, to: 4},
-        {from: 2, to: 5}
-    ]);
-
-    // create a network
-    var container = document.getElementById('mynetwork');
-    var data = {
-        nodes: nodes,
-        edges: edges
-    };
-    var options = {};
-    var network = new vis.Network(container, data, options);
+    var nodeIds, shadowState, nodesArray, nodes, edgesArray, edges, network;
+
+    function startNetwork() {
+        // this list is kept to remove a random node.. we do not add node 1 here because it's used for changes
+        nodeIds = [2, 3, 4, 5];
+        shadowState = false;
+
+
+        // create an array with nodes
+        nodesArray = [
+            {id: 1, label: 'Node 1'},
+            {id: 2, label: 'Node 2'},
+            {id: 3, label: 'Node 3'},
+            {id: 4, label: 'Node 4'},
+            {id: 5, label: 'Node 5'}
+        ];
+        nodes = new vis.DataSet(nodesArray);
+
+        // create an array with edges
+        edgesArray = [
+            {from: 1, to: 3},
+            {from: 1, to: 2},
+            {from: 2, to: 4},
+            {from: 2, to: 5}
+        ];
+        edges = new vis.DataSet(edgesArray);
+
+        // create a network
+        var container = document.getElementById('mynetwork');
+        var data = {
+            nodes: nodes,
+            edges: edges
+        };
+        var options = {};
+        network = new vis.Network(container, data, options);
+    }
 
     function addNode() {
         var newId = (Math.random() * 1e7).toString(32);
@@ -72,6 +100,39 @@
         var index = nodeIds.indexOf(randomNodeId);
         nodeIds.splice(index,1);
     }
+
+    function changeOptions() {
+        shadowState = !shadowState;
+        network.setOptions({nodes:{shadow:shadowState},edges:{shadow:shadowState}});
+    }
+
+    function resetAllNodes() {
+        nodes.clear();
+        edges.clear();
+        nodes.add(nodesArray);
+        edges.add(edgesArray);
+    }
+
+    function resetAllNodesStabilize() {
+        resetAllNodes();
+        network.stabilize();
+    }
+
+    function setTheData() {
+        nodes = new vis.DataSet(nodesArray);
+        edges = new vis.DataSet(edgesArray);
+        network.setData({nodes:nodes, edges:edges})
+    }
+
+    function resetAll() {
+        if (network !== null) {
+            network.destroy();
+            network = null;
+        }
+        startNetwork();
+    }
+
+    startNetwork();
 </script>
 
 <script src="../../../googleAnalytics.js"></script>

examples/network/categories/data/dot_language.html

@@ -2,9 +2,9 @@
 <head>
   <title>Network | DOT Language</title>
 
-  <script type="text/javascript" src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../googleAnalytics.js"></script>
+  <script type="text/javascript" src="../../../../dist/vis.js"></script>
+  <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <script src="../../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>

examples/network/categories/data/dynamic_data.html

@@ -135,7 +135,7 @@
 
       // create an array with nodes
       nodes = new vis.DataSet();
-      nodes.subscribe('*', function () {
+      nodes.on('*', function () {
         $('#nodes').html(toJSON(nodes.get()));
       });
       nodes.add([
@@ -148,7 +148,7 @@
 
       // create an array with edges
       edges = new vis.DataSet();
-      edges.subscribe('*', function () {
+      edges.on('*', function () {
         $('#edges').html(toJSON(edges.get()));
       });
       edges.add([

examples/network/categories/data/importing_from_gephi.html

@@ -4,6 +4,8 @@
 <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF8">
   <title>Dynamic Data - Importing from Gephi (JSON)</title>
+  <script type="text/javascript" src="../../exampleUtil.js"></script>
+
   <script type="text/javascript" src="../../../../dist/vis.js"></script>
   <link type="text/css" rel="stylesheet" href="../../../../dist/vis.css">
 
@@ -92,7 +94,7 @@
 
   var nodeContent = document.getElementById('nodeContent');
 
-  loadJSON('../../data/WorldCup2014.json', redrawAll);
+  loadJSON('../../data/WorldCup2014.json', redrawAll, function(err) {console.log('error')});
 
   var container = document.getElementById('mynetwork');
   var data = {
@@ -127,6 +129,12 @@
   };
 
   network = new vis.Network(container, data, options);
+  network.on('click', function (params) {
+    if (params.nodes.length > 0) {
+      var data = nodes.get(params.nodes[0]); // get the data from selected node
+      nodeContent.innerHTML = JSON.stringify(data, undefined, 3); // show the data in the div
+    }
+  })
 
   /**
    * This function fills the DataSets. These DataSets will update the network.
@@ -154,28 +162,11 @@
     nodes.add(parsed.nodes);
     edges.add(parsed.edges);
 
-    var data = nodes.get(2); // get the data from node 2
+    var data = nodes.get(2); // get the data from node 2 as example
     nodeContent.innerHTML = JSON.stringify(data,undefined,3); // show the data in the div
     network.fit(); // zoom to fit
   }
 
-
-  function loadJSON(path, success, error) {
-    var xhr = new XMLHttpRequest();
-    xhr.onreadystatechange = function () {
-      if (xhr.readyState === 4) {
-        if (xhr.status === 200) {
-          success(JSON.parse(xhr.responseText));
-        }
-        else {
-          error(xhr);
-        }
-      }
-    };
-    xhr.open('GET', path, true);
-    xhr.send();
-  }
-
 </script>
 
 

examples/network/categories/data/scaling_nodes_edges.html

@@ -72,7 +72,7 @@
 </head>
 <body onload="draw()">
 <p>
-  Scale nodes and edges depending on their value. Hover over nodes and edges to get more information.
+  Scale nodes and edges depending on their value. Hover over the edges to get a popup with more information.
 </p>
 <div id="mynetwork"></div>
 </body>

examples/network/exampleUtil.js

@@ -0,0 +1,70 @@
+/**
+ * Created by Alex on 5/20/2015.
+ */
+
+function loadJSON(path, success, error) {
+  var xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      if (xhr.status === 200) {
+        success(JSON.parse(xhr.responseText));
+      }
+      else {
+        error(xhr);
+      }
+    }
+  };
+  xhr.open('GET', path, true);
+  xhr.send();
+}
+
+
+function getScaleFreeNetwork(nodeCount) {
+  var nodes = [];
+  var edges = [];
+  var connectionCount = [];
+
+  // randomly create some nodes and edges
+  for (var i = 0; i < nodeCount; i++) {
+    nodes.push({
+      id: i,
+      label: String(i)
+    });
+
+    connectionCount[i] = 0;
+
+    // create edges in a scale-free-network way
+    if (i == 1) {
+      var from = i;
+      var to = 0;
+      edges.push({
+        from: from,
+        to: to
+      });
+      connectionCount[from]++;
+      connectionCount[to]++;
+    }
+    else if (i > 1) {
+      var conn = edges.length * 2;
+      var rand = Math.floor(Math.random() * conn);
+      var cum = 0;
+      var j = 0;
+      while (j < connectionCount.length && cum < rand) {
+        cum += connectionCount[j];
+        j++;
+      }
+
+
+      var from = i;
+      var to = j;
+      edges.push({
+        from: from,
+        to: to
+      });
+      connectionCount[from]++;
+      connectionCount[to]++;
+    }
+  }
+
+  return {nodes:nodes, edges:edges};
+}

lib/network/modules/EdgesHandler.js

@@ -57,7 +57,7 @@ class EdgesHandler {
           min: 14,
           max: 30,
           maxVisible: 30,
-          drawThreshold: 3
+          drawThreshold: 6
         },
         customScalingFunction: function (min,max,total,value) {
           if (max === min) {

lib/network/modules/NodesHandler.js

@@ -72,7 +72,7 @@ class NodesHandler {
           min: 14,
           max: 30,
           maxVisible: 30,
-          drawThreshold: 3
+          drawThreshold: 6
         },
         customScalingFunction: function (min,max,total,value) {
           if (max === min) {