Cypher viewer

Create HTML page structure

The HTML page structure defined in previous example is reused with new elements to generate a cypher viewer in the page

This page contains a div for the graph and a div for the cypher viewer.

<!DOCTYPE html>
<html>
<head>
    <title>Popoto Search</title>

    <!-- Add Popoto default CSS styles -->
    <link rel="stylesheet" href="../../css/popoto.min.css">
</head>
<body class="ppt-body">

<header class="ppt-header">
    <span class="ppt-header-span">POPOTO JS</span>
</header>

<section class="ppt-section-main" style="height: 800px">
    <div class="ppt-section-header">
        <span class="ppt-header-span">Cypher viewer example</span>
    </div>

    <!-- By default the graph is generated on the HTML element with
            ID "popoto-graph" If needed this id can be modified with
            property "popoto.graph.containerId" -->

    <div id="popoto-graph" class="ppt-div-graph">
        <!-- Graph is generated here -->
    </div>

    <!-- By default the cypher viewer is generated on the HTML element with
            ID "popoto-cypher" If needed this id can be modified with
            property "popoto.cypherviewer.containerId" -->

    <div id="popoto-cypher" class="ppt-container-query">
        <!-- Cypher viewer is generated here -->
    </div>

</section>

<!-- Required scripts -->
<script src="../../js/jquery-2.1.0.min.js" charset="utf-8"></script>
<script src="../../js/d3.v3.min.js" charset="utf-8"></script>
<script src="../../js/popoto.min.js" charset="utf-8"></script>
<script>
    // detailed below
</script>
</body>
</html>

See live example using GrapheneDB to host the data.

This example can be downloaded here: cypher-viewer.zip.

The full set of examples can also be downloaded at once on the download page.

Next example: Add a result list