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.
 
 
 

155 lines
5.3 KiB

<!DOCTYPE html>
<!-- saved from url=(0046)http://visjs.org/examples/network/03_images.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Network | Images</title>
<style type="text/css">
body {
font: 10pt arial;
padding: 0;
margin: 0;
overflow: hidden;
}
#mynetwork {
width: 100%;
height: 100%;
box-sizing: border-box;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
var LENGTH_MAIN = 350,
LENGTH_SERVER = 150,
LENGTH_SUB = 50,
WIDTH_SCALE = 2,
GREEN = 'green',
RED = '#C5000B',
ORANGE = 'orange',
//GRAY = '#666666',
GRAY = 'gray',
BLACK = '#2B1B17';
// Called when the Visualization API is loaded.
function draw() {
// Create a data table with nodes.
nodes = [];
// Create a data table with links.
edges = [];
nodes.push({id: 1, label: '192.168.0.1', group: 'switch', value: 10});
nodes.push({id: 2, label: '192.168.0.2', group: 'switch', value: 8});
nodes.push({id: 3, label: '192.168.0.3', group: 'switch', value: 6});
edges.push({from: 1, to: 2, length: LENGTH_MAIN, width: WIDTH_SCALE * 6, label: '0.71 mbps'});
edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: WIDTH_SCALE * 4, label: '0.55 mbps'});
// group around 2
for (var i = 100; i <= 104; i++) {
var value = 1;
var width = WIDTH_SCALE * 2;
var color = GRAY;
var label = null;
if (i === 103) {
value = 5;
width = 3;
}
if (i === 102) {
color = RED;
label = 'error';
}
nodes.push({id: i, label: '192.168.0.' + i, group: 'desktop', value: value});
edges.push({from: 2, to: i, length: LENGTH_SUB, color: color, fontColor: color, width: width, label: label});
}
nodes.push({id: 201, label: '192.168.0.201', group: 'desktop', value: 1});
edges.push({from: 2, to: 201, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE});
// group around 3
nodes.push({id: 202, label: '192.168.0.202', group: 'desktop', value: 4});
edges.push({from: 3, to: 202, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE * 2});
for (var i = 230; i <= 231; i++ ) {
nodes.push({id: i, label: '192.168.0.' + i, group: 'mobile', value: 2});
edges.push({from: 3, to: i, length: LENGTH_SUB, color: GRAY, fontColor: GRAY, width: WIDTH_SCALE});
}
// group around 1
nodes.push({id: 10, label: '192.168.0.10', group: 'server', value: 10});
edges.push({from: 1, to: 10, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 6, label: '0.92 mbps'});
nodes.push({id: 11, label: '192.168.0.11', group: 'server', value: 7});
edges.push({from: 1, to: 11, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 3, label: '0.68 mbps'});
nodes.push({id: 12, label: '192.168.0.12', group: 'server', value: 3});
edges.push({from: 1, to: 12, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE, label: '0.3 mbps'});
nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10});
edges.push({from: 1, to: 204, length: 200, width: WIDTH_SCALE * 3, label: '0.63 mbps'});
// legend
var mynetwork = document.getElementById('mynetwork');
var x = - mynetwork.clientWidth / 2 + 50;
var y = - mynetwork.clientHeight / 2 + 50;
var step = 70;
nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1});
nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1});
nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1});
nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1});
nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1});
// create a network
var container = document.getElementById('mynetwork');
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: 'triangle',
color: '#FF9900' // orange
},
desktop: {
shape: 'dot',
color: "#2B7CE9" // blue
},
mobile: {
shape: 'dot',
color: "#5A1E5C" // purple
},
server: {
shape: 'square',
color: "#C5000B" // red
},
internet: {
shape: 'square',
color: "#109618" // green
}
}
};
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<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>
</body></html>