|
|
- <!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="../../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.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 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>
|
