ADF Data Visualization Components – Pie Graph and Bar Graph implemented and explained

In what follows we shall use ADF Data Visualization Components – dvt:pieGraph and dvt:barGraph - in order to present the information to the user in a graphical manner.

DvtComponentsSample OFM application – implemented using JDeveloper IDE version 11.1.1.3.0 and built on HR database – can be downloaded from here

Introduction

HR’s Locations, Departments and Employees tables will be used in order to graphically display statistical information like: departments/location, employees/location and employees/department.

Model implementation

When working with ADF DVT components the way that data is structured plays a very important role and will be presented in a detailed manner.

Create a connection to HR database and use it to generate the Locations, Departments and Employees entities and view objects:

New -> Business Tier -> ADF Business Components -> Business Components from Tables -> select Locations, Departments and Employees – > Entity and Updatable View Object

Create the necessary associations and view links:

LocationsToDepartments – will be used in order to nest a Department VO inside a Location VO (will give us all the departments for a given location):

DepartmentsToEmployees – will be used to nest an Employee VO inside a Department VO (will show us all the employees for a selected department):

Open AppModule and use the above View Links to create the following structure:

Next, we will use Groovy Expression Language to add 3 new transient attributes to our view objects:

- Open DepartmentsVO and add DEmpCount attribute - representing the number of employees for each department - and use Groovy to calculate its value:

- Open LocationsVO and add 2 new attributes:

LEmpCount – representing the number of employees for each location:

and DeptCount – representing the number of departments per location:

View Controller implementation

1. Open Data Controls -> AppModuleDataControl -> drag one of LocationsVO or DepartmentsVO and drop it as a Graph into your jspx page:

Pie Graph

2. From the newly opened window choose Pie, select a type from Graph Types and a layout from Quick Start Layouts:

3. Select a value from the Pie combo box (the transient attributes that have been calculated using Groovy will be used - LEmpCount or DeptCount if you are using LocationsVO and EmpDept in the case of DepartmentsVO) and one or multiple values for the Slices field:

4. Click Ok to complete the process.

Bar Graph

2′. From the newly opened window choose Bar, select a type from Graph Types and a layout from Quick Start Layouts:

3′. Select a value from the Bars combo box (the transient attributes that have been calculated using Groovy will be used - LEmpCount or DeptCount if you are using LocationsVO and EmpDept in the case of DepartmentsVO) and one or multiple values for the X Axis field:

4′. Click Ok to complete the process.

In order to see that the pie and bar graphs have been successfully created go to page bindings and check if  the graph type binding has been created.

Also, you should see that a new dvt:pieGraph / dvt:barGraph component has been inserted into your .jspx page.

Enhance the pie&bar graphs look&feel

Select the dvt:pieGraph and go to Property Inspector – you will see that the pie graph has a lot of properties which you can set with respect to your preferences.

Extend the Appereance area and set the following attributes as follows:

3D Effect (or threeDEffect in source) to true – this attribute will force our pie to display in 3D format:

3D Effect = true

3D Effect = false

SeriesRolloverBehavior (seriesRolloverBehavior) to RB_HIGHLIGHT – this will register a mouse over listener with the pie and every time a mouse over event is fired the pie slice over which the mouse is positioned will be highlighted and the other slices will become blurry:

AnimationOnDisplay (animationOnDisplay) to AUTO (equivalent with true) – this will enable the pie to display its default animation every time that is rendered.

Now, open the Component Palette window -> choose ADF Data Visualizations form the combo box -> extend the Graph panel accordion and you should see all the attributes that can be nested inside a Graph component – there are quite a few:

By default, when the pie is created is loaded with a set of dvt components with respect to the type and layout of the pie selected at step 2. We shall change this components, add new ones and remove existing ones as follows:

Configure the pie to explode the first 10 slices:

Add into dvt:seriesSet 10 dvt:series and for each dvt:series set the PieSliceExplode attribute to a positive integer value <= 100, let us say 100:

PieSliceExplode = 100

PieSliceExplode = 0

Configure the legend area to enable scrolling for the legend items:

Add new or use the current dvt:legendArea and set the Scrolling attribute to asNeeded:

To configure the font for the legend items add a new dvt:legendText component or press Configure Legend button and select Text.

