Visually compelling data visualization components enable end users to understand and analyze complex business data. The components are rich in features that provide out-of-the-box interactivity support. For detailed descriptions of the end user and presentation features for each component, see the following:

• Hierarchy Viewer components: End User and Presentation Features section in Developing Web User Interfaces with Oracle ADF Faces.

• Treemap and Sunburst components: End User and Presentation Features of Treemaps and Sunbursts section in Developing Web User Interfaces with Oracle ADF Faces.

For detailed descriptions of each data visualization use case and example, see the following:

• Hierarchy Viewer components: Hierarchy Viewer Use Cases and Examples section in Developing Web User Interfaces with Oracle ADF Faces.

• Treemap and Sunburst components: Treemap and Sunburst Use Cases and Examples section in Developing Web User Interfaces with Oracle ADF Faces.

Creating a hierarchy viewer from Data Controls panel has the following effect:

• Creates the bindings for the hierarchy viewer in the page definition file of the JSF page

• Adds the necessary tags to the JSF page for the hierarchy viewer component

The example below displays bindings that JDeveloper generated for a hierarchy viewer component. The rules for populating the nodes of the master-detail tree are defined as a node definition. The example shows that two node definitions were generated. Each of these node definitions references a view object and associated attributes. The code example also references an accessor SEmpView.

<parameters/>
<executables>
  <variableIterator id="variables"/>
  <iterator Binds="RootEmployeeViewObj2" RangeSize="25"
            DataControl="AppModuleDataControl"
            id="RootEmployeeViewObj2Iterator"/>
</executables>
<bindings>
  <tree IterBinding="RootEmployeeViewObj2Iterator" id="RootEmployeeViewObj2">
    <nodeDefinition DefName="model.RootEmployeeViewObj"
                    Name="RootEmployeeViewObj20">
      <AttrNames>
        <Item Value="ManagerId"/>
        <Item Value="TitleId"/>
        <Item Value="Userid"/>
        <Item Value="Comments"/>
        <Item Value="DeptId"/>
        <Item Value="StartDate"/>
        <Item Value="Email"/>
        <Item Value="Salary"/>
        <Item Value="FirstName"/>
        <Item Value="Id"/>
        <Item Value="CommissionPct"/>
        <Item Value="LastName"/>
      </AttrNames>
      <Accessors>
        <Item Value="SEmpView">
          <Properties>
            <CustomProperties>
              <Property Name="hierarchyType" Value="children"/>
            </CustomProperties>
          </Properties>
        </Item>
      </Accessors>
    </nodeDefinition>
    <nodeDefinition DefName="model.SEmpView" Name="RootEmployeeViewObj21">
      <AttrNames>
        <Item Value="ManagerId"/>
        <Item Value="TitleId"/>
        <Item Value="Userid"/>
        <Item Value="Comments"/>
        <Item Value="DeptId"/>
        <Item Value="StartDate"/>
        <Item Value="Email"/>
        <Item Value="Salary"/>
        <Item Value="FirstName"/>
        <Item Value="Id"/>
        <Item Value="CommissionPct"/>
        <Item Value="LastName"/>
      </AttrNames>
      <Accessors>
        <Item Value="SEmpView">
          <Properties>
            <CustomProperties>
              <Property Name="hierarchyType" Value="children"/>
            </CustomProperties>
          </Properties>
        </Item>
      </Accessors>
    </nodeDefinition>
  </tree>
</bindings>

The example below shows the code generated on the JSF page that is associated with the page definition file in the above example. For brevity, the details in the facet elements named zoom75, zoom50, and zoom25 and panel card showDetailItem components have been omitted. In addition, the details for the second node in the hierarchy viewer have also been omitted.

The example shows a hierarchy viewer component that references the RootEmployeeViewObj2 tree binding. It includes a node (dvt:node) component that in turn includes a panel card component (dvt:panelCard). The panel card component defines slide_horz as the effect to use when changing the display of content referenced by the node.

Once you create your hierarchy viewer, you can modify the layout of the component or add additional components, such as a panel card, using the Create Hierarchy dialog illustrated in Figure 43-12. To open the dialog, use the Edit icon in the Properties window for the hierarchyViewer component. You can also customize the layout of a hierarchy viewer component directly in the code, in the visual editor, or by setting values in the Properties window. You can add additional components, such as panel cards, using the Components window.

