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.
128 lines
4.0 KiB
128 lines
4.0 KiB
<!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>
|