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

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  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="../../dist/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>