<dvt:hierarchyViewer id="hv1" var="node"
                     value="#{bindings.RootEmployeeViewObj2.treeModel}"
        selectionListener="#{bindings.RootEmployeeViewObj2.treeModel.makeCurrent}"
                     detailWindow="none" layout="hier_vert_top"
                     levelFetchSize="#{bindings.RootEmployeeViewObj2.rangeSize}"
                     styleClass="AFStretchWidth" summary="Hierarchy Viewer Demo">
  <dvt:link linkType="orthogonalRounded" id="l1"/>
  <dvt:node type="model.RootEmployeeViewObj" width="233" height="233" id="n1">
    <f:facet name="zoom100">
      <af:panelGroupLayout styleClass="AFStretchWidth AFHVNodeStretchHeight
                                       AFHVNodePadding"
                           layout="vertical" id="pgl1">
        <af:panelGroupLayout layout="horizontal" id="pgl2">
          <af:panelGroupLayout id="pgl7">
            <af:image source="/images/#{node.Id}.png" shortDesc="Employee Image"
                      id="i1" styleClass="AFHVNodeImageSize"/>
          </af:panelGroupLayout>
          <af:panelGroupLayout layout="vertical" id="pgl3">
            <af:outputText value="#{node.LastName}"
              shortDesc="#{bindings.RootEmployeeViewObj2.hints.LastName.tooltip}"
                           styleClass="AFHVNodeTitleTextStyle" id="ot1"/>
            <af:outputText value="#{node.FirstName}"
              shortDesc="#{bindings.RootEmployeeViewObj2.hints.FirstName.tooltip}"
                           styleClass="AFHVNodeSubtitleTextStyle" id="ot2"/>
            <af:panelLabelAndMessage
                           label="#{bindings.RootEmployeeViewObj2.hints.Id.label}"
                           styleClass="AFHVNodeLabelStyle" id="plam1">
              <af:outputText value="#{node.Id}"
                     shortDesc="#{bindings.RootEmployeeViewObj2.hints.Id.tooltip}"
                             styleClass="AFHVNodeTextStyle" id="ot3">
                <af:convertNumber groupingUsed="false"
                      pattern="#{bindings.RootEmployeeViewObj2.hints.Id.format}"/>
              </af:outputText>
            </af:panelLabelAndMessage>
          </af:panelGroupLayout>
        </af:panelGroupLayout>
        <af:spacer height="5" id="s1"/>
        <dvt:panelCard effect="slide_horz" styleClass="AFHVNodePadding" id="pc1">
          <af:showDetailItem text="Contact Details" id="sdi1">
            <af:spacer height="2" id="s2"/>
            <af:panelFormLayout styleClass="AFStretchWidth AFHVNodeStretchHeight
                                            AFHVNodePadding"
                                id="pfl1">
              <af:panelLabelAndMessage
                       label="#{bindings.RootEmployeeViewObj2.hints.Email.label}"
                       styleClass="AFHVPanelCardLabelStyle" id="plam2">
                <af:outputText value="#{node.Email}"
                 shortDesc="#{bindings.RootEmployeeViewObj2.hints.Email.tooltip}"
                             styleClass="AFHVPanelCardTextStyle" id="ot4"/>
              </af:panelLabelAndMessage>
              <af:panelLabelAndMessage
                       label="#{bindings.RootEmployeeViewObj2.hints.Userid.label}"
                       styleClass="AFHVPanelCardLabelStyle" id="plam3">
                <af:outputText value="#{node.Userid}"
                 shortDesc="#{bindings.RootEmployeeViewObj2.hints.Userid.tooltip}"
                             styleClass="AFHVPanelCardTextStyle" id="ot5"/>
              </af:panelLabelAndMessage>
            </af:panelFormLayout>
          </af:showDetailItem>
            ... remaining showDetailItem panel card details omitted
        </dvt:panelCard>
      </af:panelGroupLayout>
    </f:facet>
      ... remaining zoom levels omitted
  </dvt:node>
  <dvt:node type="model.SEmpView" width="233" height="233" id="n2">
    ... second node details are similar to first node and are omitted
  </dvt:node>
