ADF 12.1.3 – Highlights in Data Visualization (DVT)

One of my favorite areas in ADF Faces always has been the Data Visualization [Tags] aka DVTs. I feel that we make far too little use of the power of visualization to present information and even call to action to our end user instead of raw data – as we frequently do today. The table component is probably the most widely used component in all of ADF Faces – even though it is most often used to just present raw data. The DVT components in stark contrast are overlooked or regarded as just a nice to have. I hope to bring about a change – making designers, developers and end users themselves more aware of the value of visualizations. Oracle Fusion Applications and especially the simplified UI provides an excellent example of how visualizations can be used to help end users focus on what is relevant: aggregate, exception, trend, comparison etc.

ADF 12.1.3, freshly released, brings a next wave of enrichment of the DVT components. Allowing developers to create even more useful and appealing visualizations. In this article, I want to describe and show some of these new features.

Client Side Charting Solutions

The DVT team is leveraging an increasing number of HTML 5 features. After the introduction of HTML (5) as rendering option next to Flash, we now see a rapid acceleration of the use of HTML 5 facilities. One area where this happens is with the client side charting solutions. This involves a number of chart types (Bubble, Pie, Bar, Horizontal Bar, Line, Pie, Area, Scatter and more) for which client side operations such as hide/show of series, rescale and zoom/scroll + navigate in overview window are supported. Because these operations are handled entirely on the client side, the interaction is much smoother and faster than with the server driven charts.

An example is shown below. Both pictures are based on the same data. On the left, the overview window is focused on a six month period. On the right, the time selection has been enlarged to contain over three years. Resizing and refocusing the time window is a smooth , client side operation that constantly synchronizes the line chart shown on top.

Gauges

The Gauges have been redesigned and several new types of Gauges have been introduced.

Horizontal status

With support for threshold display and reference lines

New Rating Gauge

Also supports input and can use many different styles – not just stars.

Circular status meter gauge

These circular status meters provide a new, compact way of visualizing the status (and progress). A gauge is presented as circular when the orientation attribute is thus set. reference lines can also be included in the circular presentation.

Dial gauge

The dial gauge (‘speedo-meter’) supports input (set value in addition to display value) and has many different background styles:

 

Thematic Map

Many interesting improvements in the Thematic Map component.

One is to isolate an area that allows total focus on one specific element in an area layer, such as the state of Florida in the states area layer (using attribute isolatedRowKey on areaDataLayer). In this case, to show the candidate color by county for the 2012 presidential election results, status meter gauges were stamped into a table.

Hide area layer: by hiding the base area layer, the underlying map is not shown – but the results plotted on the map are. The effect is shown in the new figure, where GDP for 2012 is represented by the marker size.

The base layer is hidden using areaStyle settings (background-color:transparent; border-color:transparent) on areaLayer. The markerZoomBehavior is set to zoom on the thematicMap.

Even though the base layer is invisible, it is still there, providing the anchors for the markers to be displayed.

Custom Base Map

Before this new release, we were stuck with the shipped base maps – true if somewhat sketchy geographical representations of the world, regions and the US. Most countries were represented only in little detail (for geographic detail, there is always the geographic map). In this release, we can start to define our own custom base layer with our own set of points on that map. That custom base layer does not have to represent an actual area in the real world. It is just a picture with hotspots defined on it. ADF DVT can position markers on those hotspots and can support interaction with these hotspots.

As an example from the ADF DVT team – a floor plan in an Office building. The work stations are the points. Markers are used to indicate free and taken work stations.

Using the source attribute on thematicMap to point to an XML file that contains the definitions of custom base maps – image plus coordinates of the anchor points (like the cities on a ‘normal’ base map).

The ability to use custom base maps opens up a large number of possibilities – creating maps for your home town or even your home, a theme park, hospitals, hot spots on a picture of a car, fantasy worlds such as Westeros in Game of Thrones, the parking lot with assigned parking etc.

A fairly small thing is the rotation attribute on Markers. This attribute helps us determine well, the rotation of a marker. With markers that are not rotational symmetric, such as arrows or airplanes, we now can specify a direction for a marker.

Using a poll to refresh the data, we can even create animation.

Diagram

The Diagram component is versatile to the extreme. It supports many different presentations and manipulations of clusters of nodes and links. Any set of elements that has references to or relationships with  other elements can be presented by this component. The component supports scaling up and down of the visualization, handles expand and collapse of container nodes and support click and drag & drop interaction.

At this point (release 12.1.3) there is only a run time, a pluggable framework that require developers to do quite a bit of JavaScript programming. In a later release, design time support is to be added.

This next Arc Diagram was created with the Diagram component. It represents the interactions between characters in Victor Hugo’s novel Les Miserables. The arcs represent coincidence of characters in a chapter, and the link-width represents number of joint appearances:

The diagram can be zoomed into using the control panel and navigation can be done using the diagram overview window.

Other examples of diagrams – build partly using the client side JavaScript layout and partly using the server side provided data, are a database designer:

and this Business Rule editor that supports drag and drop to construct business rules: