diff options
Diffstat (limited to 'www/lib/vis/examples/network/data/dynamicData.html')
| -rw-r--r-- | www/lib/vis/examples/network/data/dynamicData.html | 266 |
1 files changed, 266 insertions, 0 deletions
diff --git a/www/lib/vis/examples/network/data/dynamicData.html b/www/lib/vis/examples/network/data/dynamicData.html new file mode 100644 index 00000000..1c54e34b --- /dev/null +++ b/www/lib/vis/examples/network/data/dynamicData.html @@ -0,0 +1,266 @@ +<!doctype html> +<html> +<head> + <title>Network | DataSet</title> + + <style type="text/css"> + html, body { + font: 11pt arial; + } + + h1 { + font-size: 150%; + margin: 5px 0; + } + + h2 { + font-size: 100%; + margin: 5px 0; + } + + table.view { + width: 100%; + } + + table td { + vertical-align: top; + } + + table table { + background-color: #f5f5f5; + border: 1px solid #e5e5e5; + } + + table table td { + vertical-align: middle; + } + + input[type=text], pre { + border: 1px solid lightgray; + } + + pre { + margin: 0; + padding: 5px; + font-size: 10pt; + } + + #network { + width: 100%; + height: 400px; + border: 1px solid lightgray; + } + </style> + + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> + + <script type="text/javascript"> + var nodes, edges, network; + + // convenience method to stringify a JSON object + function toJSON(obj) { + return JSON.stringify(obj, null, 4); + } + + function addNode() { + try { + nodes.add({ + id: document.getElementById('node-id').value, + label: document.getElementById('node-label').value + }); + } + catch (err) { + alert(err); + } + } + + function updateNode() { + try { + nodes.update({ + id: document.getElementById('node-id').value, + label: document.getElementById('node-label').value + }); + } + catch (err) { + alert(err); + } + } + function removeNode() { + try { + nodes.remove({id: document.getElementById('node-id').value}); + } + catch (err) { + alert(err); + } + } + + function addEdge() { + try { + edges.add({ + id: document.getElementById('edge-id').value, + from: document.getElementById('edge-from').value, + to: document.getElementById('edge-to').value + }); + } + catch (err) { + alert(err); + } + } + function updateEdge() { + try { + edges.update({ + id: document.getElementById('edge-id').value, + from: document.getElementById('edge-from').value, + to: document.getElementById('edge-to').value + }); + } + catch (err) { + alert(err); + } + } + function removeEdge() { + try { + edges.remove({id: document.getElementById('edge-id').value}); + } + catch (err) { + alert(err); + } + } + + function draw() { + // create an array with nodes + nodes = new vis.DataSet(); + nodes.on('*', function () { + document.getElementById('nodes').innerHTML = JSON.stringify(nodes.get(), null, 4); + }); + nodes.add([ + {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 + edges = new vis.DataSet(); + edges.on('*', function () { + document.getElementById('edges').innerHTML = JSON.stringify(edges.get(), null, 4); + }); + edges.add([ + {id: '1', from: '1', to: '2'}, + {id: '2', from: '1', to: '3'}, + {id: '3', from: '2', to: '4'}, + {id: '4', from: '2', to: '5'} + ]); + + // create a network + var container = document.getElementById('network'); + var data = { + nodes: nodes, + edges: edges + }; + var options = {}; + network = new vis.Network(container, data, options); + + } + + </script> + <script src="../../googleAnalytics.js"></script> +</head> + +<body onload="draw();"> + +<p> + This example demonstrates dynamically adding, updating and removing nodes + and edges using a DataSet. +</p> + +<h1>Adjust</h1> +<table> + <tr> + <td> + <h2>Node</h2> + <table> + <tr> + <td></td> + <td><label for="node-id">Id</label></td> + <td><input id="node-id" type="text" value="6"></td> + </tr> + <tr> + <td></td> + <td><label for="node-label">Label</label></td> + <td><input id="node-label" type="text" value="Node 6"></td> + </tr> + <tr> + <td></td> + <td>Action</td> + <td> + <button id="node-add" onclick="addNode();">Add</button> + <button id="node-update" onclick="updateNode();">Update</button> + <button id="node-remove" onclick="removeNode();">Remove</button> + </td> + </tr> + </table> + </td> + <td> + <h2>Edge</h2> + <table> + <tr> + <td></td> + <td><label for="edge-id">Id</label></td> + <td><input id="edge-id" type="text" value="5"></td> + </tr> + <tr> + <td></td> + <td><label for="edge-from">From</label></td> + <td><input id="edge-from" type="text" value="3"></td> + </tr> + <tr> + <td></td> + <td><label for="edge-to">To</label></td> + <td><input id="edge-to" type="text" value="4"></td> + </tr> + <tr> + <td></td> + <td>Action</td> + <td> + <button id="edge-add" onclick="addEdge();">Add</button> + <button id="edge-update" onclick="updateEdge();">Update</button> + <button id="edge-remove" onclick="removeEdge();">Remove</button> + </td> + </tr> + </table> + </td> + </tr> + +</table> + +<h1>View</h1> +<table class="view"> + <colgroup> + <col width="25%"> + <col width="25%"> + <col width="50%"> + </colgroup> + <tr> + <td> + <h2>Nodes</h2> + <pre id="nodes"></pre> + </td> + + <td> + <h2>Edges</h2> + <pre id="edges"></pre> + </td> + + <td> + <h2>Network</h2> + + <div id="network"></div> + </td> + </tr> +</table> + +</body> +</html> |