ADF DVT Speed Date: Interactive Bubble Graph

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 the new ViewObject PopulationIncomeLifeExpectancyView to your 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 < attr.length; i++) {
                Attributes a = attr[i];
                Object obj = a.getValue(a.ID_ATTRIBUTE);
                //Check if we have our ViewObject ID attribute
                if ("Country".equals(obj.toString())) {
                    selectedCountry = (String)a.getValue(a.ID_VALUE);
                    System.out.println("selectedCountry=" + selectedCountry);
                }
            }
        }
        //Do something interesting with selectedCountry
        BindingContainer bindingContainer = BindingContext.getCurrent().getCurrentBindingsEntry();
        OperationBinding operationBinding = bindingContainer.getOperationBinding("ExecuteWithParamsSelectedCountry");
        operationBinding.getParamsMap().put("p_year", null);
        operationBinding.getParamsMap().put("p_country", selectedCountry);
        operationBinding.execute();
        renderDetailGraph = true;
        renderGraph = false;
        AdfFacesContext.getCurrentInstance().addPartialTarget(panelStrech);
    }

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:

Download here the bubble demo app (JDeveloper 11.1.1.6)