New look of dvt:funnelChart for Data Visualization in ADF

Sharing is Caring

A couple of weeks ago Oracle JDeveloper and ADF team released the new version of Jdevloper 12.2.1 with many cool features
New funnel chart (dvt:funnelChart) is introduced instead of funnel graph (<dvt:funnelGraph>)
Old funnel graph looks like this-

Funnel chart is used to show the visual distribution of different steps of any cycle
What docs say-

A chart representing data related to steps in a process. The steps appear as vertical slices across a cone-shaped section which represents stages of a process or target and actual values, showing levels by color.

Here we see how to use this new component to design a better UI, For this, I have created a view object using this SQL

100000 AS TARGET

Then go to data control and drop this viewObject on the page like a chart

In dialog select Funnel on the left panel and you can select the horizontal or vertical layout of the funnel at the right side

This is the configuration screen for Funnel. Here we can select Actual and Target values and Section Name appears on the viewport

Click on the ok button of this dialog and your Funnel chart is ready
See generated XML-

<dvt:funnelChart id="funnelChart2" var="row" value="#{bindings.DeptEmpView11.collectionModel}">
                        <dvt:funnelDataItem id="di2" targetValue="#{row.Target}" label="#{row.DepartmentName}"

Now run this application and see how it appears πŸ™‚

Wow… it’s good πŸ™‚
If we want to show only Departments Name with salary (No comparison with Target) then just remove this targetValue from XML code and then it looks like this


There are lots of properties to change its layout, 3D effect, Title, FootNote etc. Try each one and see how it affects Funnel

Cheers πŸ™‚ Happy Learning

Related Posts

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

Leave a Reply

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