ArangoDB, How can I display graph? - graph

Question

I am new to arangoDB. I create document collection 'sitetestcom' and edge collection 'linking'. In ArangoDB Web Interface, I set Graph Viewer Configuration with Vertex collection to sitetestcom and Edge collection to linking. But no graph is display, just 2 Vertices
How can I display graph?
Thanks in advance for helping.
Collection: sitetestcom, Type: Document
[ { "_id" : "sitetestcom/4156515209", "_rev" : "4156515209", "_key" : "4156515209", "url" : "http://sitetest.com/sentimancho", "titre" : "Sentimancho " }, { "_id" : "sitetestcom/4144718729", "_rev" : "4144718729", "_key" : "4144718729", "url" : "http://sitetest.com/infogerance", "titre" : "Infogérance " }, { "_id" : "sitetestcom/4153107337", "_rev" : "4153107337", "_key" : "4153107337", "url" : "http://sitetest.com/category/annuaire", "titre" : "Annuaire " }, { "_id" : "sitetestcom/4146946953", "_rev" : "4146946953", "_key" : "4146946953", "url" : "http://sitetest.com/creation-site", "titre" : "Création site" }, { "_id" : "sitetestcom/4154876809", "_rev" : "4154876809", "_key" : "4154876809", "url" : "http://sitetest.com/jardinchic", "titre" : "JardinChic " }, { "_id" : "sitetestcom/4151993225", "_rev" : "4151993225", "_key" : "4151993225", "url" : "http://sitetest.com/category/non-classe", "titre" : "Non classé " }, { "_id" : "sitetestcom/4128924553", "_rev" : "4128924553", "_key" : "4128924553", "url" : "http://sitetest.com/", "titre" : "Référencement " }, { "_id" : "sitetestcom/4135871369", "_rev" : "4135871369", "_key" : "4135871369", "url" : "http://sitetest.com/infogerance/", "titre" : "Infogérance " }, { "_id" : "sitetestcom/4140589961", "_rev" : "4140589961", "_key" : "4140589961", "url" : "http://sitetest.com/hebergement-mutualise", "titre" : "Hébergement mutualisé " }, { "_id" : "sitetestcom/4145046409", "_rev" : "4145046409", "_key" : "4145046409", "url" : "http://sitetest.com/developpeur-wordpress", "titre" : "Développeur WordPress " }, { "_id" : "sitetestcom/4131152777", "_rev" : "4131152777", "_key" : "4131152777", "url" : "http://sitetest.com/blog-devenir", "titre" : "" }, { "_id" : "sitetestcom/4139541385", "_rev" : "4139541385", "_key" : "4139541385", "url" : "http://sitetest.com/contact", "titre" : "Contact " }, { "_id" : "sitetestcom/4135543689", "_rev" : "4135543689", "_key" : "4135543689", "url" : "http://sitetest.com/creation-site/", "titre" : "Création site" }, { "_id" : "sitetestcom/4148257673", "_rev" : "4148257673", "_key" : "4148257673", "url" : "http://sitetest.com/serp-domination", "titre" : "SERP Domination " }, { "_id" : "sitetestcom/4150682505", "_rev" : "4150682505", "_key" : "4150682505", "url" : "http://sitetest.com/category/portfolio", "titre" : "portfolio " }, { "_id" : "sitetestcom/4130759561", "_rev" : "4130759561", "_key" : "4130759561", "url" : "http://sitetest.com/extension-magento-gestion-stocks", "titre" : "Extension Magento gestion des stocks " }, { "_id" : "sitetestcom/4149699465", "_rev" : "4149699465", "_key" : *"4149699465", "url" : "http://sitetest.com/devis-audit-referencement", "titre" : "Devis Audit Réferencement " }, { "_id" : "sitetestcom/4150027145", "_rev" : "4150027145", "_key" : "4150027145", "url" : "http://sitetest.com/offre-tout-compris", "titre" : "Offre tout compris " }, { "_id" : "sitetestcom/4140262281", "_rev" : "4140262281", "_key" : "4140262281", "url" : "http://sitetest.com/portfolio-large", "titre" : "Portfolio " }, { "_id" : "sitetestcom/4155401097", "_rev" : "4155401097", "_key" : "4155401097", "url" : "http://sitetest.com/communique-de-presse", "titre" : "Communiqué de presse " }, { "_id" : "sitetestcom/4150354825", "_rev" : "4150354825", "_key" : "4150354825", "url" : "http://sitetest.com/referencement", "titre" : "Référencement" }, { "_id" : "sitetestcom/4148585353", "_rev" : "4148585353", "_key" : "4148585353", "url" : "http://sitetest.com/netlinking", "titre" : "Netlinking " }, { "_id" : "sitetestcom/4154155913", "_rev" : "4154155913", "_key" : "4154155913", "url" : "http://sitetest.com/informatique", "titre" : "Informatique " }, { "_id" : "sitetestcom/4153631625", "_rev" : "4153631625", "_key" : "4153631625", "url" : "http://sitetest.com/immobilier", "titre" : "" }, { "_id" : "sitetestcom/4135216009", "_rev" : "4135216009", "_key" : "4135216009", "url" : "http://sitetest.com/referencement/", "titre" : "Référencement" }, { "_id" : "sitetestcom/4130431881", "_rev" : "4130431881", "_key" : "4130431881", "url" : "http://sitetest.com/cables", "titre" : "cables" } ]*
Collection: linking, Type: Edge
[ { "_id" : "linking/4153435017", "_rev" : "4153435017", "_key" : "4153435017", "_from" : "sitetestcom/4131152777", "_to" : "sitetestcom/4153107337", "what" : 1 }, { "_id" : "linking/4155204489", "_rev" : "4155204489", "_key" : "4155204489", "_from" : "sitetestcom/4140262281", "_to" : "sitetestcom/4154876809", "what" : 1 }, { "_id" : "linking/4154483593", "_rev" : "4154483593", "_key" : "4154483593", "_from" : "sitetestcom/4140262281", "_to" : "sitetestcom/4154155913", "what" : 1 }, { "_id" : "linking/4152320905", "_rev" : "4152320905", "_key" : "4152320905", "_from" : "sitetestcom/4130759561", "_to" : "sitetestcom/4151993225", "what" : 1 }, { "_id" : "linking/4151206793", "_rev" : "4151206793", "_key" : "4151206793", "_from" : "sitetestcom/4130431881", "_to" : "sitetestcom/4150682505", "what" : 1 }, { "_id" : "linking/4153959305", "_rev" : "4153959305", "_key" : "4153959305", "_from" : "sitetestcom/4140262281", "_to" : "sitetestcom/4153631625", "what" : 1 }, { "_id" : "linking/4155728777", "_rev" : "4155728777", "_key" : "4155728777", "_from" : "sitetestcom/4148585353", "_to" : "sitetestcom/4155401097", "what" : 1 }, { "_id" : "linking/4156842889", "_rev" : "4156842889", "_key" : "4156842889", "_from" : "sitetestcom/4151993225", "_to" : "sitetestcom/4156515209", "what" : 1 } ]

