ADF DVT Speed Date: Interactive Bubble Graph

Frank Houweling

Recently the ADF SIG at AMIS organized an ADF DVT Speed Date. During this speed date six AMIS consultants presented their favorite DVT Component. In a series of blogposts we share the knowledge and findings. In this post you get introduced to the ADF DVT bubble graph. I will also show you how to make it interactive by clicking on the bubbles. The ability to make a graph interactive can be very usefull.

In the following bubble graph that we are going to create, the Life expectancy (y-axis), income a year (x-axis) and the population (bubble size) is shown. This in steps of 10 years, for the last 50 years (1970, 1980, 1990, 20000 and 2010). So for each country 5 bubbles are shown. The location of the bubble has a meaning; for example in Japan (grey) the life expectancy is the highest and in Pakistan the lowest (green).
-Have developing countries moved forward their income?
-Do they have longer lifes than 10, 20, 30, 40 or 50 years ago?
A picture says more than thousand words – you can see it immediately in the graph.

Bubble Graph

A bubble graph is a type of chart that displays three dimensions of data (three series of data). The bubbles are shown on the chart at their X and Y location and the third (Z) through its size. Bubble charts can facilitate the understanding of social, economical, medical, and other (scientific) relationships. For example, Hans Rosling shows here amazing bubble charts. Use a bubble chart when you want specific values to be more visually represented in your chart by different bubble sizes.

How to create a bubblegraph in ADF

Here are the steps I took:

Database:
-Prepare the database: run
bubble_create_script.sql
This will create the database table and the country statistics that we are going to use for the bubble graph.

Model project:
-Create a standard new Fusion Web Application
-Create a new read-only ADF ViewObject called PopulationIncomeLifeExpectancyView with the following SQL query:

```select country,
year,
avg_life_exp avg_life_expectancy,
avg_income,
population
from   total_population_by_ctr
where  country = nvl(:p_country, country)
and    year =nvl(:p_year,year)
order by country, year
```

Further for this ViewObject:
-Create a bind parameter: p_year (String)
-Create a bind parameter: p_country (String)
-Set the Year and the Country attribute as key attribute of the ViewObject

Next:
-Create a new ApplicationModule
-Add another usage of PopulationIncomeLifeExpectancyView – now called PopulationIncomeLifeExpectancyView1 – to your ApplicationModule

ViewController project:
-Create a new JSF page called LifeExpectancyByCountry.jspx:
-Drag and drop a af:panelStrechLayout and in that an af:panelGroupLayout component on the new page
-Drag and drop the PopulationIncomeLifeExpectancyView from your dataControl on the JSPX page:
-Choose Graph and Bubble

Set the X, Y, Z, color and tooltip properties as follows:

-After running the page, the result should look like this:

-Now lets make the graph a bit better looking by adding the following properties to the dvt:bubbleGraph

styleClass=”AFStretchWidth”
hideAndShowBehavior=”withRescale”
dynamicResize=”DYNAMIC_SIZE”
inlineStyle=”height:550px;”
imageFormat=”PNG”

-Change the colors, We can do this by adding dvt:series in the dvt:serieSet component
-We set a graph-, x-as- and y-as title
-We set an x-as and y-as min and max scale
-The legendarea we place at the bottom

The dvt:bubbleGraph code should look as follows:

If you run the page the page looks like this:

Interactive Bubbles

To make the bubbles interactive, add a clickListener to the bubbleGraph:

clickListener=”#{LifeExpectancyBean.onClick}”

and in our managed bean we retrieve the value of our ViewObject Country attribute. We need this (after a bubble-click):

```    public void onClick(ClickEvent clickEvent) {
ComponentHandle componentHandle = clickEvent.getComponentHandle();
if (componentHandle instanceof DataComponentHandle) {
DataComponentHandle handle = (DataComponentHandle)componentHandle;
Attributes[] attr = (handle).getGroupAttributes();
for (int i = 0; i &lt; attr.length; i++) {
Attributes a = attr[i];
Object obj = a.getValue(a.ID_ATTRIBUTE);
//Check if we have our ViewObject ID attribute
if (&quot;Country&quot;.equals(obj.toString())) {
selectedCountry = (String)a.getValue(a.ID_VALUE);
System.out.println(&quot;selectedCountry=&quot; + selectedCountry);
}
}
}
//Do something interesting with selectedCountry
BindingContainer bindingContainer = BindingContext.getCurrent().getCurrentBindingsEntry();
OperationBinding operationBinding = bindingContainer.getOperationBinding(&quot;ExecuteWithParamsSelectedCountry&quot;);
operationBinding.getParamsMap().put(&quot;p_year&quot;, null);
operationBinding.getParamsMap().put(&quot;p_country&quot;, selectedCountry);
operationBinding.execute();
renderDetailGraph = true;
renderGraph = false;
}
```

In the code above we execute a second usage of our ViewObject that is used for a second bubble graph – the detail bubble graph.
We render the detail graph and do not render the master graph anymore. To make this example working, we refresh our panelStrechlayout component. Now, after clicking on a bubble, a detail bubble graph is shown that zooms in into the country:

One thought on “ADF DVT Speed Date: Interactive Bubble Graph”

1. ravindraveeramalla says:

Hi Frank,

Very nice post.

I am struggling to find the property to remove the thick intersecting lines, which are drawn in the middle point of X and Y axis in the bubble graph. Can you please suggest me the property to remove those lines?

AYTS: Summary of SOA Governance challenges in the services landscape

Facebook0TwitterLinkedinRecently started the Oracle program: Are You The Smartest. For me it is an opportunity to test my current knowledge level and to extend my knowledge. After every session I follow, I will write a brief summary as part of the preparation for the test. I will continue with the summary of the following […]