JDeveloper 11g: Contextually Linking the Stacked Bar Chart to an ADF Data Table – synchronize data component when clicking on chart

One of the powerful features for creating rich pages, including dashboards, is the ability to refresh and synchronize data components on a page by clicking an element in a chart. With the description of the stacked bar chart in Getting those Rich Charts going – Introducing the ADF Faces Stacked BarChart, it is just a little step to linking the chart to a data table component. What we are about to implement is the following functionality:

Whenever I click on a stack in the stacked bar chart – representing a group of employees in a specific job in a certain department – the table of employees below the chart is refreshed to only list the employees that belong to the selected stack. Of course the synchronization of the table with the chart is done automatically and AJAX style with a partial page refresh.

The first step required for this functionality
– building on the page already created in the article referenced above – is the creation of a new ViewObject EmployeesInJobInDept that selects employees based on two bind parameters, one for job and one for department.

 
 
Add this ViewObject to the data model of the Application Module.

Now drag the EmployeesInJobInDept1 collection from the Data Control palette to the page, dropping it as an ADF Read Only Table.

 
Enable sorting, pick the desired ordering of the columns etc. Then press OK.

 
Now we need to cater for the execution of the ViewObject (query), providing proper values for the bind parameters.

The easiest, most straightforward steps are:

1. Drag the Execute With Params method under the EmployeesInJobInDept1 collection to the page, dropping it as a Command Button.
 
2. Go to the page definition for this page:
 
 
Even though we created a Command Button, we do not really intend to ever use it. In fact, we will remove it from the page shortly. However, the drag and drop of the Operation as Command Button was the quickest way of creating the required element in the Page Definition file. Now we will create an ‘automatic’ way for performing the Execute With Params operation.

3. Inside the Executables section in the Page Definition, add an InvokeAction element.

4. Bind it to the ExecuteWithParams element that created when we dropped the Command Button on the page.

5. Set Refresh to always – a bit crude but it does the job. At a later stage we could find a more refined setting for the Refresh properties.

6. Set the NDValue property for the two parameters for the
ExecuteWithParams invoke. They will refer to properties job and deptno
in the managed bean EmpSalBarListener:

The value for the department (bind) parameter is to be derived from a deptno property on the managed bean EmpSalBarListener. This property will be set in the ClickListener method, whenever the chart is clicked on.

We do likewise for the jobtitle parameter, binding it to the job property in the EmpSalBarListener bean.
 
7. Now we can return to the page and remove the Command Button.

8. Set PartialSubmit is true for the Chart.
 
9. Set the PartialTriggers attribute for the table to (include) id of the chart component:

 
This ensures that whenever the chart is clicked, a partial page refresh is initated that includes refreshing the table component.

11. The final step is the creation of the bean properties deptno and job in the EmpSalBarListener bean, and ensuring they are set in the ClickListener method:

String job = (String) graph.getGraphDataModel().getDataAccess().getMemberMetadata
                            ( DataDirector.ROW_EDGE
                            , 0 // layer
                            , iRowNum/*slice*/
                            , MetadataMap.METADATA_LONGLABEL
                            );
String deptno = (String)graph.getGraphDataModel().getDataAccess().getMemberMetadata
                              ( DataDirector.COLUMN_EDGE
                              , new int []{0,iGrpNum,0} // I do not know what the first and last element in
                                                       // the int array are doing                                                                             
                              , 2 // this parameter apparently specifies which dimension’s value
                                  // is returned: 0 is Data Point 0 (Sum of Sal), 1 is Job (Data Point 1)
                                  // and 2 is Group (Deptno)
                              ,0
                              , MetadataMap.METADATA_LONGLABEL
                              );
this.setDeptno(deptno);
this.setJob(job);

Note: using the code suggested by Katia Obradov on the OTN Forums: http://forums.oracle.com/forums/thread.jspa?forumID=381&threadID=506982, it should be easier to get to the Deptno:

String deptno = m_graph.getGraphDataModel().getDataAccess().getSliceLabel
                 ( DataDirector.COLUMN_EDGE
                 , iGrpNum
                 , MetadataMap.METADATA_LONGLABEL
                 ); 

Let’s run the page.

 
When I click kon the bluegreen stack for Manager in Department 30, the table is immediately refreshed:

 
The same thing happens when I clickk on the Salesmen stack in Department 30:

 
What we have achieved is an almost entirely declarative, visually appealing, functionally rich user interface. We can use the graph to select the data of interest and have the rest of the page synchronized with that selection.

Of course it could also work the other way round: the graph is synchronized with an element selected in the table, or another graph.