Answer 1

I imported your collections into ArangoDB.
Just a heads up: The document collection is not valid JSON, as there are some asterisks * in the data, which had to be removed first.
To the issue at hand.
When you click on the Graph menu, you can select the collections or graphs and below that is an "Advanced" box. If you click on it, it will open up a form. There are some initial settings, which you can change.
For now, without changing anything here, click on Start.
You might see a vertex or an empty graph. Don't worry.
The graph viewer by default displays a random vertex at start, but you can select a specific vertex by clicking on the "Filter" icon on the top right of the graph window.
Click this icon.
On the filter form that should have appeared now, click on the attribute name list-box and select _key.
In the attribute value field, copy and paste this key: 4140262281 (This is a vertex key from the document collection, that you attached to the question).
You should now have gotten a small graph consisting of that vertex and 3 other ones, connected by edges.
Now, if your data had more connections, you would be able to click on the vertices and any connected ones, would also get displayed.
The reason, that you were seeing only the two vertices in your screenshot, above, was, that there are no more edges connecting other vertices to those ones.
Try entering the vertex key (from the screenshot) in the filter: 4130431881. You should again get only those two.
Now, let's say you wanted to connect this vertex to the one I showed you previously.
Open up the collections, proceed into the linking collection and click the + button on the top right, in order to create a new edge-document.
Create the edge:
In the _from field enter: sitetestcom/4140262281
In the _to field enter: sitetestcom/4130431881
Hit create.
Now go back to the graph viewer and start the graph: Filter again by _key == 4140262281.
You should now see the 4140262281 Vertex and the newly connected 4130431881 vertex.
Now, if you click on the 4140262281 vertex, its connected vertex 4150682505 should appear.
Finally, in order to give the vertices a more user friendly naming (I took your titre attribute), click on the wheel button next to the filter, and click on 'vertices'-'label'.
Replace the _key entry with titre and hit Change.
You should now see the titles of the vertices instead of the _keys.
Hope that helped.
Please also take a look at this informative screen-cast from Michael, who wrote the graph viewer: https://www.youtube.com/watch?v=ASR7AX4bWjA