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
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-
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)
![]()
![]()
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
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
GROUPBY 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:bubbleChartcoordinateSystem="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:chartLegendrendered="true"id="cl1">
<dvt:legendSectionsource="ag2"id="ls1"/>
</dvt:chartLegend>
<f:facetname="dataStamp">
<dvt:chartDataItemid="di1"x="#{row.MinSal}"y="#{row.MaxSal}"z="#{row.AvgSal}"
group="#{row.DepartmentName}">
<dvt:attributeGroupslabel="#{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
