title: Visualizing Neo4j graphs with Vis.js
body: <p>I want to visualize Neo4j graph on my web interface. So I'm using <code>Netwok</code> of <code>Vis.js</code>. When I specify the JSON file like on this example it works fine:</p>
  
  <pre><code>    var container = document.getElementById('graph');
      var options = {         
          clickToUse : true,
          edges: {
  
          },
          nodes: {
  
          }
      };
  
  
      var json= {
                  "nodes":[
                      {
                          "id":"203437",
                          "label":"test",
                          "properties":{"id":"1","name":"test","uuid":"23e0a5f0-9f73-11e7-a866-7427e54567dc3"}
  
                      },
                      {
                          "id":"200624",
                          "label":"test 2",
                          "properties":{"id":"2","name":"test 2","uuid":"045ea890-9f72-11e7-a866-7427ea637dc3"}
  
                      }
                  ],
                  "relationships":[
                      {
                          "id":"164107",
                          "type":"IS_IN",
                          "from":200624,
                          "to":203437,
                          "properties":[]
                      }
                  ]
              };
  
        var g = {
                  nodes: json.nodes,
                  edges: json.relationships
              }; 
      var network = new vis.Network(container, g, options);
  </code></pre>
  
  <p>But when I try to retreive it using this <code>JavaScript</code> function:</p>
  
  <pre><code>    getDataFromCypherQuery: function(request, callback) {
          var json = {
              "query": "MATCH path= (I:Person)-[IS_IN*1..1]-() WHERE I.name=~'.*" + request + ".*' RETURN path"
          };
  
          var res = $http.post( NEO4J_URL, json, config)
              .success(function(data) {
                  if (callback &amp;&amp; callback.success &amp;&amp; typeof(callback.success) === 'function') {
                      callback.success(data);
                  }
              })
              .error(function() {
                  if (callback &amp;&amp; callback.error &amp;&amp; typeof(callback.error) === 'function') {
                      callback.error();
                  }
              });             
          return res;
      }
  </code></pre>
  
  <p>It does not work, because the <code>JSON</code> result is not the same and does not respect the structure that <code>vis.Network</code> expects. In fact the result that I'm getting with this function looks like this:</p>
  
  <pre><code>  "nodes":[
              {"http://localhost:7474/db/data/node/203437"},
              {"http://localhost:7474/db/data/node/200624"}
            ]
  
    "relationships": [
              {"http://localhost:7474/db/data/relationship/164107"}
            ]
  </code></pre>
  
  <p>So instead of having details in <code>JSON</code> format, I'm getting a link to the node or relationship.
  How can I solve that?</p>