Configure the legend title text format by nesting inside the dvt:legendTitle component a dvt:graphFont and set the desired values.

Once the legend area, text and title have been successfully configured the legend should look as below:

In order to set the pie graph title text and font we shall nest a dvt:graphFont inside a dvt:graphTitle component and configure it as needed.

Now, let us set the label for each pie slice to display the percentage with zero decimal digits:

1. Add a dvt:sliceLabel component and set TextType attribute to LD_PERCENT:

2. Nest inside the above dvt:sliceLabel  a dvt:numberFormat component and set its DecimalDigit attribute to 0 (zero):

The pie slice labels should look as below:

Now, you will notice that when moving over a slice a custom window is displayed containing the Slices and Pie (set at point 3) values for that slice:

Now, in order to modify the information that this mouse over fired window displays: select the dvt:pieGraph component and checkout the MarkerTooltipType attribute.

Consider the image below:

Hint: To configure the dvt:barGraph component to assign a different color for each of its bars check this post.

The marked note window is displayed when moving the mouse over a bar. In order to set the Departments value  to be displayed with zero decimal digits follow the steps below:

1. Add inside the dvt:barGraph a dvt:markerText component.

2. Add inside the  dvt:markerText a dvt:y1Format component.

3. Add inside the dvt:y1Format a dvt:numberFormat component and set its decimalDigit to 0 (zero).

Finally, you should obtain the below structure:

As I said earlier, there are a lot of other components that can be used to enhace the pie graph and bar graph components. The one that you do no need just delete and if you cannot set their Render attribute to false.

Now, if you want to execute some code when the pie or a slice within the pie or a bar within a bar graph  is clicked just create a new click listener and register it with the pie/bar by using Property Inspector -> Behavior -> ClickListener.

The code below – declared in a managed bean:

    public void onPieClick(ClickEvent clickEvent) {
        ComponentHandle handle = clickEvent.getComponentHandle();
        if (handle instanceof DataComponentHandle) {
            DataComponentHandle dhandle = (DataComponentHandle)handle;
            FacesContext ctx = FacesContext.getCurrentInstance();
            FacesMessage msg =
                new FacesMessage("Clicked on slice with id: " + String.valueOf(dhandle.getSeries()));
            msg.setSeverity(FacesMessage.SEVERITY_INFO);
            ctx.addMessage(null, msg);
        }
    }

displays an information message when a pie slice is clicked with the id of that slice:

Use animation effects

To enhance the bar/pie with animation effects use animationOnDataChange and  animationOnDisplay attributes.

Use animationDuration attribute to set the animation time span.

In version 11.1.1.4.0 the set of predefined types for animationOnDataChange and  animationOnDisplay attributes was considerably enriched. Check them out.

The above attributes  and more can be found in the Animation section of the Property Inspector.

Homework

Follow all the above steps in order to implement the pie/bar graphs for all 3 calculated attributes: LEmpCount or DeptCount from LocationsVO and EmpDept from DepartmentsVO.

In the case of the EmpDept pie/bar graph you must also add a partial trigger to the locations table – generated using the LocationsVO – because the pie/bar will be updated with respect to the current selected location.

Running the sample application

Open DvtComponentsSample OFM application in your JDevelopper IDE, navigate to main.jspx page and run it.

After the application has been successfully deployed the following page will be loaded into your browser:

As you can see we have a tree table containing information about locations, departments and employees.

The Location tab displays the departments per location and employees per location by using ADF DVT components: dvt:pieGraph and dvt:barGraph.

The user has the possibility of displaying the data within a pie (default) or within a bar (when changing the graph type the default animation is displayed; also displayed when the graph is rendered).

If the Graph type is chosen from the selectOneRadio component for both: Departments per Location and Employees per Location:

Pie for Employees per Location and Bar for Departments per Location in the Location tab:

The Department tab displays within a pie or bar the number of employees for all departments situated in the same location. The graph changes with respect to the currently selected location in the tree table:

Pie:

Bar:

All the explained features are contained by the sample application. Find them by playing with the application.

Useful Links:

http://download.oracle.com/docs/cd/E12839_01/apirefs.1111/e12418/toc.htm

http://technology.amis.nl/documents/technology/dvt.pdf