</dvt:hierarchyViewer>

You can specify an alternate view object as the data source for a panel card when you create or edit a databound hierarchy viewer. For example, you may have a data collection that has a master-detail relationship between sales representatives and orders, but you want your panel card to display details about the customer who placed the order.

Figure 43-13 shows a portion of the runtime view of a hierarchy viewer configured to display the orders and order details for sales representatives using the Summit ADF schema. In this example, the hierarchy viewer is configured to use an alternate view object for the Customer Details panel card.

Figure 43-13 Hierarchy Viewer Panel Card Configured With Alternate View Object

Description of "Figure 43-13 Hierarchy Viewer Panel Card Configured With Alternate View Object"

The alternate view object must be a child of the parent collection. You can establish this parent-child relationship by creating a view link between the parent and child collection.

Before you begin:

It may be helpful to have an understanding of databound hierarchy viewers. For more information, see Creating Databound Hierarchy Viewers.

You may also find it helpful to understand functionality that can be added using other Oracle ADF features. For more information, see Additional Functionality for Data Visualization Components.

Create an application module that contains instances of the entity and view objects that you want in your application, as described in Creating and Modifying an Application Module.

Create the data model for the hierarchy viewer. For example, the hierarchy viewer in Figure 43-13 uses a top level view object based on the SEmp entity in the Summit ADF DVT sample application. In this example, the view object retrieves all sales representatives in the Summit ADF employee database by retrieving all employee records with a TITLE_ID of 2. Figure 43-14 shows the SalesRepViewObj view object.

Figure 43-14 Sales Representatives View Object Using the Summit ADF Schema

Description of "Figure 43-14 Sales Representatives View Object Using the Summit ADF Schema"

For information about creating a view object, see How to Create an Entity-Based View Object.

The master-detail relationship between the Summit sales representatives and orders is established with a view link between SalesRepViewObj and OrdersViewObj. Figure 43-15 shows the relationship between the view objects.

Figure 43-15 View Link Between Summit Sales Representatives and Orders

Description of "Figure 43-15 View Link Between Summit Sales Representatives and Orders"

For additional information about establishing the master-detail relationship using view links, see How to Create a Master-Detail Hierarchy Based on Entity Associations.

To configure an alternate view object for a databound panel card:

1. If you have not already done so, create the view object that will be the alternate data source for the panel card.

   For example, the hierarchy viewer in Figure 43-13 uses a view object based on the SCustomer entity object in the Summit ADF DVT sample application.

2. Create a view link between the parent collection and the alternate view object.

   Figure 43-16 shows the view link between the sales representatives and customers in the Summit ADF DVT sample application. For help with creating view links, see How to Create a Master-Detail Hierarchy Based on Entity Associations.

   Figure 43-16 View Link Between Sales Representatives and Customers in the Summit ADF DVT Sample Application

   
   Description of "Figure 43-16 View Link Between Sales Representatives and Customers in the Summit ADF DVT Sample Application"

3. If needed, create a view link to establish the hierarchy between the parent collection and the alternate child collection.

   For example, to establish the hierarchy between orders and customers in the Summit ADF DVT sample application, create a view link between the SOrdView and SCustomerView collections. Figure 43-17 shows the sample view link.

   Figure 43-17 View Link Between Orders and Customers in the Summit ADF DVT Sample Application

   
   Description of "Figure 43-17 View Link Between Orders and Customers in the Summit ADF DVT Sample Application"

