summaryrefslogtreecommitdiff
path: root/www/lib/vis/examples/network/exampleApplications/nodeLegend.html
diff options
context:
space:
mode:
authorPliable Pixels <pliablepixels@gmail.com>2016-10-28 13:31:36 -0700
committerPliable Pixels <pliablepixels@gmail.com>2016-10-28 13:31:36 -0700
commit05e761abca3ff42dbba371af0560b82707dfe7c0 (patch)
tree268cc06b931357a0ffad684961ff6d24eeec3b4b /www/lib/vis/examples/network/exampleApplications/nodeLegend.html
parent55a9e628760dc31400457099e4aaabc767beed70 (diff)
updated vis
Diffstat (limited to 'www/lib/vis/examples/network/exampleApplications/nodeLegend.html')
-rw-r--r--www/lib/vis/examples/network/exampleApplications/nodeLegend.html163
1 files changed, 163 insertions, 0 deletions
diff --git a/www/lib/vis/examples/network/exampleApplications/nodeLegend.html b/www/lib/vis/examples/network/exampleApplications/nodeLegend.html
new file mode 100644
index 00000000..fdf4ef81
--- /dev/null
+++ b/www/lib/vis/examples/network/exampleApplications/nodeLegend.html
@@ -0,0 +1,163 @@
+<!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">
+ html, body {
+ font: 10pt arial;
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ #mynetwork {
+ width: 100%;
+ height: 100%;
+ }
+ </style>
+
+ <script type="text/javascript" src="../../../dist/vis.js"></script>
+ <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+ <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, fixed: true, physics:false});
+ nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1, fixed: true, physics:false});
+ nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1, fixed: true, physics:false});
+ nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, fixed: true, physics:false});
+ nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, fixed: true, physics:false});
+
+ // create a network
+ var container = document.getElementById('mynetwork');
+ var data = {
+ nodes: nodes,
+ edges: edges
+ };
+ var options = {
+ nodes: {
+ scaling: {
+ min: 16,
+ max: 32
+ }
+ },
+ edges: {
+ color: GRAY,
+ smooth: false
+ },
+ physics:{
+ barnesHut:{gravitationalConstant:-30000},
+ stabilization: {iterations:2500}
+ },
+ 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>
+ <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body onload="draw()">
+
+<div id="mynetwork"></div>
+
+
+
+</body></html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 22:07:58 +0000