Map Visualization using Graphite in Silverlight

Have you ever seen how boardrooom connections page of WotNews, Australia (http://wotnews.com.au/boardroom_connections/) works? Few days back, I was working on a similar requirement where we had Silverlight 3/4 to implement the same feature. While searching for Silverlight feature to implement this, we discovered Graphite (a product from Orbifold) which could give similar features as required.

If you are new to Graphite then for you, Graphite is a diagramming control with a (auto-layout) spring-embedder algorithm for Silverlight. The control is designed to display a small set of data without having to define a particular layout or without much customization. The Silverlight version of it can be used for website navigation, inside SharePoint, to visualize CRM/Dynamics relationships etc.

Conceptually, Graphite control works managing components at 2 levels - one at Visual level and another at Non-Visual level. Visual level ensures creation and maintenance of visual parts (node, connector etc.) and Non-visual level ensures information attached to each node is maintained in the background. Graphite control represents the visual part in the form of GraphCanvas and the non-visual part in the form of Graph classes.

Adding a new Node could be represented as -

Courtesy : http://visualizationtools.net/

To use it in the application, we need/may implement the following steps.

1) Add Graphite control to the XAML code (download Graphite control from http://visualizationtools.net/)

2) On the click of parent Node, get the data from database using a RIA service (can use other methods of communication like WCF Services, ASP.NET Web Services, Sockets calls, REST calls to fetch data from the database)

3) Create child nodes using the data fetched from the database and set the Info property of the Node if you want to display anything on MouseOver or Click of the node as a tooltip or in a separate panel.

Now, I will take you through a sample code implementing Graphite control for visualization.

1) In XAML code, put the following code to include Graphite control in the page

2) Then we need to put the code to load data from the database using a WCF service and populate data by adding nodes to the Graphite control. Use AddNode and AddEdge methods of Graphite control to add nodes and links between nodes respectively.

In this code, I have tried to call a WCF service (be default asynchronous) and populate data on the completion of service call. Here I will not talk about how to build a WCF service because I assume you all know how to build a WCF service to fetch data from a database and send it back to client for further usage in the client side.

Once you complete the code then run the project to see the output. You will see a fantastic mapper and click on each node to see how it expands the child nodes and rebuilds the layout. You can explore functionalities like changing color and style of nodes and connectors by defining and changing the styles in the XAMP page.

I am thankful to Francois of Orbifold for providing required inputs to work with Graphite control.

Please post if you have any questions while implementing it.