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.

212 lines
4.9 KiB

9 years ago
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | DOT language playground</title>
  5. <script type="text/javascript" src="../../dist/vis.js"></script>
  6. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  7. <style type="text/css">
  8. body, html {
  9. font: 10pt sans;
  10. width: 100%;
  11. height: 100%;
  12. padding: 0;
  13. margin: 0;
  14. color: #4d4d4d;
  15. }
  16. #frame {
  17. width: 100%;
  18. height: 99%;
  19. }
  20. #frame td {
  21. padding: 10px;
  22. height: 100%;
  23. }
  24. #error {
  25. color: red;
  26. }
  27. #data {
  28. width: 100%;
  29. height: 100%;
  30. border: 1px solid #d3d3d3;
  31. }
  32. #mynetwork {
  33. float: left;
  34. width: 100%;
  35. height: 100%;
  36. border: 1px solid #d3d3d3;
  37. box-sizing: border-box;
  38. -moz-box-sizing: border-box;
  39. overflow: hidden;
  40. }
  41. textarea.example {
  42. display: none;
  43. }
  44. </style>
  45. <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>
  46. <body onload="drawExample('example1')">
  47. <table id="frame">
  48. <col width="50%">
  49. <col width="50%">
  50. <tr>
  51. <td colspan="2" style="height: 50px;">
  52. <h1>DOT language playground</h1>
  53. <div>
  54. <a href="javascript: drawExample('example1')">example 1</a>
  55. <a href="javascript: drawExample('example2')">example 2</a>
  56. <a href="javascript: drawExample('example3')">example 3</a>
  57. </div>
  58. <div>
  59. <br>
  60. <button id="draw">Draw</button>
  61. <span id="error"></span>
  62. </div>
  63. </td>
  64. </tr>
  65. <tr>
  66. <td>
  67. <textarea id="data"></textarea>
  68. </td>
  69. <td>
  70. <div id="mynetwork"></div>
  71. </td>
  72. </tr>
  73. </table>
  74. <script type="text/javascript">
  75. var network = null;
  76. var data = null;
  77. var btnDraw = document.getElementById('draw');
  78. var txtData = document.getElementById('data');
  79. var txtError = document.getElementById('error');
  80. btnDraw.onclick = draw;
  81. // resize the network when window resizes
  82. window.onresize = function () {
  83. network.redraw()
  84. };
  85. function destroy() {
  86. if (network !== null) {
  87. network.destroy();
  88. network = null;
  89. }
  90. }
  91. // parse and draw the data
  92. function draw () {
  93. destroy();
  94. try {
  95. txtError.innerHTML = '';
  96. // Provide a string with data in DOT language
  97. data = {
  98. dot: txtData.value
  99. };
  100. // create a network
  101. var container = document.getElementById('mynetwork');
  102. var options = {};
  103. network = new vis.Network(container, data, options);
  104. }
  105. catch (err) {
  106. // set the cursor at the position where the error occurred
  107. var match = /\(char (.*)\)/.exec(err);
  108. if (match) {
  109. var pos = Number(match[1]);
  110. if(txtData.setSelectionRange) {
  111. txtData.focus();
  112. txtData.setSelectionRange(pos, pos);
  113. }
  114. }
  115. // show an error message
  116. txtError.innerHTML = err.toString();
  117. }
  118. }
  119. /**
  120. * Draw an example
  121. * @param {String} id HTML id of the textarea containing the example code
  122. */
  123. function drawExample(id) {
  124. txtData.value = document.getElementById(id).value;
  125. draw();
  126. }
  127. </script>
  128. <textarea id="example1" class="example">
  129. digraph {
  130. node [shape=circle fontSize=16]
  131. edge [length=100, color=gray, fontColor=black]
  132. A -> A[label=0.5];
  133. B -> B[label=1.2] -> C[label=0.7] -- A;
  134. B -> D;
  135. D -> {B; C}
  136. D -> E[label=0.2];
  137. F -> F;
  138. A [
  139. fontColor=white,
  140. color=red,
  141. ]
  142. }
  143. </textarea>
  144. <textarea id="example2" class="example">
  145. digraph topology
  146. {
  147. node[shape=circle fontSize=12]
  148. edge[length=170 fontSize=12]
  149. "10.0.255.1" -> "10.0.255.3"[label="1.000"];
  150. "10.0.255.1" -> "10.0.255.2"[label="1.000"];
  151. "10.0.255.1" -> "10.0.255.2"[label="1.000"];
  152. "10.0.255.1" -> "10.0.255.3"[label="1.000"];
  153. "10.0.255.2" -> "10.0.255.1"[label="1.000"];
  154. "10.0.255.2" -> "10.0.255.3"[label="1.000"];
  155. "10.0.255.3" -> "10.0.255.1"[label="1.000"];
  156. "10.0.255.3" -> "10.0.255.2"[label="1.000"];
  157. "10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
  158. "10.0.3.0/24"[shape=box];
  159. "10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
  160. "10.0.2.0/24"[shape=box];
  161. "10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
  162. "10.0.1.0/24"[shape=box];
  163. }
  164. </textarea>
  165. <textarea id="example3" class="example">
  166. digraph G {
  167. // note: not all attributes are recognized and supported by Network
  168. // unrecognized attributes are ignored
  169. node[width=.25,height=.375,fontsize=15]
  170. node [shape=filled fillcolor=#F1AAF0]
  171. 0-> 0 ;
  172. 1-> 1 ;
  173. 2-> 2 ;
  174. 3-> 3 ;
  175. 4-> 4 ;
  176. 5-> 5 ;
  177. 6-> 6 ;
  178. 7-> 5 ;
  179. 8-> 8 ;
  180. 9-> 9 ;
  181. 10-> 10 ;
  182. 11-> 10 ;
  183. 12-> 12 ;
  184. 13-> 5 ;
  185. 14-> 10 ;
  186. 15-> 0 ;
  187. }
  188. </textarea>
  189. </body>
  190. </html>