ADF DVT Speed Date: Meeting the Pie Graph

Recently the ADF Special Interest Group at AMIS organized an ADF DVT Speed Date. During this speed date, six ADF specialists from our team presented their favorite Data Visualization Component from the DVT library.
In a series of blog posts we share the information with a broader audience.
In this post you get introduced to Pie Graphs.

ADF DVT Pie Graph – Introduction

The pie chart is one of the most widely used statistical chart for simple representation of the division of data amongst different groups.
It is a simple effective way to see in an instant for example the ratio between country populations when looking at them as portions of the total population.

ADF DVT provides smooth looking configurable Pie Graph components in slightly different flavours:
– the pie, a single pie view. For example one pie for the population per country
– the multi pie, a view with mutliple pies. For example per continent a pie with the population per country of that continent
– the pie-bar, For example a pie with the population per continent, with zoom on population per country of that continent
– ring graph
– ring-bar graph

For this blog I will leave out the ring flavours, as they are quite similar.

 

These ADF components can either be based on some simpel tabular data (via a bean for example) or they can be data bound.
In the latter case, just like other components, you can drag a group from the data control on to your page and choose “graph” for the context menu.

Dragging a pie graph on the page will result in a couple of things.

1. In design view we see the following:

This is just a dummy pie and is only usefull for when you are configuring titles etc.

2. Then we have the source view, which is quite readable and gives us a hint of how the graph is build and what we could change:

We see the graph itself also contains of subelements, like seriesSet. These can also be clearly seen in the structure pane:

 

3. and PageDef:

Here we can see series and groups. This structure is used for more than just the PIE graph component. In case of the pie graph series are the slices and groups are the grouping data.

So in this example we have a pie with the profit per country.

ADF DVT Pie Graph – Properties

Looking at the properties there are a lot of properties that you are already familiar with from other components, like id, rendered and value property, inlineStyle, styleClass, partialSubmit, bindings changeListeners etc.

Lets focus on the new properties for graphs:

We see properties like “3D effect” to change a flat pie into the 3D pie shown in the design view screenshot above,properties for animation, titles of different parts of the graph, click listeners, image format (HTML5, Flash, PNG). Each of the subelements of a graph (select via source or structure pane is easiest) also holds properties.

For example, a sliceLabel can be given a numberFormat, resulting in the following:

Pies can be approached as a table, where a slice then must be looked at as a row. With clickListener and partialTrigger properties we can even create a master-detail with graphs:

ADF DVT Pie Graph – Example

In this example we are going to play around with different pie graph flavours, properties and create a master-detail.

First please download the this zip, containing a base workspace and some ddl files to set up the DB: AdfSpeedDate_PieGraph (JDev 11.1.1.6)

Database

Open workspace DvtPieGraph.jws. Check the settings of the database connection within the application and correct if needed to point to the database for the hand-on session.
Run the install.sql against the database connection.

Model Layer

Workspace DvtPieGraph.jws contains of two projects, Model and ViewController. Model holds an empty Application module and ViewController an empty page to put the DVT components on.

First step we need to take is filling the data control with usefull information. We want to create a page with profit information per country and per restaurant.

1. Create a custom ViewObject CountryFinancesVO.

The View object needs to contain the revenue and cost information aggregated per country:

SELECT countries.id   country_id
,      countries.name country_name
,      SUM(revenue)   country_revenue
,      SUM(costs)     country_costs
FROM   dve_countries    countries
,      dve_restaurants  restaurants
,      dve_revenue      revenue
WHERE  countries.id   = restaurants.country_id
AND    restaurants.id = revenue.restaurant_id
GROUP BY countries.id
       , countries.name

While creating, don’t add the view Object to the Application Module yet.

2. Add a transient NUMBER attribute to the view object that calculates the countryProfit (revenue-costs).
3. Create a view object RestaurantFinancesVO, to represent the revenue and cost information per restaurant:

SELECT restaurants.id           restaurant_id
,      restaurants.country_id   country_id
,      restaurants.name         restaurant_name
,      SUM(revenue)             restaurant_revenue
,      SUM(costs)               restaurant_costs
FROM   dve_restaurants  restaurants
,      dve_revenue      revenue
WHERE  restaurants.id = revenue.restaurant_id
GROUP BY restaurants.id
       , restaurants.name
       , restaurants.country_id

 

4. Add a transient NUMBER attribute to the view object that calculates the restaurantProfit.
5. Create a View link between the two VOs, from Countries to Restaurants, to represent the Master-Detail relationship between them.

When creating, add this Link to the Application Module.

6. Open the data model of the Application Module and give the created Master-Detail better names, for example CountryFinances and RestaurantFinancesPerCountry.

We are now ready to start with our first graph!

Let’s make some pies

Simple Pie: Profit per Country

In this exercise we are going to make a pie graph showing the profit per country.

