josdejong
11 years ago
3 changed files with 161 additions and 4 deletions
Split View
Diff Options
-
+156 -0examples/graph/17_network_info.html
-
+3 -2examples/graph/index.html
-
+2 -2examples/timeline/index.html
+ 156
- 0
examples/graph/17_network_info.html
View File
| @ -0,0 +1,156 @@ | |||
| <!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="../../vis.min.js"></script> | |||
| <script type="text/javascript"> | |||
| var nodes = null; | |||
| var edges = null; | |||
| var graph = null; | |||
| var DIR = 'img/refresh-cl/', | |||
| SWITCH = DIR + 'Network-Pipe-icon.png', | |||
| COMPUTER = DIR + 'Hardware-My-Computer-3-icon.png', | |||
| PRINTER = DIR + 'Hardware-Printer-Blue-icon.png', | |||
| LENGTH_MAIN = 350, | |||
| LENGTH_SERVER = 150, | |||
| LENGTH_SUB = 50, | |||
| GREEN = 'green', | |||
| RED = '#FA0A10', | |||
| ORANGE = 'orange', | |||
| 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: 6, label: '0.71 mbps'}); | |||
| edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: 4, label: '0.55 mbps'}); | |||
| // group around 2 | |||
| for (var i = 100; i <= 104; i++) { | |||
| var value = 1; | |||
| var width = 1; | |||
| 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}); | |||
| // 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: 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: 1}); | |||
| } | |||
| // 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: 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: 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, label: '0.3 mbps'}); | |||
| nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10}); | |||
| edges.push({from: 1, to: 204, length: 200, width: 3, label: '0.63 mbps'}); | |||
| // legend | |||
| var mygraph = document.getElementById('mygraph'); | |||
| var x = - mygraph.clientWidth / 2 + 50; | |||
| var y = - mygraph.clientHeight / 2 + 20; | |||
| nodes.push({id: 1000, x: x, y: y + 0, label: 'Internet', group: 'internet'}); | |||
| nodes.push({id: 1001, x: x, y: y + 50, label: 'Switch', group: 'switch'}); | |||
| nodes.push({id: 1002, x: x, y: y + 100, label: 'Server', group: 'server'}); | |||
| nodes.push({id: 1003, x: x, y: y + 150, label: 'Computer', group: 'desktop'}); | |||
| nodes.push({id: 1004, x: x, y: y + 200, label: 'Smartphone', group: 'mobile'}); | |||
| // create a graph | |||
| var container = document.getElementById('mygraph'); | |||
| var data = { | |||
| nodes: nodes, | |||
| edges: edges | |||
| }; | |||
| var options = { | |||
| stabilize: false, // stabilize positions before displaying | |||
| nodes: { | |||
| widthMin: 24, | |||
| maxWidth: 64, | |||
| fontColor: BLACK | |||
| }, | |||
| edges: { | |||
| color: GRAY | |||
| }, | |||
| groups: { | |||
| 'switch': { | |||
| shape: 'triangle', | |||
| color: vis.graph.Groups.DEFAULT[1] // yellow | |||
| }, | |||
| desktop: { | |||
| shape: 'dot', | |||
| color: vis.graph.Groups.DEFAULT[0] // blue | |||
| }, | |||
| mobile: { | |||
| shape: 'dot', | |||
| color: vis.graph.Groups.DEFAULT[4] // purple | |||
| }, | |||
| server: { | |||
| shape: 'square', | |||
| color: vis.graph.Groups.DEFAULT[2] // red | |||
| }, | |||
| internet: { | |||
| shape: 'square', | |||
| color: vis.graph.Groups.DEFAULT[3] // 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> | |||