jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git

<!doctype html><html><head>  <title>Graph | 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;    }
    #graph {      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>
  <script type="text/javascript">    var nodes, edges, graph;
    // 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.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.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'}      ]);

    // subscribe to any changes of the dataset    nodes.on('*', function () {        $('#nodes').html(toJSON(nodes.get()));    });    edges.on('*', function () {        $('#edges').html(toJSON(edges.get()));    });

        // create a graph      var container = $('#graph').get(0);      var data = {        nodes: nodes,        edges: edges      };      var options = {};      graph = new vis.Graph(container, data, options);    });  </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>Graph</h2>      <div id="graph"></div>    </td>  </tr></table>
</body></html>