1. Start by opening the .jsff file already available in the ViewController project.

2. Open the data control and select the CountryFinances group. Drag this group on the page. This will open the option context menu. Choose “Graph…”

3. A Component gallery will open with all kinds of graphs to choose from. Go to the Pie subgallery and choose a single pie and the second quick start layout.

4. The next dialog will open to configure the graph. We would like to make a graph on the country profit and see which country is responsible for how much percent of the total profit. See if you can find out which attribute needs to be defined where. Please check the checkbox “Set current row for master-detail”. This option will be for the next exercise. Press OK to place the component on the page.

Take a quick look at the source of the page and at the pagedef to see what is generated for this component.

 

5. Right-click on the pie. A context menu should open with all kinds of placeholders which are either checked or not. We chose a start layout with a bit too much fluff, make sure the footnote and subtitle are not rendered no more.

6. Adjust the title to “Profit per Country” and Legend title to “Country Legend”. Click on parts of the component and look at the property inspector. How does the component look in the structure pane? 

7. Go to the properties of the whole graph. Walk a bit through the properties and adjust the graph to a 3d view.

Run the page to see the pie.

8. Hoover over the slices and see how the info about profit is shown. Notice how the amount is scaled to for example 60K? This is a setting that can be altered. You can even add your own number format. Try to format it such that the amount shows a currency sign. 

Re-run your page to see if it worked!

Master-Detail Pie: Profit per Restaurant of a Country

In the first exercise we had checked the option “Set current row for master-detail” on the CountryProfit graph. Time to find out what this option does.

1. Go to the property inspector of the graph and find the clickListener to see a value filled in.

The option will prepare the first graph act like a master just like in a master-detail screen with tables. Only difference is that instead of master rows we now have master slices.

2. In the model we already prepared for a master-detail, Country-Restaurant, so let’s try to make a detail graph showing the profit sliced per restaurant. Place a horizontal group layout around the first graph.

3. In the Data Control panel, drag the group below CountryFinances, RestaurantFinancesPerCountry, on the page next to the Country graph. Choose again a pie graph and try a different start layout just because we can. 

4. Clean the component up a little by giving it the title “Profit per Restaurant” and try to figure out how to make sure the subtitle shows “in ” plus the country name of the current selected slice of the Country graph. 

5. We already saw the parent is prepared to listen to a click event, but if you run the page you will see the child is not refreshed when the parent is clicked. Make sure the restaurant graph refreshes whenever a slice of the parent is clicked. 

Run the page and click to see a nice master-detail page with pies.

Multi-pie: Costs and Revenue per Restaurant

One pie at the time should be piece of cake by now. Time to try the multi-pie. Make sure there is another horizontal group layout under the first one.

1. Drag RestaurantFinancesPerCountry on the page in this new group layout but this time choose Multiple Pie. Choose a start layout you like and hit OK.

2. So far we looked at profit, but we would like to see a breakdown in costs and revenue. Try to figure out how to make the component show one pie for the restaurant costs showing for which percentage of the costs each restaurant is responsible and one similar pie for the revenue. Two pies Costs and Revenue, showing Restaurant slices..

3. It should look like this:

4. Make sure the graph refreshes when there is a parent slice clicked and run the page to play around with your first multi-pie graph.

Colored pies: cost/revenue pies

One last time: drag RestaurantFinancesPerCountry at the right of your multi-pie, and choose again a multi-pie. This time let’s see if you are also able to make a pie per restaurant showing the ratio between costs and revenue. So restaurant pies with a cost slice and revenue slice..

1. If you run the page you will see pies being half blue half red. You have to really look at the legend or slice label to see which of the slices are the costs and which are the revenue.

I think it would be clearer for the customer if the costs slice would be red and the revenue would be green. Select the graph and take a look at the structure pane.

2. If the pieGraph does not show a seriesSet yet, stand on the graph and choose ‘insert inside dvt:pieGraph..’ and select dvt:seriesSet.

Series in ADF represent slices. A seriesSet allows you to set properties for all slices. In our case we want to set two times a property for a specific slice though, so we need a dvt:series within the dvt:seriesSet. Make sure the dvt:seriesSet contains two dvt:series.

3. Select a dvt:series and look at the property inspector. Find the property color and click on the arrow icon at the end to edit. A color picker will show to pick a color from. `

Set the colors and run the page.

ADF DVT Pie Graph – Resources

Download the JDeveloper 11gR1 11.1.1.6 Start Application – DvtPieGraph.zip and complete application  –  DvtPieGraph_complete.zip

Oracle documentation of graphs – http://docs.oracle.com/cd/E25178_01/web.1111/b31973/dv_graph.htm#ADFUI459

Oracle Rich Client Live Demo – http://jdevadf.oracle.com/adf-richclient-demo/faces/feature