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.

239 lines
7.0 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | Localization</title>
  5. <style type="text/css">
  6. body, select {
  7. font: 10pt sans;
  8. }
  9. #mynetwork {
  10. position:relative;
  11. width: 800px;
  12. height: 600px;
  13. border: 1px solid lightgray;
  14. }
  15. table.legend_table {
  16. font-size: 11px;
  17. border-width:1px;
  18. border-color:#d3d3d3;
  19. border-style:solid;
  20. }
  21. table.legend_table,td {
  22. border-width:1px;
  23. border-color:#d3d3d3;
  24. border-style:solid;
  25. padding: 2px;
  26. }
  27. div.table_content {
  28. width:80px;
  29. text-align:center;
  30. }
  31. div.table_description {
  32. width:100px;
  33. }
  34. #operation {
  35. font-size:28px;
  36. }
  37. #network-popUp {
  38. display:none;
  39. position:absolute;
  40. top:350px;
  41. left:170px;
  42. z-index:299;
  43. width:250px;
  44. height:120px;
  45. background-color: #f9f9f9;
  46. border-style:solid;
  47. border-width:3px;
  48. border-color: #5394ed;
  49. padding:10px;
  50. text-align: center;
  51. }
  52. </style>
  53. <script type="text/javascript" src="../../dist/vis.js"></script>
  54. <link type="text/css" rel="stylesheet" href="../../dist/vis.css">
  55. <script type="text/javascript">
  56. var nodes = null;
  57. var edges = null;
  58. var network = null;
  59. function destroy() {
  60. if (network !== null) {
  61. network.destroy();
  62. network = null;
  63. }
  64. }
  65. function draw() {
  66. destroy();
  67. nodes = [];
  68. edges = [];
  69. var connectionCount = [];
  70. // randomly create some nodes and edges
  71. var nodeCount = 25;
  72. for (var i = 0; i < nodeCount; i++) {
  73. nodes.push({
  74. id: i,
  75. label: String(i)
  76. });
  77. connectionCount[i] = 0;
  78. // create edges in a scale-free-network way
  79. if (i == 1) {
  80. var from = i;
  81. var to = 0;
  82. edges.push({
  83. from: from,
  84. to: to
  85. });
  86. connectionCount[from]++;
  87. connectionCount[to]++;
  88. }
  89. else if (i > 1) {
  90. var conn = edges.length * 2;
  91. var rand = Math.floor(Math.random() * conn);
  92. var cum = 0;
  93. var j = 0;
  94. while (j < connectionCount.length && cum < rand) {
  95. cum += connectionCount[j];
  96. j++;
  97. }
  98. var from = i;
  99. var to = j;
  100. edges.push({
  101. from: from,
  102. to: to
  103. });
  104. connectionCount[from]++;
  105. connectionCount[to]++;
  106. }
  107. }
  108. // create a network
  109. var container = document.getElementById('mynetwork');
  110. var data = {
  111. nodes: nodes,
  112. edges: edges
  113. };
  114. var options = {
  115. stabilize: false,
  116. dataManipulation: true,
  117. onAdd: function(data,callback) {
  118. var span = document.getElementById('operation');
  119. var idInput = document.getElementById('node-id');
  120. var labelInput = document.getElementById('node-label');
  121. var saveButton = document.getElementById('saveButton');
  122. var cancelButton = document.getElementById('cancelButton');
  123. var div = document.getElementById('network-popUp');
  124. span.innerHTML = "Add Node";
  125. idInput.value = data.id;
  126. labelInput.value = data.label;
  127. saveButton.onclick = saveData.bind(this,data,callback);
  128. cancelButton.onclick = clearPopUp.bind();
  129. div.style.display = 'block';
  130. },
  131. onEdit: function(data,callback) {
  132. var span = document.getElementById('operation');
  133. var idInput = document.getElementById('node-id');
  134. var labelInput = document.getElementById('node-label');
  135. var saveButton = document.getElementById('saveButton');
  136. var cancelButton = document.getElementById('cancelButton');
  137. var div = document.getElementById('network-popUp');
  138. span.innerHTML = "Edit Node";
  139. idInput.value = data.id;
  140. labelInput.value = data.label;
  141. saveButton.onclick = saveData.bind(this,data,callback);
  142. cancelButton.onclick = clearPopUp.bind();
  143. div.style.display = 'block';
  144. },
  145. onConnect: function(data,callback) {
  146. if (data.from == data.to) {
  147. var r=confirm("Do you want to connect the node to itself?");
  148. if (r==true) {
  149. callback(data);
  150. }
  151. }
  152. else {
  153. callback(data);
  154. }
  155. }
  156. };
  157. network = new vis.Network(container, data, options);
  158. // add event listeners
  159. network.on('select', function(params) {
  160. document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
  161. });
  162. network.on("resize", function(params) {console.log(params.width,params.height)});
  163. function clearPopUp() {
  164. var saveButton = document.getElementById('saveButton');
  165. var cancelButton = document.getElementById('cancelButton');
  166. saveButton.onclick = null;
  167. cancelButton.onclick = null;
  168. var div = document.getElementById('network-popUp');
  169. div.style.display = 'none';
  170. }
  171. function saveData(data,callback) {
  172. var idInput = document.getElementById('node-id');
  173. var labelInput = document.getElementById('node-label');
  174. var div = document.getElementById('network-popUp');
  175. data.id = idInput.value;
  176. data.label = labelInput.value;
  177. clearPopUp();
  178. callback(data);
  179. }
  180. // update the locale when changing the select box value
  181. var select = document.getElementById('locale');
  182. select.onchange = function () {
  183. network.setOptions({
  184. locale: this.value
  185. });
  186. };
  187. select.onchange();
  188. }
  189. </script>
  190. <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>
  191. <body onload="draw();">
  192. <h2>Editing the dataset (localized)</h2>
  193. <p style="width: 700px; font-size:14px; text-align: justify;">
  194. This is the same example as <a href="21_data_manipulation.html">21_data_manipulation.html</a>, except that there is a select box added which allows to switch locale. The localization is only relevant to the manipulation buttons.
  195. </p>
  196. <p>
  197. <label for="locale">Select a locale:</label>
  198. <select id="locale">
  199. <option value="en" selected>en</option>
  200. <option value="nl">nl</option>
  201. </select>
  202. </p>
  203. <div id="network-popUp">
  204. <span id="operation">node</span> <br>
  205. <table style="margin:auto;"><tr>
  206. <td>id</td><td><input id="node-id" value="new value"></td>
  207. </tr>
  208. <tr>
  209. <td>label</td><td><input id="node-label" value="new value"> </td>
  210. </tr></table>
  211. <input type="button" value="save" id="saveButton"></button>
  212. <input type="button" value="cancel" id="cancelButton"></button>
  213. </div>
  214. <br />
  215. <div id="mynetwork"></div>
  216. <p id="selection"></p>
  217. </body>
  218. </html>