Creating Complex Diagrams with the Dojo Diagrammer widget
Eric Durocher 270002J655 Comments (2) Visits (29905)
The IBM ILOG Dojo Diagrammer widget is one of the new visualization components included in the WebSphere Application Server Feature Pack for Web 2.0 & Mobile v1.1.
Dojo Diagrammer relies on the dojox.gfx module for its low-level rendering. GFX takes care of the final rendering using whatever 2D graphics technology the browser supports (SVG, VML, Canvas...). This means that you can use Dojo Diagrammer on any browser without caring of what the browser supports.
Like many Dojo widgets, Dojo Diagrammer can connect to a Dojo data store to load data from the server. The items of the data store will be represented by nodes, and there are different ways to tell the widget what are the links between nodes. For example, you can specify that a given attribute of a data item designates the parent of the item: this will create a parent/child hierarchy like in the organization chart example.
When you load business data from a server, very often the data items will have no geometry information associated to them. To make it really easy to display such business data, Dojo Diagrammer comes with a set of graph layout algorithms, which will arrange the nodes and links automatically according to the graph structure, creating a nice and easy to read representation. The tree layout used by the organization chart example is one of these algorithms, other algorithms include hierarchical, force-directed, circular and grid layouts, as well as link layouts that will route the links nicely without moving nodes. Graph layout is a very powerful feature of Dojo Diagrammer and will be covered in more details in a later post.
As you can see in the examples above, Dojo Diagrammer can be used to create a wide range of representations with nodes looking very differently. For this, the graphical contents of each node is defined by a template, which is basically a piece of 2D graphics, defined in a simple JSON format, that will be duplicated for every node of the diagram. For example, in the business process example, the template for activities contains a green rounded rectangle and a multi-line text. The template can contain data bindings that specify how to display data attributes coming from the data store: for example, the text of each activity node is bound to the "name" attribute of the corresponding data store item.
Dojo Diagrammer supports editing: in edit mode, you can move and resize nodes, create links, group/ungroup nodes, edit labels, and so on. The editing framework is extensible to let you define your own editing interactions if necessary.
Finally, of course all this works on mobile too!
Dojo Diagrammer offers many other features, be sure to check the showcase sample that comes with the WebSphere Application Server Feature Pack for Web 2.0 & Mobile v1.1. You can install the showcase on your local server after downloading the Feature pack (here are direct links to the installation instructions for WAS 8.0 and WAS 7.0). There is also an online version of the showcase here, in particular here are the live versions of the Organization Chart and Business Process Diagram demos.