Drill Down Graph

It has been long time since our last post. Fortunately we have been quite busy. For this post, we have decided to show you how to implement a “drillable” graph.

Although documentation is out there, we couldn’t find a proper tutorial for this task, which mean that it could possible save you some time doing the proper research.

Key Fact: At difference of what you might have originally thought, the drillable functionality doesn’t depend on Master-Detail relationships between view objects (when your model is using ADF BC). Instead, it will look into one viewObject and from there, the functionality is implemented by the graph component according to the bindings definition configuration.

Key Fact #2: Don’t try to implement this solution using, for example, a PieChart graph. It won’t work. We are not sure why it won’t work so hopefully someone that reads this article will help us and point us to the answer.

We will explain you step by step so you can actually understand what is going on rather than just copying and pasting some random code into your application. Example will be based on Departments and Employees from HR Schema.

We are using JDeveloper 12.c but this should work in previous version as well. Please let know if it does not. So lets start by dragging and dropping the EmployeesVO from the DataControl into our page and selecting as the Bars type.

Now we logically want the bars to represent the salary and the department to be shown in the X axis:

If we run the application now, this is what we are going to get. It is basically all salaries for employees in all the departments:

Having a look to the page definition we see the following:

Now, we want to group by departments (agregateDuplicates) and we want the salary to be SUMMED (defaultAgregateType)

After we apply the changes and we re run the application, we can see now that salaries are summed and grouped by departments

Now, we want to drill down by department. So for this, we need to go again to the graph’s page definition and specify how the hierarchy is supposed to work. We need to specify what is the drillable item (item) and what are we going to show after the drill is done (child). Also, we need to tell that the graph will be replace when drilling.

And last thing to do is to indicate that the graph is drillingEnabled.

After all is done, this is what we get by running the application:

If we select department 80 we drill down:

Great! Now, what can we do to improve the presentation and the user experience? Two things:

1.- Show a multicolored graph rather than just one colour for the bars. Simple, just go to the page definition file (not the source code) and edit the graph, click Swap Bars With  and save your change.

After running the application you will see:

Drilling down:

2.- As you can imagine, displaying the DeparmentId  is not a real use case. So in order to show the department name you could do the following. You need to create a ViewCriteria for DepartmentVO based on DepartmentId.

Now, you need to add a view accessor to DepartmentsVO in the EmployeesVO. You can rename it EmpDepartment for example.

Edit it and apply the ViewCriteria and add the binding variable value to be DepartmentId.

Add the transient attribute DepartmentName and base it on a groovy expression as follows:

In the view controller project, go to the source code of the graph’s page definition and replace DepartmentId with DepartmentName.

This should be enough. Run your application and you are done:

We are currently working into an alternative way to ‘drillDown’ graphs. This approach won’t be using standard graph functionality but taskflow navigation instead.