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.

203 lines
4.3 KiB

11 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. </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, data;
  76. var btnDraw = document.getElementById('draw');
  77. var txtData = document.getElementById('data');
  78. var txtError = document.getElementById('error');
  79. btnDraw.onclick = draw;
  80. // resize the network when window resizes
  81. window.onresize = function () {
  82. network.redraw()
  83. };
  84. // parse and draw the data
  85. function draw () {
  86. try {
  87. txtError.innerHTML = '';
  88. // Provide a string with data in DOT language
  89. data = {
  90. dot: txtData.value
  91. };
  92. // create a network
  93. var container = document.getElementById('mynetwork');
  94. var options = {};
  95. network = new vis.Network(container, data, options);
  96. }
  97. catch (err) {
  98. // set the cursor at the position where the error occurred
  99. var match = /\(char (.*)\)/.exec(err);
  100. if (match) {
  101. var pos = Number(match[1]);
  102. if(txtData.setSelectionRange) {
  103. txtData.focus();
  104. txtData.setSelectionRange(pos, pos);
  105. }
  106. }
  107. // show an error message
  108. txtError.innerHTML = err.toString();
  109. }
  110. }
  111. /**
  112. * Draw an example
  113. * @param {String} id HTML id of the textarea containing the example code
  114. */
  115. function drawExample(id) {
  116. txtData.value = document.getElementById(id).value;
  117. draw();
  118. }
  119. </script>
  120. <textarea id="example1" class="example">
  121. digraph {
  122. node [shape=circle fontSize=16]
  123. edge [length=100, color=gray, fontColor=black]
  124. A -> A[label=0.5];
  125. B -> B[label=1.2] -> C[label=0.7] -- A;
  126. B -> D;
  127. D -> {B; C}
  128. D -> E[label=0.2];
  129. F -> F;
  130. A [
  131. fontColor=white,
  132. color=red,
  133. ]
  134. }
  135. </textarea>
  136. <textarea id="example2" class="example">
  137. digraph topology
  138. {
  139. node[shape=circle fontSize=12]
  140. edge[length=170 fontSize=12]
  141. "10.0.255.1" -> "10.0.255.3"[label="1.000"];
  142. "10.0.255.1" -> "10.0.255.2"[label="1.000"];
  143. "10.0.255.1" -> "10.0.255.2"[label="1.000"];
  144. "10.0.255.1" -> "10.0.255.3"[label="1.000"];
  145. "10.0.255.2" -> "10.0.255.1"[label="1.000"];
  146. "10.0.255.2" -> "10.0.255.3"[label="1.000"];
  147. "10.0.255.3" -> "10.0.255.1"[label="1.000"];
  148. "10.0.255.3" -> "10.0.255.2"[label="1.000"];
  149. "10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
  150. "10.0.3.0/24"[shape=box];
  151. "10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
  152. "10.0.2.0/24"[shape=box];
  153. "10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
  154. "10.0.1.0/24"[shape=box];
  155. }
  156. </textarea>
  157. <textarea id="example3" class="example">
  158. digraph G {
  159. // note: not all attributes are recognized and supported by Network
  160. // unrecognized attributes are ignored
  161. node[width=.25,height=.375,fontsize=15]
  162. node [shape=filled fillcolor=#F1AAF0]
  163. 0-> 0 ;
  164. 1-> 1 ;
  165. 2-> 2 ;
  166. 3-> 3 ;
  167. 4-> 4 ;
  168. 5-> 5 ;
  169. 6-> 6 ;
  170. 7-> 5 ;
  171. 8-> 8 ;
  172. 9-> 9 ;
  173. 10-> 10 ;
  174. 11-> 10 ;
  175. 12-> 12 ;
  176. 13-> 5 ;
  177. 14-> 10 ;
  178. 15-> 0 ;
  179. }
  180. </textarea>
  181. </body>
  182. </html>