<!DOCTYPE HTML>
<html>
<head>
    <title>Graph | Mobile friendly</title>

    <style type="text/css">
        html, body {
            font: 10pt arial;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mygraph {
            width: 100%;
            height: 100%;
        }
    </style>

    <!-- for mobile devices like android and iphone -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

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

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var graph = null;

        // Called when the Visualization API is loaded.
        function draw() {
            nodes = [];
            edges = [];
            var EDGE_LENGTH = 50;
            var connectionCount = [];

            // randomly create some nodes
            var nodeCount = 20;
            var cols = parseInt(Math.sqrt(nodeCount));
            for (var i = 0; i < nodeCount; i++) {
                nodes.push({
                    id: i,
                    label: '' + i
                });

                connectionCount[i] = 0;

                // create links in a scale-free-network way
                if (i == 1) {
                    var from = i;
                    var to = 0;
                    edges.push({
                        from: from,
                        to: to,
                        length: EDGE_LENGTH
                    });
                    connectionCount[from]++;
                    connectionCount[to]++;
                }
                else if (i > 1) {
                    var conn = edges.length * 2;
                    var rand = Math.floor(Math.random() * conn);
                    var cum = 0;
                    var j = 0;
                    while (j < connectionCount.length && cum < rand) {
                        cum += connectionCount[j];
                        j++;
                    }

                    var from = i;
                    var to = j;
                    edges.push({
                        from: from,
                        to: to,
                        length: EDGE_LENGTH
                    });
                    connectionCount[from]++;
                    connectionCount[to]++;
                }
            }

            // Create a graph
            var container = document.getElementById('mygraph');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                stabilize: false,
                nodes: {
                    shape: 'dot',
                    radius: 24,
                    fontSize: 24
                },
                edges: {
                    width: 2
                }
            };
            graph = new vis.Graph(container, data, options);
        }
    </script>
</head>

<body onload="draw()" onresize="graph.redraw();">
<div id="mygraph"></div>
</body>
</html>