network-graph/chart-visjs.html at master · chris-redfield/network-graph · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<!-- saved from url=(0072)http://visjs.org/examples/network/exampleApplications/lesMiserables.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css">
        #mynetwork {
            width: 900px;
            height: 900px;
            border: 1px solid lightgray;
        }
    </style>

    <script type="text/javascript" src="./chart-visjs_files/vis.js"></script>
    <link href="./chart-visjs_files/vis-network.min.css" rel="stylesheet" type="text/css">
    <script type="text/json" src="datavisjs.json"></script>

    <script type="text/javascript">

        function loadJSON(callback) {

            var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
            xobj.open('GET', 'datavisjs.json', false); // Replace 'my_data' with the path to your file
            xobj.onreadystatechange = function () {
                if (xobj.readyState == 4 && xobj.status == "200") {
                    // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                    callback(xobj.responseText);
                }
            };
            xobj.send(null);
        }

        function draw() {
            // create some nodes

            loadJSON(function(response) {
                data = JSON.parse(response);
            });


            // Pega div para desenhar
            var container = document.getElementById('mynetwork');

            // Legenda
            var x = - container.clientWidth * 1.3
            var y = container.clientHeight * 1.3

            var step = 85;
            data.nodes.push({id: 999999999995, x: x, y: y, label: 'Fornecedor', group: 'Fornecedor', value: 1, fixed: true, physics:false});
            data.nodes.push({id: 999999999996, x: x + step, y: y, label: 'Sócio', group: 'Sócio', value: 1, fixed: true,  physics:false});
            data.nodes.push({id: 999999999997, x: x + 2 * step, y: y, label: 'Dirigente', group: 'Dirigente', value: 1, fixed: true,  physics:false});
            data.nodes.push({id: 999999999998, x: x + 3 * step, y: y, label: 'Conjuge', group: 'Conjuge', value: 1, fixed: true,  physics:false});
            data.nodes.push({id: 999999999999, x: x + 4.2 * step, y: y, label: 'Sócio e Dirigente', group: 'Sócio e Dirigente', value: 1, fixed: true,  physics:false});

            var options = {
                nodes: {
                    shape: 'dot',
                    size: 16
                },
                physics: {
                    forceAtlas2Based: {
                        gravitationalConstant: -26,
                        centralGravity: 0.005,
                        springLength: 230,
                        springConstant: 0.18
                    },
                    maxVelocity: 146,
                    solver: 'forceAtlas2Based',
                    timestep: 0.35,
                    stabilization: {iterations: 150}
                }
            };
            var network = new vis.Network(container, data, options);

        }
    </script>

</head>

<body onload="draw()">


<div id="mynetwork"><div class="vis-network" tabindex="900" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;"><canvas style="position: relative; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;" width="990" height="990"></canvas></div></div>


</body></html>