ADF DVT: Sunburst to quickly inspect the hierarchical composition
The recent JDeveloper/ADF 11gR1 Patch Set 6 release introduced the Sunburst component, one of the many data visualization components in ADF. Sunburst (sometimes called Rings Chart) provides an attractive and useful way to quickly learn about the hierarchical build of certain values. One well known example is the space usage on a storage device, such as on the Gnome desktop on Linux – see on the right.
The left side of the figure shows the directories on the file system and their relative and absolute size. The rings chart or sunburst makes it abundantly clear which directories contain the most data and which subdirectories inside are the big ones.
The ADF DVT Sunburst component allows us to create a similar representation of the build up of a values from their constituents and their constituents. A simple and not very exciting example is presented in this article: the salary distribution in table EMP – per department (level 1) and per employee (level 2). We will also compare this presentation as sunburst with the counterpart presentation using Treemap. The two are quite similar and can be used in similar circumstances, depending on whether the focus of using the data visualization is on comparing the components – which fits in with Treemap – or on inspecting the composition of a many-layer hierarchy – which Sunburst can handle much better.
The result of the steps described in this article:
In this article, I will demonstrate the simplest, frankly most boring and probably easiest sunburst I can create: one that demonstrates the relative salaries in the well known departments in table EMP. A data bound sunburst uses one or more ViewObject usages. When multiple usages are bound in the sunburst – as you almost always will want to do because otherwise the sunburst is just a pie chart – then these usages need to be nested.
The Model project in my example is a plain old ADF BC project that uses a JDBC connection to the SCOTT schema. It contains two read only ViewObjects that have been linked using a ViewLink. The first ViewObject returns the identifier, name and sum as well as average salary of the departments:
The second ViewObject just returns names and salaries of the employees along with their deptno:
The ViewLink that links these ViewObjects is based on the join on deptno.
The Data Model in the Application Module is defined as follows:
The Data Control has the same structure of course:
With this Data Control available, it is dead easy to create the Sunburst that will provide all this insight in the relative salaries in our departments.
Create JSF page SalarySunburst.jsf.
Drag the DepartmentMasters1 collection from the Data Control palette to the new page. Drop it as Sunburst:
The Sunburst editor appears, with the collection preselected:
Select the value: the attribute that determines the relative size of the top level ring-segment in the sunburst; this is the sum of the salaries in the department. The Label is the header shown for the top level consegments; it is set to the name of the department.
Next, select the detail collection DepartmentDetails – to configure the second level of ring segments. This level represents the individual employees and their salaries through segments within the department level ring segments. Select the salary as the attribute providing the value to determine the segment size and set the label to ename. Then define a grouping rule to specify that the employee level areas should be colored based on Job.
Press OK to complete the sunburst.
In order to make it possible for the end user to collapse and expand segments, we have to enable drilling on each node (each level) in the sunburst. Select the node, then in the Advanced section of the property inspector, set binding to insert or insertAndReplacse.
Next, run the page. The sunburst page comes up, displaying the following visualization:
We can collapse (and re-expand) segments:
Compare to Treemap
As was mentioned before, Sunburst and Treemap are somewhat similar. Both visualize the hierarchical build up or composition of certain numerical values. We can present the Salary distribution in table EMP using a Treemap as follows:
The treemap allows for easier comparisons – for example to find out the relative size of the employee incomes. With more than two or three levels, the Treemap will not be very useful for a one view overview. This is demonstrated by the following comparison between sunburst and treemap:
Download JDeveloper 12c (12.1.2) application: SalarySunburst.
ADF documentation on Sunburst: http://docs.oracle.com/middleware/1212/adf/ADFUI/dv_treemap.htm#BEHHCGAI.
- ADF DVT: Using the Tree Map visualization component – to compare relative sizes and distributions
- ADF DVT – Scaling TreeMap components for comparisons across masters and categories
- ADF 11gR1 – new Hierarchical Viewer for visually pleasing representation of data structures
- Hierarchical ADFTree with JDeveloper 11g
- Creating an ADF Faces Dynamic Table with multi-faceted Head-to-Head comparison between records
- Exploring Data Visualization with an HTML 5 Canvas based Tag Cloud powered by JSON
- Oracle ADF Virtual Developer Day 2013
- The AMIS Summary of Oracle OpenWorld 2013 is available for download – 60-page white paper
- OOW13: summarizing one week and 2000 sessions in 3 hours and a bit – the yearly AMIS OOW Review session – 10th October
- Case Study: A Case of Fusion Middleware
- Het Oracle OpenWorld Preview Evenement (5 september 2013) – 15 sprekers & sessies
- ADF 12c: Using WebSockets to implement client to client push (in a scalable manner)
- ADF 12c – The Hierarchical Mystery Tour – Treemap, Sunburst, Treetable, Hierarchy Viewer and Thematic Map
- JDeveloper 12c & ADF 12c: Launch of the next generation
- Live match report using JMS, BAM, ADF Push and Data Visualization