• ADF
    February 22, 2012

Dynamic Pie Graph Generation by Drag And Drop Rows from ADF Table

Arunkumar Ramamoorthy
Consulting Technical Manager
In normal scenarios, we display the graph and chart to get graphical
representation of data. In this article, we'll see how to create graph
dynamically by dragging the contents from ADF table and dropping on the

Environment : JDeveloper PS5 (

that we have a table that displays the Department's details. We'll
build a dynamic pie graph to display the Employee details for the
departments that are dragged from the Department's table.


our usecase, we need to drag the Departments from Table and Drop it on
the Pie Chart to get the Employees details corresponding to the Depts

For this, we need to add DragSource in the Dept Table and DropTarget in Emp Chart.

<af:table value="#{bindings.DeptView1.collectionModel}" var="row"
 emptyText="#{bindings.DeptView1.viewable ? 'No data to display.' : 'Access Denied.'}"
rowSelection="multiple" id="t1">
<af:dragSource discriminant="Dept"
<dvt:pieGraph id="pieGraph1" subType="PIE_MULTI"
<af:dataFlavor flavorClass="org.apache.myfaces.trinidad.model.RowKeySet"

Now that we've added the drag source and drop target, we need to
have a method in our AM/VO's impl class, that take the department number
as input and return the list of employees under it and their details as

    public ArrayList getEmpDetsForDept(int Deptno) {
ArrayList empDetsAL = new ArrayList();
getEmpView1().setWhereClause("Deptno=" + Deptno);

if(getEmpView1().getRowCount()>0) {
empDetsAL.add(new Object[]{""+Deptno,
new Double(getEmpView1().getCurrentRow().getAttribute("Sal").toString())}
while (getEmpView1().hasNext()){
empDetsAL.add(new Object[]{""+Deptno,
new Double(getEmpView1().getCurrentRow().getAttribute("Sal").toString())}
return empDetsAL;

Now, the main part comes. Pie Graphs can be based on ArrayList. So,
in our backing bean, we'll have an attribute of type ArrayList. Also,
we'll have a variable to to bind the graph for triggering PPR.

    private List chartData=new ArrayList();
private UIGraph empChart;
public void setChartData(List chartData) {
this.chartData = chartData;
public List getChartData() {
return chartData;
public void setEmpChart(UIGraph empChart) {
this.empChart = empChart;
public UIGraph getEmpChart() {
return empChart;
As we need to find out the Departments that are dragged from
table, we'll have a method in the backing bean to get the list of
dragged Departments, iterate through them, pass each to the AM / VO
method created to get Emp details and then construct the ArrayList.

    public DnDAction dropDeptInPie(DropEvent dropEvent) {
RichTable table = (RichTable) dropEvent.getDragComponent();
Transferable t = dropEvent.getTransferable();
DataFlavor<RowKeySet> df = DataFlavor.getDataFlavor(RowKeySet.class, "Dept");
RowKeySet rks = t.getData(df);
Iterator iter = rks.iterator();
if(getChartData()!=null) getChartData().clear();
while (iter.hasNext()) {
List key = (List)iter.next();
JUCtrlHierNodeBinding rowBinding = (JUCtrlHierNodeBinding) table.getRowData();
Row row = (Row) rowBinding.getRow();
String Deptno = row.getAttribute("Deptno").toString();
BindingContainer bindings = getBindings();
OperationBinding operationBinding = bindings.getOperationBinding("getEmpDetsForDept");
operationBinding.getParamsMap().put("Deptno", Deptno);
ArrayList result = (ArrayList)operationBinding.execute();
if (operationBinding.getErrors().isEmpty()) {
else setChartData(result);

return DnDAction.NONE;
public BindingContainer getBindings() {
return BindingContext.getCurrent().getCurrentBindingsEntry();

In order to make the Pie Graph use the ArrayList as
source, we need to bind this to the tabularData Property of the pie
graph. Let us also bind the chart to the variable we created in backing
bean and set its dropListener to the method created above. Now, our
pieGraph's source in jspx page would look like

                  <dvt:pieGraph id="pieGraph1" subType="PIE_MULTI"
<af:dropTarget dropListener="#{pageFlowScope.DnDBean.dropDeptInPie}">
<af:dataFlavor flavorClass="org.apache.myfaces.trinidad.model.RowKeySet"

Now, let us run the page, select couple of Departments and Drop them on the Pie chart.


we've dragged the departments 10 & 30, and dropped them on the
chart to get the Salary of the employees belonging to those departments
as slices.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.