Translate

Saturday, November 21, 2015

Drill down Bar/Pie Chart in Oracle MAF

This month I will be focusing on Oracle MAF. (Mobile Application Framework). I am using the latest version of MAF as of November 21, 2015. (MAF 2.2)

In this post, I will explain how to implement drill down in dvt charts in Oracle MAF, below is what we will be looking to accomplish by the end of the post.




First image is the initial page, and when you tap on the "Female" slice, 2nd image opens and if you tap on "Male" slice, 3rd image opens. Drill back will take you to the first image.

MAF provides drilling capability charts from 2.2. We need not use multiple pie charts or multiple amx pages, this is a single amx page and single dvt pie chart component.

Lets see how to implement in steps below : (will be working on some dummy data for the blog)

1. Create a simple POJO class (calling it Chart) containing two attributes name label and value. (If it is bar, you would want to go with group, series and value).

2. Point the value of the pie chart to a list of Chart objects.

3. Populating the list to show some data initially. This will be the default activity in the task flow.


4. Now, lets move on the UI. We have properties such as "drilling" and "drill Listener".


Drilling attribute should be set to "on" for drilling to be enabled. I have an EL there instead of "on" is because we need drill down only for 1 level and 2nd level should not be drillable.

5. drillListener in the bean will have a parameter of DrillEvent (just like actionEvent for actionListener).


6. We can get the name/label of the slice from drillEvent.getSeries().
Couple of SOP's above will print as

D/JVM     ( 1768): Drill Series : Female

D/JVM     ( 1768): Drill Group : Group 1


We can write any logic here based on what we need to do and here I am doing dummy operations for the next graph to come up.

7. The last chart data is stored in another variable backupChart before proceeding to the drill operation. So, that when I drill back, I can show the same data.

8. Code for drill back is as below:


I am disabling the drill back button based on the value on drillBackVisible.

So, our goal is accomplished here and we can do drill downs on these charts in MAF easily as above..



No comments:

Post a Comment