# The Code does not function of sample example

**URL:** <https://community.neo4j.com/t/the-code-does-not-function-of-sample-example/2090>\
**Category:** Javascript\
**Tags:** browser, cypher\
**Created:** [September 28, 2018, 4:56am UTC](https://community.neo4j.com/t/the-code-does-not-function-of-sample-example/2090 "2018-09-28T04:56:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [September 28, 2018, 4:56am UTC](https://community.neo4j.com/t/the-code-does-not-function-of-sample-example/2090/1 "2018-09-28T04:56:35Z")

</div>

Hi,  
I tried the code mentioned in the link -

> <https://github.com/neo4j-contrib/neovis.js/blob/master/examples/simple-example.html>

I altered the values suiting my data.

```
  <!doctype html>
  <meta charset="utf-8"/>
   <html>
          <head>
                    <title>Neovis.js Simple Example</title>
                     <style type="text/css">
                   html, body {
                     font: 16pt arial;
                       }
                       #viz {
                              width: 900px;
                             height: 700px;
                             border: 10px solid #456789;
                              font: 22pt arial;
                             }
                        </style>

                  <!-- FIXME: load from dist -->
                 <script type="text/javascript" src="https://rawgit.com/neo4j-contrib/neovis.js/master   
                   /dist/neovis.js"></script>

              <script
           src="https://code.jquery.com/jquery-3.2.1.min.js"
           integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>

             <script type="text/javascript">
               // define config car
              // instantiate nodevis object
              // draw
             var viz;
             function draw() {
                 var config = {
                       container_id: "viz",
                       server_url: "bolt://54.167.174.205:34866",
                       server_user: "neo4j",
                        server_password: "copper-sample-armful",
                       labels: {
                       //"Character": "name",
                      "API": {
                          "caption": "name",
                          "size": "pagerank",
                           "community": "community"
                             //"sizeCypher": "MATCH (n) WHERE id(n) = {id} MATCH (n)-[r]-() RETURN 
                           sum(r.weight) AS c"
                     }
                  },
                  relationships: {
                      "corebanking": {
                      "thickness": "weight",
                       "caption": false
                        }
                 },
                  initial_cypher: "MATCH (n:API) RETURN n LIMIT 25"
               };
              viz = new NeoVis.default(config);
              viz.render();
                console.log(viz);
               }
         </script>
      </head>
       <body onload="draw()">
        <div id="viz"></div>

         Cypher query: <textarea rows="4" cols=50 id="cypher"></textarea><br>
         <input type="submit" value="Submit" id="reload">
          <input type="submit" value="Stabilize" id="stabilize">

        </body>

       <script>
       document.getElementById("viz").style.border = "thick solid #456789";
       $("#reload").click(function() {
        var cypher = $("#cypher").val();
         if (cypher.length > 3) {
         viz.renderWithCypher(cypher);
              } else {
          console.log("reload");
           viz.reload();
               }
            });
         $("#stabilize").click(function() {
          viz.stabilize();
           })
       </script>

```

I get the output of the Primary nodes. But what is the function of the below mentioned code in script - viz.renderWithCypher(cypher); ?

```
     <script>
          $("#reload").click(function() {
            var cypher = $("#cypher").val();
            if (cypher.length > 3) {
            viz.renderWithCypher(cypher);
             } else {
            console.log("reload");
            viz.reload();
            }
        });
       $("#stabilize").click(function() {
        viz.stabilize();
          })
    </script>

```

Is it for the Secondary nodes? I entered my MATCH cypher query to expand the tree here, but of no use. And when i include the Match query in the text-box i get the blank screen.

Match query in text-box included -

Match (cc:Company) WHERE cc.name = "Century123"  
CREATE (eway:Service {name:"EWayBill", type:"Outbound", connectedTo:"SAP"}),  
(sms:API {name:"SMS", type:"Outbound", connectedTo:"SAP"}),  
(collection:Service {name:"Collection", type:"Inbound", connectedTo:"SAP"}),  
(payments:Service {name:"Payments", type:"Outbound", connectedTo:"SAP"}),  
(cc)-[:SERVICE]-\>(eway),(cc)-[:API]-\>(sms),(cc)-[:SERVICE]-\>(payments),(cc)-[:SERVICE]-\>(collection)

I also have one more question. Where do i include the CREATE cypher which is the first query to create a node.

---

<div class="post-metadata">

**Author:** ![michael.hunger](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/michael.hunger/32/27377_2.png) [@michael.hunger](https://community.neo4j.com/u/michael.hunger)\
**Post date:** [September 30, 2018, 12:10am UTC](https://community.neo4j.com/t/the-code-does-not-function-of-sample-example/2090/2 "2018-09-30T00:10:26Z")

</div>

Usually you create data from your driver or in neo4j browser.

the query you included doesn't return any data.  
You should also only use "read-only" queries there.

As you only put in the default query for APIs nodes only those are shown.

---

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [October 3, 2018, 12:29pm UTC](https://community.neo4j.com/t/the-code-does-not-function-of-sample-example/2090/3 "2018-10-03T12:29:04Z")

</div>

Hi Micheal,

[1]  
What do you mean by "read-only" queries ?

I found two types of queries, Match and Create.

So is a MATCH a read-only query ?

[2]

Hi Micheal,

Let me tell you we are doing an Official Project with Neo4j.  
When we utilize this particular code - as extracted and edited from -

neo4j-contrib/neovis.js/blob/master/examples/simple-example.html

```
 <!doctype html>
 <meta charset="utf-8"/>
 <html>
 <head>
     <title>Neovis.js Simple Example</title>
     <style type="text/css">
         html, body {
             font: 16pt arial;
         }
         #viz {
             width: 1200px;
             height: 650px;
             border: 10px solid #456789;
             font: 22pt arial;
         }
     </style>

     <!-- FIXME: load from dist -->
     <script type="text/javascript" src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js">                                    
     </script>

      <script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>

     <script type="text/javascript">
    
        var viz;
         function draw() {
          var config = {
            container_id: "viz",
            server_url: "bolt://localhost:11001",
            server_user: "neo4j",
            server_password: "***",
            labels: {
                
                "API": {
                    "caption": "name",
                    "size": "pagerank",
                    "community": "community"
                    //"sizeCypher": "MATCH (n) WHERE id(n) = {id} MATCH (n)-[r]-() RETURN sum(r.weight) AS c"
                }
               },
              relationships: {
                "corebanking": {
                    "thickness": "weight",
                    "caption": false
                   }
               },
           
           initial_cypher :"MATCH (n) RETURN (n)" ,                 
           arrows: false
            };                   
             viz = new NeoVis.default(config);
            viz.render();
            console.log(viz);
             }
        </script>
        </head>
      <body onload="draw()">
      <div id="viz"></div>

    Cypher query: <textarea rows="4" cols=50 id="cypher"></textarea><br>
    <input type="submit" value="Submit" id="reload">
     <input type="submit" value="Stabilize" id="stabilize">

     </body>

     <script>

       $("#reload").click(function() {
       var cypher = $("#cypher").val();
        if (cypher.length > 3) {
        viz.renderWithCypher(cypher);
          } else {
        console.log("reload");
        viz.reload();
          }
         });
        $("#stabilize").click(function() {
         viz.stabilize();
        })
    </script>
    <frameset cols="50%,50%">
      <frame src="frame_a.htm" frameborder="0">
      <frame src="frame_b.htm" frameborder="0">
    </frameset>
    </html>

```

We get this output -

![Neo4j-js](https://us1.discourse-cdn.com/flex021/uploads/neo4jcommunity/original/2X/8/88d5c361506cfa8f92c31546461be0d2eae594a9.png)

Instead of getting the connected links as shown in the Neo4j Desktop Version below , we get Nodes of those Relationship variables ,despite getting proper links relation in desktop version-

![Neo4j-2-desktop](https://us1.discourse-cdn.com/flex021/uploads/neo4jcommunity/original/2X/a/a549db2e8e9c9c4cec7c47a677d951b54edee5ca.png)

Please help.

---

<div class="post-metadata">

**Author:** ![michael.hunger](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/michael.hunger/32/27377_2.png) [@michael.hunger](https://community.neo4j.com/u/michael.hunger)\
**Post date:** [October 9, 2018, 10:12pm UTC](https://community.neo4j.com/t/the-code-does-not-function-of-sample-example/2090/4 "2018-10-09T22:12:07Z")

</div>

Neo4j Browser sends another query to fetch the relationships.

In Neovis you'd have to express the patterns and also return the relationships.

`MATCH (n) OPTIONAL MATCH (n)-[r]->(m) RETURN n,r,m LIMIT 100`

---

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [October 11, 2018, 9:15am UTC](https://community.neo4j.com/t/the-code-does-not-function-of-sample-example/2090/5 "2018-10-11T09:15:48Z")

</div>

Thanks Michael. What in the following code will i need to input for patterns and relationships ? I don't know the keyword against which i need to place the relationship query that you mentioned. Please help

```
         var config = {
            container_id: "viz",
            server_url: "bolt://localhost:7687",
            server_user: "neo4j",
            server_password: "sorts-swims-burglaries",
            labels: {
             
                "Character": {
                    "caption": "name",
                    "size": "pagerank",
                    "community": "community"
        
                }
            },
            relationships: {
                "INTERACTS": {
                    "thickness": "weight",
                    "caption": false
                }
            },
            initial_cypher: "MATCH (n)-[r:INTERACTS]->(m) RETURN n,r,m"
        };

        viz = new NeoVis.default(config);
        viz.render();
```

---

<div class="post-metadata">

**Author:** ![pankaj](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/pankaj/32/3822_2.png) [@pankaj](https://community.neo4j.com/u/pankaj)\
**Post date:** [May 16, 2019, 11:17am UTC](https://community.neo4j.com/t/the-code-does-not-function-of-sample-example/2090/6 "2019-05-16T11:17:36Z")

</div>

Pls type below command  
MATCH p=()-[r]-\>() RETURN p;  
your code will run fine
