Error trying to visualize data from neo4j using neovis.js

Question

I want to visualize the graph from my neo4j database like this using HTML Graph in Neo4j.

When I try to run this code

<html>

<head>
    <title>DataViz</title>
    <style type="text/css">
        #viz {
            width: 900px;
            height: 700px;
        }
    </style>
    <script src="https://unpkg.com/neovis.js@2.0.2/dist/neovis-without-dependencies.js"></script>
</head>

<script type="text/javascript">
    var viz;
    function draw() {
        var config = {
            container_id: "viz",
            server_url: "bolt://localhost", 
            server_user: "neo4j",
            server_password: "***",
            labels: {
               
            },
            relationships: {
                
            },
            initial_cypher: "MATCH p= (:Idea)-[:contains]->(:Keyphrase) RETURN p"
        }

        viz = new NeoVis.default(config);
        viz.render();
        
    }
</script>

<body onload="draw()">
    <div id="viz"></div>
</body>

</html>

I get the following errors. I tried to follow this tutorial https://www.youtube.com/watch?v=0-1A7f8993M&t=317s&ab_channel=Neo4j but can't get it to work. I am very unexperienced with HTML and js so would very much appreciate some help with this simple example.

score 1 · Accepted Answer · answered Sep 07 '22 at 19:11

This is working for me. The fixes are 1) location of Neovis.js 2) and change the config parameter names like serverUrl instead of server_url.

<html>

<head>
    <title>DataViz</title>
    <style type="text/css">
        #viz {
            width: 900px;
            height: 700px;
        }
    </style>
    <script src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"></script>
</head>

<script type="text/javascript">
    var viz;
    function draw() {
        var config = {
                containerId: "viz",
                neo4j: {
                    serverUrl: "bolt://localhost:7687",
                    serverUser: "neo4j",
                    serverPassword: "awesome_password"
                },
                labels: { 
                },
                relationships: { 
                },
                initialCypher: "MATCH p = (:Character)-[:INTERACTS]->(:Character) RETURN p LIMIT 10"
            };

        viz = new NeoVis.default(config);
        viz.render();
        
    }
</script>

<body onload="draw()">
    <div id="viz"></div>
</body>

</html>

Thank you @jose_bacoy, do you know how I could display the node properties as well? — Vard, Sep 14 '22 at 14:50
You need to fill-in the labels and relationships, you can find examples here: https://github.com/neo4j-contrib/neovis.js/ (look at the bottom example) — jose_bacoy, Sep 14 '22 at 16:18

Error trying to visualize data from neo4j using neovis.js

1 Answers1