vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

265 lines
5.5 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Graph | DataSet</title>
  5. <style type="text/css">
  6. html, body {
  7. font: 11pt arial;
  8. }
  9. h1 {
  10. font-size: 150%;
  11. margin: 5px 0;
  12. }
  13. h2 {
  14. font-size: 100%;
  15. margin: 5px 0;
  16. }
  17. table.view {
  18. width: 100%;
  19. }
  20. table td {
  21. vertical-align: top;
  22. }
  23. table table {
  24. background-color: #f5f5f5;
  25. border: 1px solid #e5e5e5;
  26. }
  27. table table td {
  28. vertical-align: middle;
  29. }
  30. input[type=text], pre {
  31. border: 1px solid lightgray;
  32. }
  33. pre {
  34. margin: 0;
  35. padding: 5px;
  36. font-size: 10pt;
  37. }
  38. #graph {
  39. width: 100%;
  40. height: 400px;
  41. border: 1px solid lightgray;
  42. }
  43. </style>
  44. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  45. <script type="text/javascript" src="../../vis.js"></script>
  46. <script type="text/javascript">
  47. var nodes, edges, graph;
  48. // convenience method to stringify a JSON object
  49. function toJSON (obj) {
  50. return JSON.stringify(obj, null, 4);
  51. }
  52. $(window).load(function () {
  53. // attach actions to the node buttons
  54. $('#node-add').click(function () {
  55. try {
  56. nodes.add({
  57. id: $('#node-id').val(),
  58. label: $('#node-label').val()
  59. });
  60. }
  61. catch (err) {
  62. alert(err);
  63. }
  64. });
  65. $('#node-update').click(function () {
  66. try {
  67. nodes.update({
  68. id: $('#node-id').val(),
  69. label: $('#node-label').val()
  70. });
  71. }
  72. catch (err) {
  73. alert(err);
  74. }
  75. });
  76. $('#node-remove').click(function () {
  77. try {
  78. var id = $('#node-id').val();
  79. nodes.remove(id);
  80. }
  81. catch (err) {
  82. alert(err);
  83. }
  84. });
  85. // attach actions to the edge buttons
  86. $('#edge-add').click(function () {
  87. try {
  88. edges.add({
  89. id: $('#edge-id').val(),
  90. from: $('#edge-from').val(),
  91. to: $('#edge-to').val()
  92. });
  93. }
  94. catch (err) {
  95. alert(err);
  96. }
  97. });
  98. $('#edge-update').click(function () {
  99. try {
  100. edges.update({
  101. id: $('#edge-id').val(),
  102. from: $('#edge-from').val(),
  103. to: $('#edge-to').val()
  104. });
  105. }
  106. catch (err) {
  107. alert(err);
  108. }
  109. });
  110. $('#edge-remove').click(function () {
  111. try {
  112. var id = $('#edge-id').val();
  113. edges.remove(id);
  114. }
  115. catch (err) {
  116. alert(err);
  117. }
  118. });
  119. // create an array with nodes
  120. nodes = new vis.DataSet();
  121. nodes.subscribe('*', function () {
  122. $('#nodes').html(toJSON(nodes.get()));
  123. });
  124. nodes.add([
  125. {id: '1', label: 'Node 1'},
  126. {id: '2', label: 'Node 2'},
  127. {id: '3', label: 'Node 3'},
  128. {id: '4', label: 'Node 4'},
  129. {id: '5', label: 'Node 5'}
  130. ]);
  131. // create an array with edges
  132. edges = new vis.DataSet();
  133. edges.subscribe('*', function () {
  134. $('#edges').html(toJSON(edges.get()));
  135. });
  136. edges.add([
  137. {id: '1', from: '1', to: '2'},
  138. {id: '2', from: '1', to: '3'},
  139. {id: '3', from: '2', to: '4'},
  140. {id: '4', from: '2', to: '5'}
  141. ]);
  142. // create a graph
  143. var container = $('#graph').get(0);
  144. var data = {
  145. nodes: nodes,
  146. edges: edges
  147. };
  148. var options = {};
  149. graph = new vis.Graph(container, data, options);
  150. });
  151. </script>
  152. </head>
  153. <body>
  154. <p>
  155. This example demonstrates dynamically adding, updating and removing nodes
  156. and edges using a DataSet.
  157. </p>
  158. <h1>Adjust</h1>
  159. <table>
  160. <tr>
  161. <td>
  162. <h2>Node</h2>
  163. <table>
  164. <tr>
  165. <td></td>
  166. <td><label for="node-id">Id</label></td>
  167. <td><input id="node-id" type="text" value="6"></td>
  168. </tr>
  169. <tr>
  170. <td></td>
  171. <td><label for="node-label">Label</label></td>
  172. <td><input id="node-label" type="text" value="Node 6"></td>
  173. </tr>
  174. <tr>
  175. <td></td>
  176. <td>Action</td>
  177. <td>
  178. <button id="node-add">Add</button>
  179. <button id="node-update">Update</button>
  180. <button id="node-remove">Remove</button>
  181. </td>
  182. </tr>
  183. </table>
  184. </td>
  185. <td>
  186. <h2>Edge</h2>
  187. <table>
  188. <tr>
  189. <td></td>
  190. <td><label for="edge-id">Id</label></td>
  191. <td><input id="edge-id" type="text" value="5"></td>
  192. </tr>
  193. <tr>
  194. <td></td>
  195. <td><label for="edge-from">From</label></td>
  196. <td><input id="edge-from" type="text" value="3"></td>
  197. </tr>
  198. <tr>
  199. <td></td>
  200. <td><label for="edge-to">To</label></td>
  201. <td><input id="edge-to" type="text" value="4"></td>
  202. </tr>
  203. <tr>
  204. <td></td>
  205. <td>Action</td>
  206. <td>
  207. <button id="edge-add">Add</button>
  208. <button id="edge-update">Update</button>
  209. <button id="edge-remove">Remove</button>
  210. </td>
  211. </tr>
  212. </table>
  213. </td>
  214. </tr>
  215. </table>
  216. <h1>View</h1>
  217. <table class="view">
  218. <colgroup>
  219. <col width="25%">
  220. <col width="25%">
  221. <col width="50%">
  222. </colgroup>
  223. <tr>
  224. <td>
  225. <h2>Nodes</h2>
  226. <pre id="nodes"></pre>
  227. </td>
  228. <td>
  229. <h2>Edges</h2>
  230. <pre id="edges"></pre>
  231. </td>
  232. <td>
  233. <h2>Graph</h2>
  234. <div id="graph"></div>
  235. </td>
  236. </tr>
  237. </table>
  238. </body>
  239. </html>