<!doctype html>
<html>
<head>
    <title>Graph | Social Network</title>

    <style>
        body {
            font: 10pt arial;
        }
        #mygraph {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
            background: #F3F3F3;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var DIR = 'img/soft-scraps-icons/';

        var nodes = null;
        var edges = null;
        var graph = null;

        function draw() {
            // create people
            nodes = [
                {id: 1,  label: 'Algie',   image: DIR + 'Smiley-Angry-icon.png', shape: 'image'},
                {id: 2,  label: 'Alston',  image: DIR + 'Smiley-Grin-icon.png', shape: 'image'},
                {id: 3,  label: 'Barney',  image: DIR + 'User-Administrator-Blue-icon.png', shape: 'image'},
                {id: 4,  label: 'Coley',   image: DIR + 'User-Administrator-Green-icon.png', shape: 'image'},
                {id: 5,  label: 'Grant',   image: DIR + 'User-Coat-Blue-icon.png', shape: 'image'},
                {id: 6,  label: 'Langdon', image: DIR + 'User-Coat-Green-icon.png', shape: 'image'},
                {id: 7,  label: 'Lee',     image: DIR + 'User-Coat-Red-icon.png', shape: 'image'},
                {id: 8,  label: 'Merlin',  image: DIR + 'User-Executive-Green-icon.png', shape: 'image'},
                {id: 9,  label: 'Mick',    image: DIR + 'User-Preppy-Blue-icon.png', shape: 'image'},
                {id: 10, label: 'Tod',     image: DIR + 'User-Preppy-Red-icon.png', shape: 'image'}
            ];

            // create connections
            var color = '#BFBFBF';
            edges = [
                {from: 2,   to: 8,  value: 3,   label: 3,   color: color},
                {from: 2,   to: 9,  value: 5,   label: 5,   color: color},
                {from: 2,   to: 10, value: 1,   label: 1,   color: color},
                {from: 4,   to: 6,  value: 8,   label: 8,   color: color},
                {from: 5,   to: 7,  value: 2,   label: 2,   color: color},
                {from: 4,   to: 5,  value: 1,   label: 1,   color: color},
                {from: 9,   to: 10, value: 2,   label: 2,   color: color},
                {from: 2,   to: 3,  value: 6,   label: 6,   color: color},
                {from: 3,   to: 9,  value: 4,   label: 4,   color: color},
                {from: 5,   to: 3,  value: 1,   label: 1,   color: color},
                {from: 2,   to: 7,  value: 4,   label: 4,   color: color}
            ];

            // create a graph
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {};
            graph = new vis.Graph(container, data, options);
        }
    </script>
</head>

<body onload="draw()">
<div id="mygraph"></div>
<p>
    Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
</p>

<div id="info"></div>
</body>
</html>