14. Creating Graph in OAF

Here is an example of how to create a Bar Graph in OAF. Graphs are created with the graphTable region style.

1) Create a new OA page:

=========================

Right click on project (xxcus) --> New --> Web Tier --> OA Components --> select 'Page' item. Click OK. (This will open a popup window)

          Name: XxcusGraphDemoPG

          Package: xxcus.oracle.apps.fnd.graphdemo.webui

2) Create a new view object (VO):

=========================

Right click --> New View Object (This will open a wizard having 7 steps).

Step 1

Package: xxcus.oracle.apps.fnd.graphdemo.server

Name: XxcusEmpGraphVO

Choose the radio button 'Read-only Access' (as we are not performing any DML operation). Click Next.

Step 2

Enter the below query in 'Query Statement':

    select ename, sal from employee

Step 3

Generate Impl class for the view object.

Keep defaults for step 4, 5, 6 & 7 and click Finish. Save All.

3) Create a new Application Module (AM):

=========================

Step 1

Package: xxcus.oracle.apps.fnd.graphdemo.server

Name: XxcusGraphDemoAM. Click Next.

Step 2

Here we will add an instance of the VO created in (2). Select XxcusEmpGraphVO from 'Available View Objects' and shuttle it to 'Data Model' using ">" button.

Keep defaults for all other steps (3, 4). Click Finish.

4) Create a new Controller (CO):

=========================

Right click on pageLayout region and create a new controller

Name: XxcusGraphDemoCO

package: xxcus.oracle.apps.fnd.graphdemo.webui

5) Creating the Page Layout & Setting its Properties

=========================

1) Create a new region under pageLayout of type graphTable. This will automatically create a default graphs container. Also, it will add a graph to the graphs container along with two default graphData columns.

Now change the properties for each field from property inspector as shown below:

pageLayout:

     ID: pageLayoutRN

     AM Definition: xxcus.oracle.apps.fnd.graphdemo.server.XxcusGraphDemoAM

     Window Title: Employee Salary Graph Page

     Title: Employee Salary Graph

graphTable:

ID: graphTableRN

Graph render style: graph

set these properties for the graph:

ID: empSalGraph

Graph Type: vertical clustered bar

Title: Employee Name vs Salary

Size: Medium

X-axis label: Employee Name

set properties for graphData1:

ID: xAxisData

View Instance: XxcusEmpGraphVO1

View Attribute: Ename

Purpose in Graph: groupLabels (it represents data on X-axis)

set properties for graphData1:

ID: yAxisData

View Instance: XxcusEmpGraphVO1

View Attribute: Sal

Purpose in Graph: data (it represents data on Y axis)

Prompt: Salary

The declarative page structure in jDev will be similar to as shown below:

In PR method, we call a method of AM to intiate query:

public void processRequest(OAPageContext pageContext, OAWebBean webBean) {
    super.processRequest(pageContext, webBean);
    OAApplicationModule am = pageContext.getRootApplicationModule();
    am.invokeMethod("initQuery");
}

Code for initQuery method in XxcusGraphDemoAMImpl.java file:

public void initQuery() {
    try {
        XxcusEmpGraphVOImpl vo = getXxcusEmpGraphVO1();
        vo.setMaxFetchSize(-1);
        vo.executeQuery();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

Below is how the page will appear: