I generated two graphs using pyvis library for python. After generating the HTML files (containing CSS and Javascript information) I wanted to combine the two graphs in one HTML document. The first graph renders, the second does not. It looks like the second wants to render in the same place like the first one; the loadingbar appears on top of the already rendered graph.
Since I don't know any Javascript, I have no idea how to fix the problem. I tried renaming variables in the automatically generated function but it didn't help. Also tried to change the function name itself. Any help would be appreciated!
The head of my HTML document looks like this:
<head>
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"/>
<link rel="icon" type="image/png" href="MeinLogoSchwarz.png"/>
<link rel="stylesheet" href="style.css">
<!--generated from pyvis-->
<script src="lib/bindings/utils.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"
></script>
</head>
The part of the body containing the graphs looks like this:
<body>
<main>
<section class="section2">
<div class="content">
<h1>h1</h1>
<details>
<summary>FIRST GRAPH</summary>
<div>
<p>
<div class="card" style="width: 100%">
<div id="mynetwork" class="card-body"></div>
</div>
<div id="loadingBar">
<div class="outerBorder">
<div id="text">0%</div>
<div id="border">
<div id="bar"></div>
</div>
</div>
</div>
<script type="text/javascript">
// initialize global variables.
var edges;
var nodes;
var allNodes;
var allEdges;
var nodeColors;
var originalNodes;
var network;
var container;
var options, data;
var filter = {
item : '',
property : '',
value : []
};
// This method is responsible for drawing the graph, returns the drawn network
function drawGraph() {
var container = document.getElementById('mynetwork');
// parsing and collecting nodes and edges from the python
nodes = new vis.DataSet([{"color": "#d78924", "font": {"color": "white"}, "id": 1, "label": 1, "shape": "dot", "title": "title", "value": 4}, {"color": "#777777", "font": {"color": "white"}, "id": 2, "label": 2, "shape": "dot", "title": "title2", value: 1}]);
edges = new vis.DataSet([{"from": 1, "to": 2, "value": 0.6666666666666666}]);
nodeColors = {};
allNodes = nodes.get({ returnType: "Object" });
for (nodeId in allNodes) {
nodeColors[nodeId] = allNodes[nodeId].color;
}
allEdges = edges.get({ returnType: "Object" });
// adding nodes and edges to the graph
data = {nodes: nodes, edges: edges};
var options = {
"configure": {
"enabled": false
},
"edges": {
"color": {
"inherit": true
},
"smooth": {
"enabled": true,
"type": "dynamic"
}
},
"interaction": {
"dragNodes": true,
"hideEdgesOnDrag": false,
"hideNodesOnDrag": false
},
"physics": {
"enabled": true,
"forceAtlas2Based": {
"avoidOverlap": 0,
"centralGravity": 0.01,
"damping": 0.4,
"gravitationalConstant": -50,
"springConstant": 0.08,
"springLength": 100
},
"solver": "forceAtlas2Based",
"stabilization": {
"enabled": true,
"fit": true,
"iterations": 1000,
"onlyDynamicEdges": false,
"updateInterval": 50
}
}
};
network = new vis.Network(container, data, options);
network.on("stabilizationProgress", function(params) {
document.getElementById('loadingBar').removeAttribute("style");
var maxWidth = 496;
var minWidth = 20;
var widthFactor = params.iterations/params.total;
var width = Math.max(minWidth,maxWidth * widthFactor);
document.getElementById('bar').style.width = width + 'px';
document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
});
network.once("stabilizationIterationsDone", function() {
document.getElementById('text').innerHTML = '100%';
document.getElementById('bar').style.width = '496px';
document.getElementById('loadingBar').style.opacity = 0;
// really clean the dom element
setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
});
return network;
}
drawGraph();
</script>
</p>
</div>
</details>
<details>
<summary>SECOND GRAPH</summary>
<div>
<p>some text
<div>
<div class="card" style="width: 100%">
<div id="mynetwork2" class="card-body"></div>
</div>
<div id="loadingBarr">
<div class="outerBorder">
<div id="textt">0%</div>
<div id="borderr">
<div id="barr"></div>
</div>
</div>
</div>
<script type="text/javascript">
// initialize global variables.
var edgess;
var nodess;
var allNodess;
var allEdgess;
var nodeColorss;
var originalNodess;
var networkk;
var containerr;
var optionss, dataa;
var filter = {
item : '',
property : '',
value : []
};
// This method is responsible for drawing the graph, returns the drawn network
function drawGraphh() {
var containerr = document.getElementById('mynetwork2');
// parsing and collecting nodes and edges from the python
nodess = new vis.DataSet([{"color": "#d78924", "font": {"color": "white"}, "id": 1, "label": 1, "shape": "dot", "title": "title", "value": 4}, {"color": "#777777", "font": {"color": "white"}, "id": 2, "label": 2, "shape": "dot", "title": "title2", value: 1}]);
edgess = new vis.DataSet([{"from": 1, "to": 2, "value": 0.6666666666666666}]);
nodeColorss = {};
allNodess = nodess.get({ returnType: "Object" });
for (nodeIdd in allNodess) {
nodeColorss[nodeIdd] = allNodess[nodeIdd].color;
}
allEdgess = edgess.get({ returnType: "Object" });
// adding nodes and edges to the graph
dataa = {nodess: nodess, edgess: edgess};
var optionss = {
"configure": {
"enabled": false
},
"edges": {
"color": {
"inherit": true
},
"smooth": {
"enabled": true,
"type": "dynamic"
}
},
"interaction": {
"dragNodes": true,
"hideEdgesOnDrag": false,
"hideNodesOnDrag": false
},
"physics": {
"enabled": true,
"forceAtlas2Based": {
"avoidOverlap": 0,
"centralGravity": 0.01,
"damping": 0.4,
"gravitationalConstant": -50,
"springConstant": 0.08,
"springLength": 100
},
"solver": "forceAtlas2Based",
"stabilization": {
"enabled": true,
"fit": true,
"iterations": 1000,
"onlyDynamicEdges": false,
"updateInterval": 50
}
}
};
networkk = new vis.Network(containerr, dataa, optionss);
networkk.on("stabilizationProgress", function(params) {
document.getElementById('loadingBarr').removeAttribute("style");
var maxWidth = 496;
var minWidth = 20;
var widthFactor = params.iterations/params.total;
var width = Math.max(minWidth,maxWidth * widthFactor);
document.getElementById('barr').style.width = width + 'px';
document.getElementById('textt').innerHTML = Math.round(widthFactor*100) + '%';
});
networkk.once("stabilizationIterationsDone", function() {
document.getElementById('textt').innerHTML = '100%';
document.getElementById('barr').style.width = '496px';
document.getElementById('loadingBarr').style.opacity = 0;
// really clean the dom element
setTimeout(function () {document.getElementById('loadingBarr').style.display = 'none';}, 500);
});
return networkk;
}
drawGraphh();
</script>
</div>
</p>
</div>
<!--</details> -->
</div>
</section>
</main>