Merge pull request #38 from visjs-community/micah/31/examples-js-in-j…

…s-files micah/31/examples js in js files
visjs-community · Sep 7, 2018 · 9b6f6cb · 9b6f6cb
2 parents 0e0918e + b952b27
commit 9b6f6cb
Show file tree

Hide file tree

Showing 207 changed files with 9,354 additions and 8,584 deletions.
diff --git a/examples/basicUsage.html b/examples/basicUsage.html
diff --git a/examples/basicUsage/index.html b/examples/basicUsage/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Basic usage</title>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+  </style>
+</head>
+<body>
+  <p>
+    Create a simple network with some nodes and edges.
+  </p>
+  <div id="mynetwork"></div>
+  <script src="./index.js" type="text/javascript"></script>
+</body>
+</html>
diff --git a/examples/basicUsage/index.js b/examples/basicUsage/index.js
@@ -0,0 +1,28 @@
+/* global vis */
+
+// 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 },
+  { from: 3, to: 3 }
+])
+
+// create a network
+var container = document.getElementById('mynetwork')
+var data = {
+  nodes: nodes,
+  edges: edges
+}
+var options = {}
+new vis.Network(container, data, options)
diff --git a/examples/data/datasets.html b/examples/data/datasets.html
diff --git a/examples/data/datasets/index.html b/examples/data/datasets/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Dynamic Data</title>
+  <script type='text/javascript' src='../../../dist/vis.js'></script>
+  <link href='../../../dist/vis-network.min.css' rel='stylesheet' type='text/css' />
+  <style type='text/css'>
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+    p {
+      max-width:600px;
+    }
+    h4 {
+      margin-bottom:3px;
+    }
+  </style>
+</head>
+<body>
+  <p>
+      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>
+  <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 src='./index.js' type='text/javascript'></script>
+</body>
+</html>
diff --git a/examples/data/datasets/index.js b/examples/data/datasets/index.js
@@ -0,0 +1,107 @@
+/* global vis */
+var nodeIds, shadowState, nodesArray, nodes, edgesArray, edges, network
+
+// eslint-disable-next-line require-jsdoc
+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 = {}
+  new vis.Network(container, data, options)
+}
+
+/* eslint-disable */
+function addNode() {
+  /* eslint-enable */
+  var newId = (Math.random() * 1e7).toString(32)
+  nodes.add({ id: newId, label: "I'm new!" })
+  nodeIds.push(newId)
+}
+
+/* eslint-disable */
+function changeNode1() {
+  /* eslint-enable */
+  var newColor = '#' + Math.floor(Math.random() * 255 * 255 * 255).toString(16)
+  nodes.update([{ id: 1, color: { background: newColor } }])
+}
+
+/* eslint-disable */
+function removeRandomNode() {
+  /* eslint-enable */
+  var randomNodeId = nodeIds[Math.floor(Math.random() * nodeIds.length)]
+  nodes.remove({ id: randomNodeId })
+
+  var index = nodeIds.indexOf(randomNodeId)
+  nodeIds.splice(index, 1)
+}
+
+/* eslint-disable */
+function changeOptions() {
+  /* eslint-enable */
+  shadowState = !shadowState
+  network.setOptions({
+    nodes: { shadow: shadowState },
+    edges: { shadow: shadowState }
+  })
+}
+
+// eslint-disable-next-line require-jsdoc
+function resetAllNodes() {
+  nodes.clear()
+  edges.clear()
+  nodes.add(nodesArray)
+  edges.add(edgesArray)
+}
+
+/* eslint-disable */
+function resetAllNodesStabilize() {
+  /* eslint-enable */
+  resetAllNodes()
+  network.stabilize()
+}
+
+/* eslint-disable */
+function setTheData() {
+  /* eslint-enable */
+  nodes = new vis.DataSet(nodesArray)
+  edges = new vis.DataSet(edgesArray)
+  network.setData({ nodes: nodes, edges: edges })
+}
+
+/* eslint-disable */
+function resetAll() {
+  /* eslint-enable */
+  if (network !== null) {
+    network.destroy()
+    network = null
+  }
+  startNetwork()
+}
+
+startNetwork()