[SOLVED] Error trying to visualize data from neo4j using neovis.js

Error trying to visualize data from neo4j using neovis.js

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.

Solution

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>