1. From the Data Controls panel, select a collection.

   Figure 43-26 shows the data collection for the treemap in Figure 43-24 and the sunburst in Figure 43-25.

   Figure 43-26 Sample Data Collection for Treemap and Sunburst

   
   Description of "Figure 43-26 Sample Data Collection for Treemap and Sunburst"

   In the Summit ADF DVT sample, the application uses a view link between the SCountriesView2 collection and the SWarehouseView2 collection to establish a hierarchy between the SRegionView1 and SWarehouseView2 data collections. Figure 43-27 shows the sample view link.

   Figure 43-27 Sample View Link Between Country and Warehouse

   
   Description of "Figure 43-27 Sample View Link Between Country and Warehouse"

   Table 43-1 shows the data collection and size, label, and color values used to create the treemap in Figure 43-24.

   Table 43-1 Sample Values for Treemap Inventory Example

   Collection	Size Value	Label Value	Color Value
   SRegionView1	CountryCount	Name	CountryCount
   SCountriesView2	WarehouseCount	Country	WarehouseCount
   SWarehouseView2	ProductCount	City	ProductCount
   ProductInventoryView2	AmountInStock	Name	Varies by stock level

   The CountryCount, WarehouseCount, and ProductCount attributes are transient attributes that count the number of countries, warehouses, and products in the data collection. For example, the number of countries in a region is calculated by counting the number of unique Id values in the SCountriesView child collection that match the RegionId of the region:

   SCountriesView.count('Id')
   

   Table 43-2 shows the data collection and size, label, and color values used to create the sunburst in Figure 43-25.

   Table 43-2 Sample Values for Sunburst Sales Example

   Collection	Size Value	Label Value	Color Value
   SRegionView1	TotalSales	Name	TotalOrders
   SCountriesView2	TotalSales	Country	TotalOrders

   The TotalSales and TotalOrders attributes are transient attributes that calculate the total sales volume and number of orders for each region and country in the data collection. For example, the total sales in a region is calculated by summing the TotalSales in the SCountriesView collection:

   SCountriesView.sum ('TotalSales')
   

   For information about adding transient attributes to view objects, see Adding Calculated and Transient Attributes to a View Object.

