New look of dvt:pieChart as donut chart for Data Visualization in ADF 12.2.1.0

Oracle Jdeveloper 12C (12.2.1.0) documentation tells about a new enhancement in look of pie chart

We can now design donut chart using dvt:pieChart , innerRadius property allows us to create donut chart look on the base of default pie chart.
Donut chart is nothing just a variation of pie chart that show data in sections of a circle, I believe everyone knows how to design a pie chart in ADF Faces

Responsive UI with new Masonry Layout in ADF 12.2.1.0

What is Responsive UI and Why it is Important-

User interface or view of website or web application changes as the screen size of device changes
This type of UI is called Responsive and it is important to design responsive UI for your application because each device have different screen dimension and you can not restrict user to use any specific device to view your application . This is very basic requirement of web development that UI should look good on Mobile, PC, Tablet or any other device

New look of dvt:funnelChart for Data Visualization in ADF 12.2.1.0

A couple of weeks ago Oracle Jdeveloper and ADF team released 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 visual distribution of different steps of any cycle
What docs says-

A chart representing data related to steps in a process. The steps appear as vertical slices across a cone-shaped section which represent stages of a procees 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 viewObject using this sql

SELECT A.DEPARTMENT_NAME, 
B.FIRST_NAME ||' '|| B.LAST_NAME AS EMPLOYEE_NAME,
B.SALARY,
100000 AS TARGET
FROM DEPARTMENTS A, EMPLOYEES B
WHERE A.DEPARTMENT_ID=B.DEPARTMENT_ID;

Then go to datacontrol and drop this viewObject on page as chart

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

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

Click on 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}"
                                            value="#{row.Salary}"/>
                    </dvt:funnelChart>

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 it's layout , 3D effect , Title , FootNote etc. Try each one and see how it affects Funnel

Cheers :) Happy Learning