Thursday 10 January 2013

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:






12 comments:

  1. Can we add this graph region dynamically? And associate a dynamic VO to this graph region at runtime so that the graph can change paged on the input selected by the user? Please let me know.

    thanks and Reg
    Srikanth Ramaraju

    ReplyDelete
    Replies
    1. Hi Srikanth,

      You can catch OAGraphTableBean bean in controller and use setGraphDetails method for setting its various properties.

      Thanks,
      Sushant

      Delete
  2. hi Sushant,
    Please , can you provide some pointers to implement setGraphDetails method. I am unable to generate graph at run time using this method.

    Thanks and regards,
    Joshua

    ReplyDelete
    Replies
    1. Hi Joshua,

      Try using like this:

      Vector graphs = new Vector();
      OAGraphTableBean graphTable = (OAGraphTableBean)webBean;
      Dictionary graphBarDetails = new ArrayMap(10);

      // Here, set properties of graph
      graphBarDetails.put("AGRFUNCTION", "none");
      graphBarDetails.put("GRAPHTYPE", "vertical clustered bar");
      graphBarDetails.put("GRAPHTITLE", "Graph Title");
      graphBarDetails.put("YAXISLABEL", "Label Y ");
      graphBarDetails.put("GRAPHSIZE", "medium");
      graphBarDetails.put("CUSTGRAPHWIDTH", "");
      graphBarDetails.put("CUSTGRAPHHEIGHT", "");
      graphBarDetails.put("DISPLAYTOOLTIP", BooleanUtils.getBoolean(true));
      graphBarDetails.put("XAXISLABEL", "");
      graphBarDetails.put("DRILLDOWNURL", "");
      graphBarDetails.put(DISPLAYED, BooleanUtils.getBoolean(true));

      Vector graphCols = new Vector();
      for(int j=0; j<2; j++) {
      Dictionary graphData = new ArrayMap(5);
      graphData.put("VIEWUSAGENAME", pViewUsage);
      if(j ==0) {
      graphData.put("VIEWATTRIBUTENAME", "Attribute1");
      graphData.put("GRAPHDATASTYLE", "data");
      graphData.put("GRAPHDATAPROMPT", "Graph data prompt");
      }
      else {
      graphData.put("VIEWATTRIBUTENAME", "Attribute2");
      graphData.put("GRAPHDATASTYLE", "groupLabels");
      graphData.put("GRAPHDATAPROMPT","");
      }
      graphData.put("GRAPHSTOCKVALUE","none");
      graphCols.addElement(graphData);
      }

      graphBarDetails.put("GRAPHDATACOLS", graphCols);
      graphs.addElement(graphBarDetails);

      // setting graph details to OAGraphTableBean
      graphTable.setGraphDetails(graphs);

      Thanks,
      Sushant

      Delete
    2. Hi,

      I am trying to do drill down. how to catch OAGseries and OAGgroup values?

      Thanks Sree

      Delete
  3. Hi Sushant,

    Above helped to me a lot but still we didn't meet our requirement,

    1. To change color of graph
    2. To place legend at bottom(default legend appears at top)

    Please help me to give pointers on above.

    Thanks, Praveen

    ReplyDelete
  4. What is the "pViewUsage" in the above code

    thanks
    Ajay

    ReplyDelete
  5. Could you please mention where exactly in CO , i can use this code is it after calling the AM "init querry" ////am.invokeMethod("initQuery");) ////
    method in Process request , or on any action in the Process form request.

    Or before calling the "Init Querry" method of AM

    Regards
    Ajay

    ReplyDelete
  6. Hi Sushant,
    I'm not getting the graph image instead of that a crack icon image.Do you have any idea to solve this?

    ReplyDelete
  7. Hi Sushants, i'm newbie, and i don't understand "In PR method, we call a method of AM to intiate query", pls help me

    ReplyDelete
  8. hi Sushants, How can i get pie chart slice value when i click or hover on graph? I tried pageContext.getParameter("OAGSeries") in drill down page CO Value is coming as null.

    ReplyDelete
    Replies
    1. Hi Sushant/Nagashree,
      New to this technology, required to create a pie chart. Can you please guide on the CO code to be added to achieve this?

      Delete