I have created a network visualization using vis network. I need to download this in excel sheet. For this I want to download this as image and then want to insert this image in excel. Is there any solution to do this
Hey @Chaitaly_Kundu,
Thanks for sharing your question. Can you share some additional details about the use case? Are you looking to automatically download a visualization and add it to an Excel file, or just manually? Can you also a share a code snippet of the network visualization that you’re looking to download?
The following is the code by which we are generating network visualization.
html_code = """
<html>
<head>
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<style type="text/css">
#network-container {{
height: 400px;
width: 100%;
background-color: #222222;
color: white;
margin-bottom:30px;
}}
</style>
</head>
<body>
<div id="network-container"></div>
<div id="table-container"></div>
<script type="text/javascript">
// Create a new network instance
var container = document.getElementById("network-container");
var data = {{ nodes: {0}, edges: {1},file_info:{2} }};
// Set options for the network
var options = {{
height: "100%",
width: "100%",
layout: {{
randomSeed: 2,
improvedLayout: true
}},
physics: {{
enabled: true,
hierarchicalRepulsion: {{
nodeDistance: 500
}},
forceAtlas2Based: {{
gravitationalConstant: -400,
centralGravity: 0.01,
springLength: 100,
springConstant: 0.02
}},
solver: "forceAtlas2Based",
stabilization: {{
enabled: true,
iterations: 1000,
updateInterval: 25
}}
}},
nodes: {{
shape: "circle",
size: 15,
font: {{
size: 10,
color: "white"
}},
color: {{
border: "white",
background: "#337ab7",
highlight: {{
border: "white",
background: "#5bc0de"
}},
hover: {{
border: "white",
background: "#5bc0de"
}}
}}
}},
edges: {{
color: {{
color: "#848484",
highlight: "#848484",
hover: "#848484",
inherit: false,
opacity: 1.0
}},
width: 7,
arrows: {{
to: {{
enabled: true,
scaleFactor: 0.5
}}
}}
}}
}};
data.edges.forEach(function (edge) {{
if (edge.to !== undefined && edge.to !== null) {{
edge.arrows = {{ to: {{ enabled: false }} }};
edge.color = {{ color: "#848484", highlight: "#848484", hover: "#848484", inherit: false, opacity: 1.0 }};
}}
}});
var container = document.getElementById("network-container");
var network = new vis.Network(container, data, options);
// Add event listener for node click
network.on("click", function (params) {{
if (params.nodes.length > 0) {{
var clickedNodeId = params.nodes[0];
var clickedNode = data.nodes.find(function (node) {{
return node.id === clickedNodeId;
}});
var connectedNodes = data.edges
.filter(function (edge) {{
return edge.from === clickedNodeId || edge.to === clickedNodeId;
}})
.map(function (edge) {{
var connectedNodeId = edge.from === clickedNodeId ? edge.to : edge.from;
var connectedNode = data.nodes.find(function (node) {{
return node.id === connectedNodeId;
}});
return connectedNode.label;
}});
var clusterLabel = clickedNode.title;
var extractedNumber = clusterLabel.match(/\d+/)[0];
var clickedNodeFileName = clickedNode.label;
var clickedNodeHeadersStr = data.file_info[clickedNodeFileName];
var connectedHeaders = connectedNodes.map(function (connectedNodeLabel) {{
var connectedNode = data.nodes.find(function (node) {{
return node.label === connectedNodeLabel;
}});
var connectedNodeFileName = connectedNode.label;
return data.file_info[connectedNodeFileName];
}});
var clickedNodeHeaders = clickedNodeHeadersStr.split(", ");
var commonHeaders = clickedNodeHeaders.filter(function (header) {{
return connectedHeaders.every(function (headers) {{
return headers.includes(header);
}});
}});
var tableContainer = document.getElementById("table-container");
tableContainer.innerHTML =
"<div><table style='border-collapse: collapse; width: 100%;border-radius: 10px;background-color: #DEDEDE;font-family: Arial, Helvetica, sans-serif'>" +
"<tr><th style='border: 1px solid black; padding: 5px; width: 10%;background-color: #00868b'>Cluster Label</th>" +
"<th style='border: 1px solid black; padding: 5px; width: 25%;background-color: #00868b'>Reports</th>" +
"<th style='border: 1px solid black; padding: 5px; width: 40%;background-color: #00868b'>Common Headers</th></tr>" +
"<tr><td style='border: 1px solid black; padding: 5px; text-align: center; font-size: 14px;'>" + extractedNumber + "</td>" +
"<td style='border: 1px solid black; padding: 5px; font-size: 14px;'>" +clickedNode.label+ connectedNodes.map(node => "<div>" + node + "</div>").join("") + "</td>" +
"<td style='border: 1px solid black; padding: 5px; font-size: 14px;'>" + commonHeaders.join(", ") + "</td></tr>" +
"</table></div>";
// Scroll to the tableContainer element
tableContainer.scrollIntoView();
var tableContent = document.querySelector("#table-container>div");
var netContent = document.querySelector("#network-container>div");
var normalGap = 20;
var expandedGap = 60;
if (clickedNodeHeaders.length > 0) {{
netContent.style.marginBottom = expandedGap + "px";
}} else {{
netContent.style.marginBottom = normalGap + "px";
}}
}}
}});
</script>
</body>
</html>
""".format(json.dumps(nodes), json.dumps(edges), json.dumps(file_info))
I want to generate an image from this code and then want to download this image in an excel sheet