An Oracle blog about Data Visualizations

  • June 26, 2014

A Guide to Diagram – Introduction

Duncan Mills
The 12.1.3 release of Fusion Middleware sees the rather exciting introduction of the new DVT Diagram component.  I've been using diagram for some time now so it's great to be able to pass on some of my experiences in the form of a series of blog articles specifically about the component. 
Before we dive into the details, let's get a high level picture of what diagram is all about.  In concept it's slightly different from your run-of-the-mill JSF component where all you do is to provide the data and set a few properties.  With diagram you may have a little more work to do, but the payback is a huge in terms of flexibility and power. 

Starting With The Basics

From a data perspective, diagram is pretty simple; it will take a collection of nodes that describe the shapes on the diagram (the boxes, diamonds, cloud and robots in the example screenshot below) and a collection of links that describe the edges (lines) that connect those shapes together. Unlike a tree or hierarchy viewer component there does not have to be any hierarchy in the data, relationships can run in any direction, and indeed there don't even need to be relationships.
The third partner in the diagram story is the layout.  This highlights one of the big differences between diagram and many other ADF components.  We realized early on that it would be impossible to come up with a definitive list of all of the ways that developers might want to lay out the shapes and links on the diagram. Just imagine the possible combinations here you have here in the way that nodes are physically laid out and how far apart they are.  Given that you have a very open unstructured set of data there is really no "correct" way to do a layout. Inevitably if we had just come up with a set of common layouts they might work for a small percentage of the community but even more folks would be asking for different views or more configurability to what we already had. Every diagram is different!

So the key point about the DVT diagram is that the layouts are not picked from a fixed set.  We ship a set of demo layouts that you can re-use, but in most cases we expect that you'll want to create your own. Rest assured, this is a topic that I'll be covering in some detail later in this series of articles.  The good news is that this ability to precisely control layout just makes the component even more useful and powerful!

Here's a screen shot of one of the diagram demos, just to wet your appetite. This example embodies a classic diagram style of visualization, however, it's just the start of what you are able to acheive.

Screen shot of one of the diagam demo applications

What Diagram is Not

Although the diagram can be interactive to a degree, for example it supports drag and drop, it is not a design surface.  Don't pick up diagram and expect to be able to move nodes around on the surface to random positions. It's primarily a visualization tool and although in the future you may be able to fully emulate a freeform vector graphics program with it, we're not there yet.  Saying that, with a little imagination, you can step way beyond simple visualization into something that works as an input device.  The Simple Rules Editor Demo is an example of this. The user of the page can build up complex expressions by dragging and dropping "facts" onto the diagram, which then displays a visual representation of the rule-set as it is being built.
Screenshot of the simple rules editor demmo

What the Diagram Can Show

As you can see from some of the screen shots included in this article, there is quite a wide range of things that can be displayed on the diagram nodes.  They can just be simple shapes or images with a label, but they can also be more complex and like the hierarchy viewer, the nodes can contain differing amounts of information depending on the zoom level and also rich content on the nodes including the use of panelCards.  In a future article we'll be looking at the content of nodes in much more detail and covering all of the possibilties.


You can go away and have a play for yourself with the online diagram demos at http://jdevadf.oracle.com to get a feel for the component in action, but the basics are simple.  The user can pan around the diagram using the mouse or the thumbnail view, and zoom, using the specialist zoom bar or mouse. Of course if the user is on a tablet then they can use their fingers with standard drag and pinch gestures to pan and zoom as well.

Zoom and pan controls Thumbnail view
The nodes in the diagram are also keyboard navigable if you don't use a mouse.  

Diagram nodes themselves can be grouped and stacked in various ways, something that we'll cover in later articles, but when you click on a particular node you may well see an activity icon which allows you to carry out some additional operations.  Here's a quick summary for reference:

Isolate control Isolate Allows you to "zoom in" to just view this node (and it's containees) and hide all other nodes
Additional Links control Additional Links When you have isolated a node clicking this icon will pull in other nodes that are directly linked to this node
Restore control Restore When you have isolated a node, this icon appears at the top is the diagram and undoes the isolation, restoring the previous view
Drill control Drill Used when nodes contain other nodes this icon allows you to drill into the container and just focus on it's contents.  The diagram renders a breadcrumb trail for you to navigate back up through the hierarchy.
Delete control Delete if your diagram node is marked as editiable (ie. readOnly="false") then this icon will appear and will trigger the nodeDeleteListener associated with the diagram
Preview Stack control Preview Stack When several nodes of the same type are "stacked together", this icon will overlay an exploded version of the stack so that you can see the individual members
Close Stack control Close Stack loses the preview overlay of the stacked node and returns back to the main diagram view
Unstack control Unstack Explodes the stack to show each node individually
Control Panel control Control Panel Located in the top / left of the diagram clicking this icon will reveal or hide the zoom controls
Overview Panel control Overviewl Panel Located in the bottom / left of the diagram clicking this icon will reveal or hide the thumbnail view
Legend Panel control Legend Panel Located in the top / right of the diagram clicking this icon will reveal or hide the legend for the diagram
Palette control Palette Panel Located in the top / right of the diagram clicking this icon will reveal or hide the palette that you can use for node types and links to drag onto an updatable diagram

How it works 

If you're curious about how the diagram is actually rendered in the page by all means, have a look with your browser's development tools.  In doing so you'll see that we actually transform the diagram into SVG within the HTML output. Being SVG we can do all of the scaling effectively as the user zooms in and out, but it also explains some of the restrictions of the diagram, such as the inability to use input components on the node (see the later article on Diagram Nodes).  When an ADF component is used on a diagram node it is actually rendered to the browser in a totally different way than it would be in the rest of the page, but of course that's not something you need to worry about.

In the Next Article

Hopefully this introductory article has ignited your interest in diagram and opened your mind to some of the potential uses for it within your applications.  In the next article in this series I'll start to look at diagram from the technical perspective, by looking at the basic data structures required to make diagram tick.

Related Articles 

The Learning Diagram Series 

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.