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

Sharing is Caring

Oracle Jdeveloper 12C ( documentation tells about a new enhancement in the look of dvt:pieChart

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
I have dropped a viewObject (it has Department wise Salary detail) as pie chart on page

<dvt:pieChart id="pieChart2" var="row" value="#{bindings.DeptEmpView16.collectionModel}" inlineStyle="width:500px;">
                            <dvt:chartLegend id="cl4"/>
                            <dvt:pieDataItem id="di5" label="#{row.DepartmentName}" value="#{row.Salary}"/>

and default pie chart looks like this

Now to change it’s look to donut chart , just change in some properties
InnerRadius  property creates donut look , SliceGaps  is the gap between slices and CenterLabel  is the text shown in center of donut chart

XML Source-

<dvt:pieChart id="pieChart2" var="row" value="#{bindings.DeptEmpView16.collectionModel}" inlineStyle="width:500px;"
                                      innerRadius="0.5" sliceGaps="1" centerLabel="Department Salay Chart"
                            <dvt:chartLegend id="cl4"/>
                            <dvt:pieDataItem id="di5" label="#{row.DepartmentName}" value="#{row.Salary}"/>

After these changes, the final chart looks like this and wow this is great 🙂


Cheers 🙂 Happy Learning

Related Posts

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

0 thoughts on “New look of dvt:pieChart as donut chart for Data Visualization in ADF”

Leave a Reply

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