<!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>