2. Drag the collection onto a JSF page and, from the context menu, choose Treemap or Sunburst.
3. In the Create Treemap dialog or Create Sunburst dialog, in the Hierarchy section, select the collections you want to include as nodes in the runtime treemap or sunburst. By default, the root collection is selected.
4. For each collection that you select in the Hierarchy list, enter a value for the following.

   • Value: From the dropdown list, select the attribute in the data collection that represents the size value for the sunburst. You can select one of the attributes provided or select Expression Builder to enter a JSF EL expression. For help with the Expression Builder dialog, press F1 or click Help.

     For example, to create a treemap or sunburst using the data collection in Figure 43-26, select CountryCount for the SRegionView1 value to represent the size value for the first node.

   • Label: From the dropdown list, select the attribute in the data collection that represents the label you wish to display for the sunburst node label. You can select one of the attributes provided or select Expression Builder to enter a JSF EL expression.

     For example, select Name for the SRegionView1 node label.

   • Optionally, in the View Area section, click New to configure an attribute group for the node. Use attribute groups if you want the node's display to vary based on color or pattern. You can also specify the node's fill color or pattern in the node's fillColor and fillPattern properties after you create the treemap or sunburst.

     If you do not configure an attribute group to vary by color or specify a fillColor attribute on the node, the node will display in black. By default, no pattern will be displayed on the node.

     In the treemap and sunburst example, attribute groups are configured for each level in the hierarchy.

     To configure an attribute group, enter values for the following:

     • Group by value: From the dropdown list, select the attribute in the data collection to group by in the attribute group. You can select one of the attributes provided or select Expression Builder to enter a JSF EL expression.

       In the treemap example, the colors used are based on the count metric for each level in the hierarchy. For example, select CountryCount as the Group by value for the SRegionView1 collection, and the colors displayed on the Regions node will vary depending upon the number of countries in a given region.

       In the sunburst example, the colors used are based on the number of orders for each level in the hierarchy. For example, select TotalOrders as the Group by value for the SRegionView1 collection, and the colors displayed on the Regions node will vary depending upon the number of orders in a given region.

     • Area: From the dropdown list, select Color if you want the attribute group to vary by color or select Pattern if you want the attribute group to vary by pattern. To vary the attribute group by both color and pattern, select Select Multiple Attributes and select both Color and Pattern. Click OK.

       In the treemap and sunburst examples, color is used for each level of the hierarchy.

     • Legend Label: From the dropdown list, select the attribute in the data collection to display in the treemap's legend. You can select one of the attributes provided or select Expression Builder to enter a JSF EL expression.

       In the treemap and sunburst examples, this value is left blank.

     Figure 43-28 shows the Create Treemap dialog completed for the first node in the Summit ADF DVT sample application.

     Figure 43-28 Create Treemap Dialog for a Region Node

     
     Description of "Figure 43-28 Create Treemap Dialog for a Region Node"

     Figure 43-29 shows the Create Sunburst dialog completed for the first node in the Summit ADF DVT sample application.

     Figure 43-29 Create Sunburst Dialog for a Region Node

     
     Description of "Figure 43-29 Create Sunburst Dialog for a Region Node"

   • Optionally, click Value-Specific Rules to expand the attribute group dialog to specify a match or exception rule. Use match rules to specify colors or patterns for simple true or false conditions or when you want to match a specific value. Use exception rules when you want to specify a color or pattern when the node's grouped-by value meets a specific condition.

     To specify a match rule, in the Match Rules section, click New and enter values for the following:

     • Group Value: Enter the category value for the match. This can be a string that represents a category or you can set this to true or false. If you set this to true or false, the Group by value field must contain an EL expression that evaluates to true or false as in the following example:#{row.AmountInStock gt row.ReorderPoint}.

     • Property: From the dropdown list, select Color if you want the node to vary by color or select Pattern if you want the attribute node to vary by pattern.

     • Property Value: From the dropdown list, select the color or pattern to display when the node's value matches the Group Value. For color, you can select one of the provided values or select Custom Color to enter a custom color in the Select Custom Color dialog. For pattern, you must select one of the provided values.

     Figure 43-30 shows the Create Treemap dialog for a data collection using match rules for the bottom level of the hierarchy.

     Figure 43-30 Treemap Showing Match Rules for an Attribute Group

     
     Description of "Figure 43-30 Treemap Showing Match Rules for an Attribute Group"

     In this example, the treemap nodes will display in green (RGB hexadecimal #008000) when the inventory levels are acceptable and in red (RBG hexadecimal #ff0000) when the inventory level is at or below the product's reorder level. The attribute group's Label field contains the details for the legend display. In this case, the field contains an expression that determines the legend label based on an item's amount in stock: #{(row.AmountInStock gt row.ReorderPoint) ? 'Stock Level OK': 'Reorder Time'}.

     Figure 43-31 shows the runtime treemap.

     Figure 43-31 Treemap Showing Match Rules at Runtime

     
     Description of "Figure 43-31 Treemap Showing Match Rules at Runtime"

     To specify an exception rule, in the Exception Rules section, click New and enter values for the following:

     • Condition: Enter a JSF EL expression that evaluates to true or false. You can enter the expression directly in the Condition field or select Expression Builder to enter the JSF EL expression.

       In the Summit ADF DVT sample application, three exception rules are defined for the bottom level of the hierarchy. When the product's inventory level is well above the reorder level, the treemap node in Figure 43-24 and the sunburst node in Figure 43-25 display in green. The treemap and sunburst node display in yellow when the inventory level is close to the reorder point and display in red when the inventory level is at or very near the reorder point.

       Figure 43-32 shows the Create Treemap dialog for the Summit ADF DVT sample data collection using exception rules for the bottom level of the hierarchy.

       Figure 43-32 Treemap Showing Exception Rules Creation Dialog

       
       Description of "Figure 43-32 Treemap Showing Exception Rules Creation Dialog"

       Note:

       In this example, the condition is referencing the ReorderPoint attribute from the data collection. To use this attribute, you must manually add it to the binding for the treemap after the treemap is created. For more information, see What Happens When You Create a Databound Treemap or Sunburst.

     • Property: From the dropdown list, select Color if you want the node to vary by color. Select Pattern if you want the node to vary by pattern.

     • Property Value: From the dropdown list, select the color or pattern to display when the node's value meets the condition you specified in the Condition field. For color, you can select one of the provided values or select Custom Color to enter a custom color in the Select Custom Color dialog. For pattern, you must select one of the provided values.

     • Legend Label: From the dropdown list, select Select Text Resource to select a text resource to be used for the legend label. You can also enter text in this field or select Expression Builder to enter a JSF EL expression.

5. Click OK.

Creating a treemap or sunburst from Data Controls panel has the following effect:

• Creates the bindings for the sunburst or treemap in the page definition file of the JSF page

• Adds the necessary tags to the JSF page for the treemap or sunburst component

The example below displays bindings that JDeveloper generated for a treemap component using the data collection in Figure 43-26.

<executables>
  <variableIterator id="variables"/>
  <iterator Binds="SRegionView1" RangeSize="-1"
            DataControl="AppModuleDataControl" id="SRegionView1Iterator"/>
</executables>
<bindings>
  <tree IterBinding="SRegionView1Iterator" id="SRegionView1">
    <nodeDefinition DefName="model.SRegionView" Name="SRegionView10">
      <AttrNames>
        <Item Value="CountryCount"/>
        <Item Value="Name"/>
      </AttrNames>
      <Accessors>
        <Item Value="SCountriesView"/>
      </Accessors>
    </nodeDefinition>
    <nodeDefinition DefName="model.SCountriesView" Name="SRegionView11">
      <AttrNames>
        <Item Value="WarehouseCount"/>
        <Item Value="Country"/>
      </AttrNames>
      <Accessors>
        <Item Value="SWarehouseView"/>
      </Accessors>
    </nodeDefinition>
    <nodeDefinition DefName="model.SWarehouseView" Name="SRegionView12">
      <AttrNames>
        <Item Value="ProductCount"/>
        <Item Value="City"/>
      </AttrNames>
      <Accessors>
        <Item Value="ProductInventoryView"/>
      </Accessors>
    </nodeDefinition>
    <nodeDefinition DefName="model.ProductInventoryView" Name="SRegionView13">
      <AttrNames>
        <Item Value="Name"/>
        <Item Value="AmountInStock"/>
      </AttrNames>
    </nodeDefinition>
  </tree>
</bindings>

The rules for populating the nodes of the treemap or sunburst are defined in node definitions. The example shows that four node definitions were generated, one for each level of the hierarchy. Each of these node definitions references a view object and the attributes specified in the Create Treemap or Create Sunburst dialog. Each node definition also references an accessor for the next level of the hierarchy if the next level exists.

Attributes that were not specified in the Value, Name, or Group By Value fields during creation will not be included in the binding. If you need to reference another attribute in the data collection, you must add it manually to the binding. For example, in the Summit ADF DVT sample, the attribute exception rules calculate the colors based on the difference between the amount in stock (AmountInStock) and the reorder point (ReorderPoint) for a given product. For the EL expression to evaluate properly, you must add the ReorderPoint attribute to the binding definition for the treemap or sunburst.

To add the binding, in the Structure window, right-click the dvt:treemap or dvt:sunburst component and choose Go to Binding. Choose Edit in the Binding section to add the ReorderPoint attribute. Figure 43-33 shows the completed Edit Tree Binding dialog for the Summit ADF DVT treemap with ReorderPoint added to the display attributes.

Figure 43-33 Edit Tree Binding Dialog

Description of "Figure 43-33 Edit Tree Binding Dialog"

After you click OK, the binding will be updated with the added attribute. The example below shows the revised binding for the SRegionView13 node definition.

<nodeDefinition DefName="model.ProductInventoryView" Name="SRegionView13">
  <AttrNames>
    <Item Value="Name"/>
    <Item Value="AmountInStock"/>
    <Item Value="ReorderPoint"/>
  </AttrNames>
</nodeDefinition>

Once you create your treemap or sunburst, you can modify the value, label, and attribute group for each node using the Create Treemap or Create Sunburst dialog. To open the dialog, use the Edit icon in the Properties window for the treemap or sunburst component. You can also customize the values directly in the code or by setting values in the Properties window.

By default, a sunburst or treemap displays only the first two levels of the hierarchy and will not display a legend until you configure the legendSource attribute on the sunburst or treemap. Figure 43-34 shows the treemap that is displayed at runtime if you create the treemap using the data collection in Figure 43-26.

Figure 43-34 Databound Treemap Example Before Configuration

Description of "Figure 43-34 Databound Treemap Example Before Configuration"

After completing the Create Treemap or Create Sunburst dialog, you can use the Properties window to configure the treemap or sunburst level display and legendSource attribute. You can also specify settings for other treemap or sunburst attributes and use the child tags associated with the sunburst and treemap tags to customize the components further.

The example below shows the code on the JSF page code for the treemap in Figure 43-24. In this example, the databound treemap is configured to display all levels in the hierarchy, a legend, a tooltip when the user hovers the mouse over a node, and a summary for accessibility. The code related to the additional configuration is highlighted in bold font.

<dvt:treemap id="t1" value="#{bindings.SRegionView1.treeModel}"
             var="row" displayLevelsChildren="3"
             legendSource="ag1" summary="Sample Treemap">
  <af:switcher facetName="#{row.hierTypeBinding.name}" id="s1">
    <f:facet name="SRegionView11">
      <dvt:treemapNode value="#{row.WarehouseCount}" label="#{row.Country}"
                       id="tn1">
        <dvt:attributeGroups id="ag2" value="#{row.WarehouseCount}" type="color"/>
      </dvt:treemapNode>
    </f:facet>
    <f:facet name="SRegionView10">
      <dvt:treemapNode value="#{row.CountryCount}" label="#{row.Name}" id="tn2">
        <dvt:attributeGroups id="ag3" value="#{row.CountryCount}" type="color"/>
      </dvt:treemapNode>
    </f:facet>
    <f:facet name="SRegionView13">
      <dvt:treemapNode value="#{row.AmountInStock}" label="#{row.Name}" id="tn3"
                       shortDesc="Amount in Stock:
                                  #{row.AmountInStock}&lt;br/>Reorder Point:
                                  #{row.ReorderPoint}">
        <dvt:attributeGroups value="#{row.AmountInStock}" type="color" id="ag1">
          <dvt:attributeExceptionRule id="aer1"
                                      condition="#{(row.AmountInStock -
                                                    row.ReorderPoint) gt 50}"
                                      label="Stock OK">
            <f:attribute name="color" value="#008800"/>
          </dvt:attributeExceptionRule>
          <dvt:attributeExceptionRule id="aer2"
                condition="#{((row.AmountInStock - row.ReorderPoint) le 50) and
                             ((row.AmountInStock - row.ReorderPoint) gt 25)}"
                label="Stock Level Getting Low">
            <f:attribute name="color" value="#FFFF33"/>
          </dvt:attributeExceptionRule>
          <dvt:attributeExceptionRule id="aer3"
                condition="#{(row.AmountInStock - row.ReorderPoint) le 25}"
                label="Reorder Time">
            <f:attribute name="color" value="#880000"/>
          </dvt:attributeExceptionRule>
        </dvt:attributeGroups>
      </dvt:treemapNode>
    </f:facet>
    <f:facet name="SRegionView12">
      <dvt:treemapNode value="#{row.ProductCount}" label="#{row.City}" id="tn4">
        <dvt:attributeGroups id="ag4" value="#{row.ProductCount}" type="color"/>
      </dvt:treemapNode>
    </f:facet>
  </af:switcher>
