Error trying to visualize data from neo4j using neovis.js

788 Views Asked by At

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/[email protected]/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.

1

There are 1 best solutions below

2
On BEST ANSWER

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>

enter image description here