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

Sharing is Caring

Oracle Jdeveloper 12C (12.2.1.0) 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 the default pie chart.
Donut chart is nothing just a variation of the 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}"/>
                        </dvt:pieChart>

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 the centre 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"
                                      centerLabelStyle="font-weight:bold;">
                            <dvt:chartLegend id="cl4"/>
                            <dvt:pieDataItem id="di5" label="#{row.DepartmentName}" value="#{row.Salary}"/>
                        </dvt:pieChart>

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

dvt:pieChart

Cheers 🙂 Happy Learning

Related Posts

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

Leave a Reply

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