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

Sharing is Caring

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 the bubble and looks good on UIA 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 the 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 a custom selection listener

dvt:bubbleChart

Cheers 🙂 Happy Learning

Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

0 thoughts on “ADF UI- dvt:bubbleChart component overview, Show data in 3 dimensions”

Leave a Reply

Your email address will not be published. Required fields are marked *