While progressing with a personal project, I had the need to display a Graph Network within a SAPUI5 application that fetches data from the shiny new HANA Graph Engine.
This is what I came with, and I thought it would be useful to share the code with the SCN community that helped me a lot in so many situations!
In the Github Gist link
here you can find the complete code, as well as a sample Controller and a sample view to test it.
Please note that you still need a proper data stream to see the generated graph network, which is represented more or less like this:
{
"graph": {
"nodes": [{
"id": 11111,
"name": "Mickey Mouse",
"weight": 4
}, {
"id": 22222,
"name": "Donald Duck",
"weight": 3
},{
"id": 33333,
"name": "Minnie Mouse",
"weight": 5
}],
"links": [{
"source": 11111,
"target": 33333,
"weight": 2
}, {
"source": 22222,
"target": 33333,
"weight": 4
}, {
"source": 33333,
"target": 11111,
"weight": 2
}]
}
}
As you can see, the minimum necessary properties are "id", "name" and "weight" for NODES and "source", "target" and "weight" for LINKS.
As the names suggest, NODES will be represented as circles in the Network whereas LINKS will be represented as lines connecting NODES.
The control expose many properties to customize the behavior of the Force Layout: gravity, charge, linkDistance just to name few. You can see the corresponding meaning (and some tips) by looking at the D3 Force Layout documentation
here.
Currently, the control exposes one event to react on node selection (for example, assuming to display a network of persons, it can be used to show a personal profile of the selected node).
The control is responsive, although the solution in place is not fully functioning yet.
I leave you to play with it, but if it's in your interest I am also planning to write a more detailed blog in which I would like to describe it better and show how it can be integrated in a realistic scenario.
Thanks for reading!
Roberto.
