Browse Source

Added an other example and some minor style improvements

gh-pages
josdejong 11 years ago
parent
commit
c0b2ffeaa7
7 changed files with 225 additions and 7 deletions
  1. +7
    -1
      docs/css/style.css
  2. +156
    -0
      examples/graph/17_network_info.html
  3. +3
    -2
      examples/graph/index.html
  4. BIN
      img/external-link-icons/external-link-icon.png
  5. +40
    -0
      img/external-link-icons/license.txt
  6. BIN
      img/gallery/graph/17_network_info.png
  7. +19
    -4
      index.html

+ 7
- 1
docs/css/style.css View File

@ -22,12 +22,18 @@ body, td, th {
}
h1 {
font-size: 180%;
font-size: 220%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
}
h1 .subtitle {
color: lightgray;
font-size: 11pt;
text-transform: uppercase;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;

+ 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>

+ 3
- 2
examples/graph/index.html View File

@ -2,7 +2,7 @@
<html>
<head>
<title>vis.js | examples</title>
<title>vis.js | graph examples</title>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
</head>
@ -10,7 +10,7 @@
<body>
<div id="container">
<h1>vis.js examples</h1>
<h1>vis.js graph examples</h1>
<p><a href="01_basic_usage.html">01_basic_usage.html</a></p>
<p><a href="02_random_nodes.html">02_random_nodes.html</a></p>
@ -28,6 +28,7 @@
<p><a href="14_dot_language.html">14_dot_language.html</a></p>
<p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>
<p><a href="16_dynamic_data.html">16_dynamic_data.html</a></p>
<p><a href="17_network_info.html">17_network_info.html</a></p>
<p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
</div>

BIN
img/external-link-icons/external-link-icon.png View File

Before After
Width: 9  |  Height: 9  |  Size: 194 B

+ 40
- 0
img/external-link-icons/license.txt View File

@ -0,0 +1,40 @@
/**************************************\
Shapes4FREE License
http://www.shapes4free.com/ - visit us to get free photoshop shapes, read our easy-to-understand shapes tutorials and tips, and view beautiful examples of using shapes in all kinds of design
More about the license: http://www.shapes4free.com/license/
\**************************************/
This resource was created by Oksana Khristenko
This resource has been downloaded from Shapes4FREE.com and is free for personal or commercial projects. You may use it for web and print design.
No attribution or backlinks are required, but we would certainly appreciate it if you bookmarked www.shapes4free.com and shared the link to it with your friends:
www.shapes4free.com - free photoshop shapes
You may not resell or distribute this resource. Uploading it to another website
or offering them for download on another website is not allowed. If you would like to feature this resource on
your website or share them with friends, do not link directly to the resource files,
please link to the appropriate page on Shapes4FREE.com where it is possible to download the freebie.
/**************************************\
Shapes4FREE Ëèöåíçèÿ
http://www.shapes4free.com/ - áåñïëàòíûå ôèãóðû äëÿ Ôîòîøîïà, óðîêè è ïîäñêàçêè, à òàêæå êðàñèâûå ïðèìåðû èñïîëüçîâàíèÿ ôèãóð âî âñåõ âèäàõ äèçàéíà
Ëèöåíçèÿ: http://www.shapes4free.com/license-ru/
\**************************************/
Àâòîð: Îêñàíà Õðèñòåíêî
Âñå áåñïëàòíûå ðåñóðñû êîòîðûå ìîæíî ñêà÷àòü íà Shapes4FREE.com, âêëþ÷àÿ ïðîèçâîëüíûå ôèãóðû äëÿ Ôîòîøîïà
(photoshop custom shapes) áåñïëàòíû äëÿ èñïîëüçîâàíèÿ â ëè÷íûõ è êîììåð÷åñêèõ ïðîåêòàõ. Ðàçðåøåíî èñïîëüçîâàòü
áåñïëàòíûå ðåñóðñû Shapes4FREE â âåá äèçàéíå è ïå÷àòíûõ ìàòåðèàëàõ.
Ññûëêà íà ñàéò Shapes4FREE.com íå òðåáóåòñÿ íî ïðèâåòñòâóåòñÿ. Ìû áóäåì ðàäû åñëè âû ðàññêàæåòå î íàñ äðóçüÿì:
www.shapes4free.com - áåñïëàòíûå ôèãóðû äëÿ Ôîòîøîïà
Çàïðåùåíî ïðîäàâàòü èëè ðàñïðîñòðàíÿòü áåñïëàòíûå ðåñóðñû ñîçäàííûå Shapes4FREE.
Çàïðåùåíî çàãðóæàòü èõ íà äðóãèå ñàéòû è ïîçâîëÿòü ïîëüçîâàòåëÿì èõ ñêà÷èâàòü. Åñëè âû õîòèòå ðàññêàçàòü î íàøåì
áåñïëàòíîì ðåñóðñå íà ñàéòå èëè ïîäåëèòüñÿ ñ äðóçüÿìè, íå ñîçäàâàéòå ïðÿìûõ ññûëîê íà ôàéë, ñîçäàéòå ññûëêó íà
ñîîòâåòñòâóþùóþ ñòðàíèöó ñàéòà Shapes4FREE.com ãäå ìîæíî áóäåò ñêà÷àòü ýòîò ðåñóðñ.

BIN
img/gallery/graph/17_network_info.png View File

Before After
Width: 1249  |  Height: 896  |  Size: 99 KiB

+ 19
- 4
index.html View File

@ -28,22 +28,31 @@
<li><a href="#install">Install</a></li>
<li><a href="#example">Example</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="docs/index.html" target="_blank">Docs</a></li>
<li>
<a href="docs/index.html" target="_blank">
Docs
<img src="img/external-link-icons/external-link-icon.png" style="vertical-align: text-top;" title="Docs will open in a new window">
</a>
</li>
<li><a href="#license">License</a></li>
</ul>
</div>
</div>
<h1>vis.js</h1>
<h1>
vis.js<br>
<span class="subtitle">a visual interaction system</span>
</h1>
<p>
Vis.js is a dynamic, browser based visualization library.
The library is designed to be easy to use, to handle large amounts
of dynamic data, and to enable manipulation of the data.
of dynamic data, and to enable manipulation of and interaction with the data.
The library consists of the components DataSet, Timeline, and Graph.
</p>
<p>
The vis.js library is developed by <a href="http://almende.com" target="_blank">Almende B.V</a>.
The vis.js library is developed by <a href="http://almende.com" target="_blank">Almende B.V</a>,
as part of the <a href="http://chap.almende.com/" target="_blank">CHAP</a>.
</p>
@ -270,6 +279,12 @@ bower install vis
<div>dynamic data</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/17_network_info.html">
<img src="img/gallery/graph/17_network_info.png">
<div>network info</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph/graphviz/graphviz_gallery.html">
<img src="img/gallery/graph/graphviz_gallery.png">

Loading…
Cancel
Save