ADF UI- dvt:bubbleChart component overview, Show data in 3 dimensions

Hello All

In ADF we have many dvt components and dvt:bubbleChart is one of them. This chart uses three measures for X-axis, Y-axis and size of bubble and looks good on UI

A good interface makes it easy for users to use application with interest, Previously I have posted a lot about ADF UI , you can read all posts here- Better UI in Oracle ADF

Here we'll see how to use dvt:bubbleChart in ADF Application. In this demo I'll show Department wise Minimum Salary, Maximum Salary and Average Salary in a bubble chart, for that I have used this query to create sql based viewObject

SELECT ROUND(AVG(B.SALARY),2) AVG_SAL,MIN(B.SALARY) MIN_SAL,MAX(B.SALARY) MAX_SAL,B.DEPARTMENT_ID,A.DEPARTMENT_NAME FROM DEPARTMENTS A, EMPLOYEES B 
WHERE A.DEPARTMENT_ID=B.DEPARTMENT_ID 
GROUP BY B.DEPARTMENT_ID,A.DEPARTMENT_NAME

Drop viewObject as chart on page

Select Bubble in Categories and click ok

Configure Bubble Chart (Set X-Axis, Y-Axis and Bubble Size values)

See generated XML of dvt:bubbleChart-

<dvt:bubbleChart coordinateSystem="radar" id="bubbleChart1" var="row"
                                     value="#{bindings.DeptSal1.collectionModel}" title="Department Wise Salary"
                                     footnote="Min Salary" footnoteHalign="center" dataSelection="single"
                                     inlineStyle="width:550px;height:400px;">
                        <dvt:chartLegend rendered="true" id="cl1">
                            <dvt:legendSection source="ag2" id="ls1"/>
                        </dvt:chartLegend>
                        <f:facet name="dataStamp">
                            <dvt:chartDataItem id="di1" x="#{row.MinSal}" y="#{row.MaxSal}" z="#{row.AvgSal}"
                                               group="#{row.DepartmentName}">
                                <dvt:attributeGroups label="#{row.DepartmentName}" id="ag2" type="color"
                                                     value="#{row.DepartmentName}"/>
                            </dvt:chartDataItem>
                        </f:facet>
                    </dvt:bubbleChart>

and it looks like this on page :)

We can add some more properties to make chart more interative, here I am adding hideAndShowBehavior (to hide and show bubble on click of legend item), hoverBehavior (to dim bubbles other than selected) and zoomAndScroll (to enable zoom and scroll feature in chart)

Now it looks like this , you can scroll bar and dim effect on hovering

Enable Selection and Get Selected bubble value in bean

To enable selection in dvt:bubbleChart set selectionMode to single and to get selected value we can use same selectionListener code that is used for tagCloud component in previous post 

Now check after adding custom selection listener

Cheers :) Happy Learning