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.

266 lines
6.0 KiB

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