3. Customizing Graph Properties

Exercise Objectives

The objective of this exercise is to introduce the basic techniques for customizing a graph using the BI Beans API.

Exercise Description

Users want graphs that are user-friendly, appealing, and interactive. Previously, you used the Presentation Editor to change the default look-and-feel of an application. In this exercise, you will use the BI Beans API to extend the application, for example, by adding a hyperlink to the graph title.

Exercise Tasks

Add links and tooltips to components

You can add interaction to graph components.

You will create a link and a tooltip for the Y1 axis title so that when the cursor hovers over the title, a tooltip appears and, when a user clicks the title, a short description about sales is displayed in a new window.

To create a Javascript function

  1. To open your application, in the System-Navigator pane, right-click simpleJSP.jsp and choose Code Editor from the popup menu.
  2. You must add a Javascript function that defines the event handler (that is, the code that determines what happens when a user clicks the title). Copy and paste the following Javascript code above the line that contains the </head> tag:

    <SCRIPT>
    function openDescription() { newWindow=window.open("","newWindow","titlebar=no,width=300,height=100,toolbar=no"); newWindow.location.reload();
    newWindow.document.write("<b>Sales as reported by individual divisions</b>");
    newWindow.focus();
    }
    </SCRIPT>

The openDescription Javascript function opens a new window with no titlebar and displays a short description about sales.

To create an imagemap on the graph title by adding custom Java code
  1. In the Code Editor, import classes into the page directive by adding the following classes within the <%@page ... > tag import attribute:

    oracle.dss.thin.beans.graph.ThinGraph
    oracle.dss.thin.beans.graph.ImagemapAction

    so that it is similar to this:

    <%@ page contentType="text/html;charset=WINDOWS-1252" import="oracle.dss.thin.beans.graph.ThinGraph,oracle.dss.thin.beans.graph.ImagemapAction"%>

  2. Now, add the event listener to the title. APIs in BI Beans let you define an image map over different graph components (in this case, the Y1 axis title). Copy and paste the following code above the line that contains the </orabi:BIThinSession> tag:

    <%
    // define a new image map
    ImagemapAction action = new ImagemapAction();
    // set the HREF property
    action.setHREF( "#" );
    // set the onClick property to call the javascript function openDescription
    action.setOnClick("openDescription();");
    // set the tooltip description
    action.setALT( "Click for more information" );
    // set the y1-axis title
    ((ThinGraph)simpleGraph).getY1Title().setText("Sales");
    // apply the imagemap to the y1-axis title
    ((ThinGraph)simpleGraph).setImagemapAction( ThinGraph.Y1TITLE, ThinGraph.SERIES_UNDEFINED, ThinGraph.GROUP_UNDEFINED, action);
    %>

  3. From the File menu, choose Save All to save the JSP application.

Run the application

You added interactive features to a simple graph; it is time to see these features in the application.

To drill the graph

  1. In the System-Navigator pane, right-click simpleJSP.jsp and choose Run simpleJSP.jsp from the popup menu.
  2. A new browser window opens and displays the graph with the linked crosstab. Notice that the data in the linked crosstab changes accordingly as you drill up and down in the graph.
  3. To experience the drilling functionality, click the Sales China label to the left of the bar.
  4. The browser refreshes and the graph drills down the Geography dimension to display Sales Beijing and Sales Shanghai. Click the lowest bar that corresponds to Video Division Sales Shanghai.
  5. The browser refreshes and the graph drills down the Product dimension to display sales for Camcorder, TV, and Video under the Video Division in Shanghai. Choose the Back button in the browser to drill up the Product dimension to its previous state.
To use the custom link on the Y1 axis title
  1. Click the Y1 axis title (the Sales label at the bottom of the graph).
  2. A small window opens and displays a short description about where the sales information comes from.
  3. Return to JDeveloper.
  4. From the Run menu, choose Terminate, and then Embedded OC4J Server to stop the application.

Exercise Summary

You have built additional graph functionality based on the APIs of BI Beans. BI Beans provides extensive APIs for you to build compelling and interactive graphs.

2. Handling Multiple Presentations | Overview | 4. Customizing Crosstab Properties