|
|
- <!DOCTYPE html>
- <!-- saved from url=(0046)http://visjs.org/examples/graph/03_images.html -->
- <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- <title>Graph | Images</title>
-
- <style type="text/css">
- body {
- font: 10pt arial;
- padding: 0;
- margin: 0;
- overflow: hidden;
- }
- #mygraph {
- 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 graph = 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 mygraph = document.getElementById('mygraph');
- var x = - mygraph.clientWidth / 2 + 50;
- var y = - mygraph.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 graph
- var container = document.getElementById('mygraph');
- 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
- }
- }
- };
- graph = new vis.Graph(container, data, options);
- }
- </script>
- </head>
-
- <body onload="draw()">
-
- <div id="mygraph"><div class="graph-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>
-
-
-
- </body></html>
|
