Shay Shmeltzer's Oracle Development Tools Tips

Working with the Sunburst ADF Component

Shay Shmeltzer
Director of Product Management - Oracle

JDeveloper just hit the streets and among the new features it contains are several new data visualization ADF Faces components including timeline, treemap, and sunburst.

I got to play with the sunburst component a while back while building some internal demos - so I thought I'll provide a quick overview of some of the things you can do with it, and how to work with it at design time.

The sunburst component is used to visually show numerical data along one or two axises relating to something. One axis of data will show as the size of slices and the other data will show as a color. You can think about it as a two axis pie chart. The sunburst also allow for drilling into detail levels.

In the below example I'm showing just one set of data that has to do with the total orders broken in several levels - region->country->customer.

So here is the demo:

For those interested in the actual JSF code it is below:

          <dvt:sunburst id="s1" value="#{bindings.RegionSales1.treeModel}"
                        var="row" animationOnDataChange="alphaFade"
                        animationOnDisplay="fan" displayLevelsChildren="0"
                        inlineStyle="height:620.0px;" legendSource="ag1"
            <af:switcher facetName="#{row.hierTypeBinding.name}" id="s2">
              <f:facet name="RegionSales10">
                <dvt:sunburstNode value="#{row.Total}" label="#{row.Name}"
                                  id="sn3" drilling="insert">
                  <dvt:attributeGroups id="ag1" value="#{row.Total}"
                                       label="#{row.Total}" type="color"
                                       attributeType="continuous" minValue="0"
                                       maxValue="3000000" minLabel="0"
                    <f:attribute name="color1" value="11AA55"/>
                    <f:attribute name="color2" value="44BB77"/>
                    <f:attribute name="color3" value="77DD99"/>
              <f:facet name="RegionSales11">
                <dvt:sunburstNode value="#{row.Total}" label="#{row.Country}"
                                  id="sn1" drilling="insert">
                  <dvt:attributeGroups id="ag2" value="#{row.Total}"
                                       label="#{row.Total}" type="color"
                                       attributeType="continuous" minValue="0"
                                       maxValue="2800000" minLabel="0"
                    <f:attribute name="color1" value="11AA55"/>
                    <f:attribute name="color2" value="44BB77"/>
                    <f:attribute name="color3" value="77DD99"/>
              <f:facet name="RegionSales12">
                <dvt:sunburstNode value="#{row.Total}" label="#{row.Name1}"
                                  id="sn2" drilling="insertAndReplace"/>

Join the discussion

Comments ( 5 )
  • guest Monday, April 1, 2013

    Hello Shay,

    I'm using Jdev Are those new features available?

  • Shay Tuesday, April 9, 2013

    For people who are using 11.1.2.* these feature will be in the 12c version.

  • guest Monday, February 24, 2014

    Hello Shay.

    can i get the project

  • Shay Shmeltzer Thursday, February 27, 2014

    guest, I didn't keep a copy of this project - all the steps to re-create this are shown in the video. So just follow these and you'll basically have the project.

  • Tereza Zambrano Monday, October 20, 2014

    I am constructing a sunburst with Jdev and Windows 7 . I follow your example but when I drag the table and select sunburst. Jdev crashes. I select continue and I see that I have Reference "row.hierTypeBinding.name" not found for all the data rows selected . Any ideas?

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.