Added an other example and some minor style improvements

11 years ago · c0b2ffeaa7
--- a/docs/css/style.css
+++ b/docs/css/style.css
@ -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;
--- a/examples/graph/17_network_info.html
+++ b/examples/graph/17_network_info.html
@ -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>
--- a/examples/graph/index.html
+++ b/examples/graph/index.html
@ -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>
--- a/img/external-link-icons/external-link-icon.png
+++ b/img/external-link-icons/external-link-icon.png
--- a/img/external-link-icons/license.txt
+++ b/img/external-link-icons/license.txt
@ -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 ãäå ìîæíî áóäåò ñêà÷àòü ýòîò ðåñóðñ.

--- a/img/gallery/graph/17_network_info.png
+++ b/img/gallery/graph/17_network_info.png
--- a/index.html
+++ b/index.html
@ -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">