Firebird News

Monday, June 04, 2012

The simplest VivaGraphJS graph test

Creating a graph in  VivaGraphJS with webgl

Create a graph with user id edges and for data
By definition, a Graph is a collection of nodes (vertices) and links (also called edges - identified pairs of nodes). In VivaGraph.JS nodes can be any object e.g. a string, a number, a function, another graph or object, and so on.

The graph g can be grown in two ways. You can add one node at a time:
g.addNode('1','User name 1');
g.addNode('2','User name 2');

Now graph g contains two nodes:1and 2. You can also use addLink()method to grow a graph. Calling this method with nodes which are not present in the graph creates them,If nodes already present in the graph 'addLink()' makes them connected
g.addLink('1', '2');

and at the end we add render loop

var renderer = Viva.Graph.View.renderer(g);;

here is the final output when loaded on the onload function for the html page , this is for the two users from above

we can add other nodes for example 3
g.addNode('3','User name 3');
and then create the links between them

g.addLink('2', '3');
g.addLink('3', '1');

No comments: