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
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.