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.

160 lines
5.5 KiB

  1. <!DOCTYPE html>
  2. <!-- saved from url=(0046)http://visjs.org/examples/network/03_images.html -->
  3. <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  4. <title>Network | Images</title>
  5. <style type="text/css">
  6. html, body {
  7. font: 10pt arial;
  8. padding: 0;
  9. margin: 0;
  10. width: 100%;
  11. height: 100%;
  12. }
  13. #mynetwork {
  14. width: 100%;
  15. height: 100%;
  16. }
  17. </style>
  18. <script type="text/javascript" src="../../dist/vis.js"></script>
  19. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  20. <script type="text/javascript">
  21. var nodes = null;
  22. var edges = null;
  23. var network = null;
  24. var LENGTH_MAIN = 350,
  25. LENGTH_SERVER = 150,
  26. LENGTH_SUB = 50,
  27. WIDTH_SCALE = 2,
  28. GREEN = 'green',
  29. RED = '#C5000B',
  30. ORANGE = 'orange',
  31. //GRAY = '#666666',
  32. GRAY = 'gray',
  33. BLACK = '#2B1B17';
  34. // Called when the Visualization API is loaded.
  35. function draw() {
  36. // Create a data table with nodes.
  37. nodes = [];
  38. // Create a data table with links.
  39. edges = [];
  40. nodes.push({id: 1, label: '192.168.0.1', group: 'switch', value: 10});
  41. nodes.push({id: 2, label: '192.168.0.2', group: 'switch', value: 8});
  42. nodes.push({id: 3, label: '192.168.0.3', group: 'switch', value: 6});
  43. edges.push({from: 1, to: 2, length: LENGTH_MAIN, width: WIDTH_SCALE * 6, label: '0.71 mbps'});
  44. edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: WIDTH_SCALE * 4, label: '0.55 mbps'});
  45. // group around 2
  46. for (var i = 100; i <= 104; i++) {
  47. var value = 1;
  48. var width = WIDTH_SCALE * 2;
  49. var color = GRAY;
  50. var label = null;
  51. if (i === 103) {
  52. value = 5;
  53. width = 3;
  54. }
  55. if (i === 102) {
  56. color = RED;
  57. label = 'error';
  58. }
  59. nodes.push({id: i, label: '192.168.0.' + i, group: 'desktop', value: value});
  60. edges.push({from: 2, to: i, length: LENGTH_SUB, color: color, fontColor: color, width: width, label: label});
  61. }
  62. nodes.push({id: 201, label: '192.168.0.201', group: 'desktop', value: 1});
  63. edges.push({from: 2, to: 201, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE});
  64. // group around 3
  65. nodes.push({id: 202, label: '192.168.0.202', group: 'desktop', value: 4});
  66. edges.push({from: 3, to: 202, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE * 2});
  67. for (var i = 230; i <= 231; i++ ) {
  68. nodes.push({id: i, label: '192.168.0.' + i, group: 'mobile', value: 2});
  69. edges.push({from: 3, to: i, length: LENGTH_SUB, color: GRAY, fontColor: GRAY, width: WIDTH_SCALE});
  70. }
  71. // group around 1
  72. nodes.push({id: 10, label: '192.168.0.10', group: 'server', value: 10});
  73. edges.push({from: 1, to: 10, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 6, label: '0.92 mbps'});
  74. nodes.push({id: 11, label: '192.168.0.11', group: 'server', value: 7});
  75. edges.push({from: 1, to: 11, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 3, label: '0.68 mbps'});
  76. nodes.push({id: 12, label: '192.168.0.12', group: 'server', value: 3});
  77. edges.push({from: 1, to: 12, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE, label: '0.3 mbps'});
  78. nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10});
  79. edges.push({from: 1, to: 204, length: 200, width: WIDTH_SCALE * 3, label: '0.63 mbps'});
  80. // legend
  81. var mynetwork = document.getElementById('mynetwork');
  82. var x = - mynetwork.clientWidth / 2 + 50;
  83. var y = - mynetwork.clientHeight / 2 + 50;
  84. var step = 70;
  85. nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1, fixed: true, physics:false});
  86. nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1, fixed: true, physics:false});
  87. nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1, fixed: true, physics:false});
  88. nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, fixed: true, physics:false});
  89. nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, fixed: true, physics:false});
  90. // create a network
  91. var container = document.getElementById('mynetwork');
  92. var data = {
  93. nodes: nodes,
  94. edges: edges
  95. };
  96. var options = {
  97. nodes: {
  98. scaling: {
  99. min: 16,
  100. max: 32
  101. },
  102. font: {
  103. color: BLACK
  104. }
  105. },
  106. edges: {
  107. color: GRAY
  108. },
  109. groups: {
  110. 'switch': {
  111. shape: 'triangle',
  112. color: '#FF9900' // orange
  113. },
  114. desktop: {
  115. shape: 'dot',
  116. color: "#2B7CE9" // blue
  117. },
  118. mobile: {
  119. shape: 'dot',
  120. color: "#5A1E5C" // purple
  121. },
  122. server: {
  123. shape: 'square',
  124. color: "#C5000B" // red
  125. },
  126. internet: {
  127. shape: 'square',
  128. color: "#109618" // green
  129. }
  130. }
  131. };
  132. network = new vis.Network(container, data, options);
  133. }
  134. </script>
  135. <script src="../googleAnalytics.js"></script>
  136. </head>
  137. <body onload="draw()">
  138. <div id="mynetwork"><div class="network-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>
  139. </body></html>