All versions of this documentation
X

Neo4j Cypher

We use neo4j javascript driver to create a driver and a session that is used to query the graph. The results of these queries are transformed by Ogma's parse.neo4j() function into Ogma's RawGraph format. The neo4j session is closed at the end of the program.
This example requires a Neo4j server 3.0.4+ running.

Open in a new window.
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <script src="https://unpkg.com/neo4j-driver@1.5.1/lib/browser/neo4j-web.min.js"></script>
  <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
    #info {
      position: absolute;
      color: #fff;
      background: #141229;
      font-size: 12px;
      font-family: monospace;
      padding: 5px;
      top: 0;
      left: 0;
      white-space: pre;
    }
  </style>
</head>
<body>
<div id="graph-container"></div>
<div id="info">loading...</div>

<script>
    'use strict';

    var ogma = new Ogma({
        container: 'graph-container',
        renderer: 'canvas'
    });

        // Create a connection to the Neo4j database.
    var driver = neo4j.v1.driver('bolt://localhost', neo4j.v1.auth.basic('neo4j', 'test'));
    var session = driver.session();

    // Run a simple query, parse it from neo4j format and set the result as the graph
    session.run('MATCH (n) OPTIONAL MATCH (n)-[r]-(m) RETURN n,r,m LIMIT 5').then(function (result) {
      return ogma.parse.neo4j(result)
    }).then(graph => {
      // Change the color of these nodes
      graph.nodes.forEach(function(n){
        n.attributes.color = 'green';
      });
      return ogma.setGraph(graph);
    }).then(() => {
      console.log('Import done!');
    });

    // Run a query with a variable length, parse it from neo4j format and add the result as the graph
    // Finally, close the connection to Neo4j.
    session.run('MATCH (n {title: "Top Gun"})-[r*]-(m) RETURN n,r,m LIMIT 5').then(function (result) {
      return ogma.parse.neo4j(result)
    }).then(graph => {
      // Change the color of these nodes
      graph.nodes.forEach(function(n){
        n.attributes.color = 'orange';
      });
      return ogma.addGraph(graph);
    }).then(() => {
      console.log('Import done!');
    });

    // Run a query with a shortest path, parse it from neo4j format and add the result as the graph
    session.run('MATCH (charlize:Person { name: "Charlize Theron" }),(kevin:Person { name: "Kevin Bacon" }), p = allShortestPaths((charlize)-[*..15]-(kevin)) RETURN p').then(function (result) {
      return ogma.parse.neo4j(result)
    }).then(graph => {
      // Change the color of these nodes
      graph.nodes.forEach(function(n){
        n.attributes.color = 'red';
      });
      return ogma.addGraph(graph);
    }).then(() => {
      console.log('Import done!');

      ogma.layouts.forceLink().then(function(){
        ogma.view.locateGraph();
      });
      session.close();
    });


    // Define what to use as node and edge captions.
    ogma.styles.addEdgeRule({
      text: {
        content: function (e) {
          return e.getData('neo4jType');
        }
      }
    });

    ogma.styles.addNodeRule({
      text: {
        content: function (n) {
          if (n.getData('neo4jLabels').includes('Movie')){
            return n.getData('neo4jProperties.title');
          } else if (n.getData('neo4jLabels').includes('Person')) {
            return n.getData('neo4jProperties.name');
          }
        }
      },
      icon: {
        content: function (n) {
          if (n.getData('neo4jLabels').includes('Movie')) {
            return "\uf008";
          } else if (n.getData('neo4jLabels').includes('Person')) {
            return "\uf007";
          }
        },
        font: 'FontAwesome',
        color: 'white'
      }
    });

</script>
</body>
</html>