</dvt:treemap>

The example below shows the code on the JSF page code for the sunburst in Figure 43-25. In this example, the databound sunburst is configured with a summary and a tooltip that displays when the user hovers the mouse over a node.

<dvt:sunburst id="t1" value="#{bindings.SRegionView1.collectionModel}"
              var="row" summary="Sunburst Demo">
  <af:switcher facetName="#{row.hierTypeBinding.name}" id="s1">
    <f:facet name="SRegionView10">
     <dvt:sunburstNode value="#{row.TotalSales}" label="#{row.Name}" id="sn1"
          shortDesc="Sales: #{row.TotalSales}&lt;br/>Orders: #{row.TotalOrders}">
       <dvt:attributeGroups value="#{row.TotalOrders}" type="color" id="ag2"/>
     </dvt:sunburstNode>
   </f:facet>
   <f:facet name="SRegionView11">
     <dvt:sunburstNode value="#{row.TotalSales}" label="#{row.Country}" id="sn2"
          shortDesc="Sales: #{row.TotalSales}&lt;br/>Orders: #{row.TotalOrders}">
       <dvt:attributeGroups value="#{row.TotalOrders}" type="color" id="ag1"/>
     </dvt:sunburstNode>
   </f:facet>
 </af:switcher>
</dvt:sunburst>

For information about configuring the sunburst or treemap level display, legendSource attribute, tooltips, additional attributes, or child tags, see the Using Treemap and Sunburst Components chapter in Developing Web User Interfaces with Oracle ADF Faces.