CODEWITHSUNDEEP
javascriptpythonhtmlpyvis
EGD
EGD

Reputation: 1

Pyvis Graphs Dropdown Selector

I have two graphs generated by using pyvis. I want to display each graph when their name is selected from a dropdown menu. Each graph will have own datasets in the source code, is there a way to refer the datasets of selected graph in one file rather than having two separate full html code?

Below python code generates two graphs and one with a dropdown menu:

from pyvis.network import Network
import os

def create_graph_1():
    net = Network(notebook=False)
    net.add_node(1, label="Node 1")
    net.add_node(2, label="Node 2")
    net.add_edge(1, 2)
    net.write_html("graph1.html")

def create_graph_2():
    net = Network(notebook=False)
    net.add_node(3, label="Node 3")
    net.add_node(4, label="Node 4")
    net.add_node(5, label="Node 5")
    net.add_edge(3, 4)
    net.add_edge(4, 5)
    net.write_html("graph2.html")

def generate_html():
    html_content = """
    <!DOCTYPE html>
    <html>
    <head>
        <title>PyVis Graph Selector</title>
        <script>
            function changeGraph() {
                var selectedGraph = document.getElementById("graph-selector").value;
                document.getElementById("graph-frame").src = selectedGraph;
            }
        </script>
    </head>
    <body>
        <label for='graph-selector'>Choose a graph:</label>
        <select id='graph-selector' onchange='changeGraph()'>
            <option value='graph1.html'>Graph 1</option>
            <option value='graph2.html'>Graph 2</option>
        </select>
        <iframe id='graph-frame' src='graph1.html' width='800' height='600'     style='border:none;'></iframe>
    </body>
    </html>
    """
    with open("index.html", "w") as f:
        f.write(html_content)

if __name__ == "__main__":
    create_graph_1()
    create_graph_2()
    generate_html()
    print("Generated index.html")

The solutions I have found are creating separate html files for each graph and the main html displays each graph in a frame. I need all html codes and datasets in a single html.

One example dataset is as below:

                  nodes = new vis.DataSet([{"color": "#97c2fc", "id": 1, "label": "Node 1", "shape": "dot"}, {"color": "#97c2fc", "id": 2, "label": "Node 2", "shape": "dot"}]);
                  edges = new vis.DataSet([{"from": 1, "to": 2}]);

Upvotes: 0

Views: 22

Answers (0)

Related Questions