I have a node graph generated by PyVis and saved as a HTML file. I also have set width to 100% and height to 95%.
The source code has no 'canvas' element/tag mentioned specifically.
Opening the file in a browser, for some reason the graph image doesn't fit to height of 95%. Upon inspecting the image element, i then see a 'canvas' element gets into the code and it is messing up the graph size. From the inspect tool, disabling element.style height and width will get the graph size that I had defined. I am not sure how to overcome this in the code.
I need to be able to resize the image to the size i wish for to present the data in a better way, please help. Any help is greatly appreciated. Thanks heaps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Graph</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-network@latest/styles/vis-network.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vis-network@latest/dist/vis-network.js"> </script>
<style type="text/css">
#mynetwork {
width: 100%;
height: 95%;
background-color: #eeeeee;
border: 1px solid lightgray;
position: relative;
float: left;
}
</style>
</head>
<body>
<h2>Sample Graph</h2>
<div id = "mynetwork"></div>
<script type="text/javascript">
// initialize global variables.
var edges;
var nodes;
var network;
var container;
var options, data;
// 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": "mediumslateblue", "font": {"color": "black", "face": "Verdana", "size": 100}, "group": "grwy", "id": "node A", "image": "", "label": "node A", "level": 1, "shape": "circle", "size": 10, "title": "\u003cb\u003e\u003ci\u003enode A\u003c/i\u003e\u003c/b\u003e"},
{"color": "plum", "font": {"color": "black", "face": "Verdana", "size": 50}, "group": "group_others", "id": "node M3ca", "image": "", "label": "node M3ca", "level": 3, "shape": "ellipse", "size": 10, "title": "\u003cb\u003e\u003ci\u003enode M3ca\u003c/i\u003e\u003c/b\u003e"},
{"color": "slategrey", "font": {"color": "black", "face": "Verdana", "size": 100}, "group": "grwy", "id": "node 3", "image": "", "label": "node 3", "level": 3, "shape": "circle", "size": 10, "title": "some_title"},
{"color": "mediumslateblue", "font": {"color": "black", "face": "Verdana", "size": 100}, "group": "grwy", "id": "node B", "image": "", "label": "node B", "level": 3, "shape": "circle", "size": 10, "title": "\u003cb\u003e\u003ci\u003enode B\u003c/i\u003e\u003c/b\u003e"},
{"color": "mediumslateblue", "font": {"color": "black", "face": "Verdana", "size": 100}, "group": "grwy", "id": "node 1c", "image": "", "label": "node 1c", "level": 3, "shape": "circle", "size": 10, "title": "\u003cb\u003e\u003ci\u003enode 1c\u003c/i\u003e\u003c/b\u003e"}
]);
edges = new vis.DataSet([
{"arrows": {"to": {"enabled": false}}, "color": "Olive", "dashes": false, "from": "node A", "label": 1, "length": 1000, "smooth": {}, "title": "node A\u003ci\u003e[7]\u003c/i\u003e \u003c-----\u003e node M3ca\u003ci\u003e[1]\u003c/i\u003e", "to": "node M3ca", "weight": 1},
{"arrows": {"to": {"enabled": false}}, "color": "ForestGreen", "dashes": false, "from": "node A", "label": 1, "length": 1000, "smooth": {}, "title": "node A\u003ci\u003e[10]\u003c/i\u003e \u003c-----\u003e node 3\u003ci\u003e[10]\u003c/i\u003e", "to": "node 3", "weight": 1},
{"arrows": {"to": {"enabled": false}}, "color": "IndianRed", "dashes": false, "from": "node A", "label": 1, "length": 1000, "smooth": {"type": "dynamic"}, "title": "node A\u003ci\u003e[19]\u003c/i\u003e \u003c-----\u003e node B\u003ci\u003e[19]\u003c/i\u003e", "to": "node B", "weight": 1},
{"arrows": {"to": {"enabled": false}}, "color": "YellowGreen", "dashes": false, "from": "node 1c", "label": 1, "length": 1000, "smooth": {}, "title": "node 1c\u003ci\u003e[43]\u003c/i\u003e \u003c-----\u003e node A\u003ci\u003e[3]\u003c/i\u003e", "to": "node A", "weight": 1}
]);
// 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"}, "hoverWidth": 10, "selectionWidth": 15, "width": 5}, "interaction": {"dragNodes": true, "hideEdgesOnDrag": false, "hideNodesOnDrag": false, "hover": true, "multiselect": true}, "physics": {"barnesHut": {"avoidOverlap": 0.25, "centralGravity": 0, "damping": 0.09, "gravitationalConstant": -20000, "springConstant": 0.001, "springLength": 95}, "enabled": true, "stabilization": {"enabled": true, "fit": true, "iterations": 1000, "onlyDynamicEdges": false, "updateInterval": 50}}};
network = new vis.Network(container, data, options);
return network;
}
drawGraph();
</script>
</body>
</html>
Here is the output that i see in my browser. [![Actual image rendered in the browser][1]][1]
And here is what i am expecting to see in my browser. [![Expected Image to be rendered in the browser][2]][2]
Further, after the result is shown on the browser, i right click ont he html page and view the page source-code and i see the code as below. Node the new addition of element to my original source code, i never made that addition, i believe that was added by java script to draw canvas image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Network Graph Homepage</title>
<link rel="stylesheet" href="/static/latest/vis.css" type="text/css">
<script type="text/javascript" src="/static/latest/vis-network.min.js"> </script>
<style type="text/css">
#mynetwork {
width: 100%;
height: 95%;
background-color: #eeeeee;
border: 1px solid lightgray;
position: relative;
float: left;
}
</style>
<link rel="stylesheet" href="/static/custom/my.css" type="text/css">
<script type="text/javascript" src="/static/custom/my.js"> </script>
</head>
<body>
<h1>Network Graph Homepage</h1>
<div id="mynetwork"><div class="vis-network" tabindex="0" style="position: relative; overflow: hidden; touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; width: 100%; height: 100%;"><canvas width="1856" height="151" style="position: relative; touch-action: none; -webkit-user-select: none; -webkit-user-drag: none; width: 100%; height: 100%;"></canvas></div></div>
<script type="text/javascript">
// initialize global variables.
var edges;
var nodes;
var network;
var container;
var options, data;
// 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": "mediumslateblue", "font": {"color": "black", "face": "Verdana", "size": 100}, "group": "grwy", "id": "node A", "image": "", "label": "node A", "level": 1, "shape": "circle", "size": 10, "title": "\u003cb\u003e\u003ci\u003enode A\u003c/i\u003e\u003c/b\u003e"},
{"color": "plum", "font": {"color": "black", "face": "Verdana", "size": 50}, "group": "group_others", "id": "node M3ca", "image": "", "label": "node M3ca", "level": 3, "shape": "ellipse", "size": 10, "title": "\u003cb\u003e\u003ci\u003enode M3ca\u003c/i\u003e\u003c/b\u003e"},
{"color": "slategrey", "font": {"color": "black", "face": "Verdana", "size": 100}, "group": "grwy", "id": "node 3", "image": "", "label": "node 3", "level": 3, "shape": "circle", "size": 10, "title": "some_title"},
{"color": "mediumslateblue", "font": {"color": "black", "face": "Verdana", "size": 100}, "group": "grwy", "id": "node B", "image": "", "label": "node B", "level": 3, "shape": "circle", "size": 10, "title": "\u003cb\u003e\u003ci\u003enode B\u003c/i\u003e\u003c/b\u003e"},
{"color": "mediumslateblue", "font": {"color": "black", "face": "Verdana", "size": 100}, "group": "grwy", "id": "node 1c", "image": "", "label": "node 1c", "level": 3, "shape": "circle", "size": 10, "title": "\u003cb\u003e\u003ci\u003enode 1c\u003c/i\u003e\u003c/b\u003e"}
]);
edges = new vis.DataSet([
{"arrows": {"to": {"enabled": false}}, "color": "Olive", "dashes": false, "from": "node A", "label": 1, "length": 1000, "smooth": {}, "title": "node A\u003ci\u003e[7]\u003c/i\u003e \u003c-----\u003e node M3ca\u003ci\u003e[1]\u003c/i\u003e", "to": "node M3ca", "weight": 1},
{"arrows": {"to": {"enabled": false}}, "color": "ForestGreen", "dashes": false, "from": "node A", "label": 1, "length": 1000, "smooth": {}, "title": "node A\u003ci\u003e[10]\u003c/i\u003e \u003c-----\u003e node 3\u003ci\u003e[10]\u003c/i\u003e", "to": "node 3", "weight": 1},
{"arrows": {"to": {"enabled": false}}, "color": "IndianRed", "dashes": false, "from": "node A", "label": 1, "length": 1000, "smooth": {"type": "dynamic"}, "title": "node A\u003ci\u003e[19]\u003c/i\u003e \u003c-----\u003e node B\u003ci\u003e[19]\u003c/i\u003e", "to": "node B", "weight": 1},
{"arrows": {"to": {"enabled": false}}, "color": "YellowGreen", "dashes": false, "from": "node 1c", "label": 1, "length": 1000, "smooth": {}, "title": "node 1c\u003ci\u003e[43]\u003c/i\u003e \u003c-----\u003e node A\u003ci\u003e[3]\u003c/i\u003e", "to": "node A", "weight": 1}
]);
// 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"}, "hoverWidth": 10, "selectionWidth": 15, "width": 5}, "interaction": {"dragNodes": true, "hideEdgesOnDrag": false, "hideNodesOnDrag": false, "hover": true, "multiselect": true}, "physics": {"barnesHut": {"avoidOverlap": 0.25, "centralGravity": 0, "damping": 0.09, "gravitationalConstant": -20000, "springConstant": 0.001, "springLength": 95}, "enabled": true, "stabilization": {"enabled": true, "fit": true, "iterations": 1000, "onlyDynamicEdges": false, "updateInterval": 50}}};
network = new vis.Network(container, data, options);
return network;
}
drawGraph();
</script>
</body>
</html>
[1]: https://i.sstatic.net/RxF6v.jpg
[2]: https://i.sstatic.net/uQGeC.jpg
I got same problem and i easly fix it by change height from '%' to 'vw', so do like this in style
<style type="text/css">
#mynetwork {
width: 100%;
height: 50vw;
background-color: #eeeeee;
border: 1px solid lightgray;
position: relative;
float: left;
}
</style>
this method works for me all time