Please disable your adblock and script blockers to view this page

Search this blog

Friday, 4 December 2015

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

After these changes final chart looks like this and woww this is great :)

 Cheers :) Happy Learning

2 comments :