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.

202 lines
4.3 KiB

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