|
|
- <!doctype html>
- <html>
- <head>
- <title>Network | Basic usage</title>
-
- <script type="text/javascript" src="../../dist/vis.js"></script>
-
- <style type="text/css">
- #mynetwork {
- width: 400px;
- height: 400px;
- border: 1px solid lightgray;
- }
- </style>
- </head>
-
- <body>
-
- <div id="tabs-2"></div>
-
- <script type="text/javascript">
- function drawNetwork() {
- var nodes = null;
- var edges = null;
- var network = null;
-
- var LENGTH_MAIN = 350,
- WIDTH_SCALE = 2,
- GRAY = 'gray',
- BLACK = '#2B1B17';
-
- function draw() {
- nodes = [];
- edges = [];
- var parentDeviceName = "Windows Host";
- var parentName = "john";
- var parentId = 1;
-
- if (parentDeviceName == "Windows Host") {
- group = 'windowsHost';
- } else if (parentDeviceName == "Sun Host") {
- group = 'sunHost';
- } else if (parentDeviceName == "Net-SNMP Linux") {
- group = 'linuxHost';
- } else if (parentDeviceName == "Cisco 2901 K9") {
- group = 'router';
- } else {
- group = 'switch';
- }
- nodes.push({id: parentId, label: parentName + "\n" + parentDeviceName, group: group, value: 10});
-
-
- nodes.push({id: 2, label: "bob\nbobby", group: group, value: 10});
- edges.push({from: parentId, to: 2, length: LENGTH_MAIN, width: WIDTH_SCALE * 2, label: ''});
-
- var container = document.getElementById('tabs-2');
- var data = {
- nodes: nodes,
- edges: edges
- };
- var options = {
- stabilize: false, // stabilize positions before displaying
- nodes: {
- radiusMin: 16,
- radiusMax: 32,
- fontColor: BLACK
- },
- edges: {
- color: GRAY
- },
- groups: {
- 'switch': {
- shape: 'image',
- image: '/vis.js/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png'
- },
- 'router': {
- shape: 'image',
- image: '/vis.js/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png'
- },
- 'firewall': {
- shape: 'image',
- image: '/vis.js/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png'
- },
- desktop: {
- shape: 'dot',
- color: "#2B7CE9" // blue
- },
- mobile: {
- shape: 'dot',
- color: "#5A1E5C" // purple
- },
- sunHost: {
- shape: 'image',
- image: '/vis.js/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png'
- },
- windowsHost: {
- shape: 'image',
- image: '/vis.js/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png'
- },
- linuxHost: {
- shape: 'image',
- image: '/vis.js/examples/network/img/refresh-cl/Hardware-Laptop-1-icon.png'
- },
- server: {
- shape: 'square',
- color: "#C5000B" // red
- },
- internet: {
- shape: 'square',
- color: "#109618" // green
- }
- },
- physics: {
- barnesHut: {
- enabled: true
- }
- }
- };
- network = new vis.Network(container, data, options);
- }
- draw();
- }
-
- drawNetwork();
- </script>
-
- </body>
- </html>
|
