jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
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.
942 Commits
33 Branches
1.5 GiB
Tree: 5d4044f988
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '5d4044f988'
${ noResults }
jrtechs-vis/examples/network/ex.html

128 lines
4.0 KiB
Raw Normal View History

Fixed physics stopping conditions, updated history #255
10 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>Network | Basic usage</title>
  5. 

  6.     <script type="text/javascript" src="../../dist/vis.js"></script>
  7. 

  8.     <style type="text/css">
  9.         #mynetwork {
  10.             width: 400px;
  11.             height: 400px;
  12.             border: 1px solid lightgray;
  13.         }
  14.     </style>
  15. </head>
  16. 

  17. <body>
  18. 

  19. <div id="tabs-2"></div>
  20. 

  21. <script type="text/javascript">
  22.     function drawNetwork() {
  23.         var nodes = null;
  24.         var edges = null;
  25.         var network = null;
  26. 

  27.         var LENGTH_MAIN = 350,
  28.                 WIDTH_SCALE = 2,
  29.                 GRAY = 'gray',
  30.                 BLACK = '#2B1B17';
  31. 

  32.         function draw() {
  33.             nodes = [];
  34.             edges = [];
  35.             var parentDeviceName = "Windows Host";
  36.             var parentName = "john";
  37.             var parentId = 1;
  38. 

  39.             if (parentDeviceName == "Windows Host") {
  40.                 group = 'windowsHost';
  41.             } else if (parentDeviceName == "Sun Host") {
  42.                 group = 'sunHost';
  43.             } else if (parentDeviceName == "Net-SNMP Linux") {
  44.                 group = 'linuxHost';
  45.             } else if (parentDeviceName == "Cisco 2901 K9") {
  46.                 group = 'router';
  47.             } else {
  48.                 group = 'switch';
  49.             }
  50.             nodes.push({id: parentId, label: parentName + "\n" + parentDeviceName, group: group, value: 10});
  51. 

  52. 

  53.             nodes.push({id: 2, label: "bob\nbobby", group: group, value: 10});
  54.             edges.push({from: parentId, to: 2, length: LENGTH_MAIN, width: WIDTH_SCALE * 2, label: ''});
  55. 

  56.             var container = document.getElementById('tabs-2');
  57.             var data = {
  58.                 nodes: nodes,
  59.                 edges: edges
  60.             };
  61.             var options = {
  62.                 stabilize: false, // stabilize positions before displaying
  63.                 nodes: {
  64.                     radiusMin: 16,
  65.                     radiusMax: 32,
  66.                     fontColor: BLACK
  67.                 },
  68.                 edges: {
  69.                     color: GRAY
  70.                 },
  71.                 groups: {
  72.                     'switch': {
  73.                         shape: 'image',
  74.                         image: '/vis.js/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png'
  75.                     },
  76.                     'router': {
  77.                         shape: 'image',
  78.                         image: '/vis.js/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png'
  79.                     },
  80.                     'firewall': {
  81.                         shape: 'image',
  82.                         image: '/vis.js/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png'
  83.                     },
  84.                     desktop: {
  85.                         shape: 'dot',
  86.                         color: "#2B7CE9" // blue
  87.                     },
  88.                     mobile: {
  89.                         shape: 'dot',
  90.                         color: "#5A1E5C" // purple
  91.                     },
  92.                     sunHost: {
  93.                         shape: 'image',
  94.                         image: '/vis.js/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png'
  95.                     },
  96.                     windowsHost: {
  97.                         shape: 'image',
  98.                         image: '/vis.js/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png'
  99.                     },
  100.                     linuxHost: {
  101.                         shape: 'image',
  102.                         image: '/vis.js/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png'
  103.                     },
  104.                     server: {
  105.                         shape: 'square',
  106.                         color: "#C5000B" // red
  107.                     },
  108.                     internet: {
  109.                         shape: 'square',
  110.                         color: "#109618" // green
  111.                     }
  112.                 },
  113.                 physics: {
  114.                     barnesHut: {
  115.                         enabled: true
  116.                     }
  117.                 }
  118.             };
  119.             network = new vis.Network(container, data, options);
  120.         }
  121.         draw();
  122.     }
  123. 

  124.     drawNetwork();
  125. </script>
  126. 

  127. </body>
  128. </html>