<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript" src="../../dist/vis.js"></script> <link href="../../dist/vis.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); } $(window).load(function () { // attach actions to the node buttons $('#node-add').click(function () { try { nodes.add({ id: $('#node-id').val(), label: $('#node-label').val() }); } catch (err) { alert(err); } }); $('#node-update').click(function () { try { nodes.update({ id: $('#node-id').val(), label: $('#node-label').val() }); } catch (err) { alert(err); } }); $('#node-remove').click(function () { try { var id = $('#node-id').val(); nodes.remove(id); } catch (err) { alert(err); } }); // attach actions to the edge buttons $('#edge-add').click(function () { try { edges.add({ id: $('#edge-id').val(), from: $('#edge-from').val(), to: $('#edge-to').val() }); } catch (err) { alert(err); } }); $('#edge-update').click(function () { try { edges.update({ id: $('#edge-id').val(), from: $('#edge-from').val(), to: $('#edge-to').val() }); } catch (err) { alert(err); } }); $('#edge-remove').click(function () { try { var id = $('#edge-id').val(); edges.remove(id); } catch (err) { alert(err); } }); // create an array with nodes nodes = new vis.DataSet(); nodes.subscribe('*', function () { $('#nodes').html(toJSON(nodes.get())); }); 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.subscribe('*', function () { $('#edges').html(toJSON(edges.get())); }); 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 = $('#network').get(0); var data = { nodes: nodes, edges: edges }; var options = {}; network = new vis.Network(container, data, options); }); </script> <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head> <body> <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">Add</button> <button id="node-update">Update</button> <button id="node-remove">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">Add</button> <button id="edge-update">Update</button> <button id="edge-remove">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>