For detailed descriptions of data visualization use cases and examples, see the following:

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

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

• Picto Chart components: Picto Chart Component Use Cases and Examples section in Developing Web User Interfaces with Oracle ADF Faces.

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:

• Chart components: End User and Presentation Features of Charts section in Developing Web User Interfaces with Oracle ADF Faces.

• Gauge components: End User and Presentation Features of Gauge Components section in Developing Web User Interfaces with Oracle ADF Faces.

• Picto Chart components: End User and Presentation Features of Picto Charts section in Developing Web User Interfaces with Oracle ADF Faces.

Area, bar, horizontal bar, and line charts require at least two groups of data, with one or more series. The groups are displayed along the chart's X Axis for area, bar, and line charts and on the chart's Y Axis for horizontal bar charts. Series are displayed as the areas, bars, or lines on the chart.

Figure 38-2 shows two bar charts in the Summit ADF sample application. The bar chart on the left is configured to show the customer's order history and order average, and the bar chart on the right shows the ship time for each order. In these examples, the bar charts are configured with groups that represent order and ship dates, and the series are the order totals and ship time averages. The order average is displayed as a red reference line on the Order History chart.

Figure 38-2 Bar Charts in Summit ADF Sample Application

For information about adding reference lines to charts after the chart is created, see "Adding Reference Objects to a Chart" in Developing Web User Interfaces with Oracle ADF Faces.

Before you begin:

It may be helpful to have an understanding of databound data visualization charts. See Creating Databound Charts.

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

You will need to complete these tasks:

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

   For example, to create the bar chart that displays the shipping times for each order on the Orders Dashboard page of the Summit ADF sample application, select the OrdersForCustomer collection.

2. Drag the collection onto a JSF page and, from the context menu, choose Charts.
3. In the Component Gallery, select a chart category and a chart type and click OK.

   The name of the dialog and the input field labels that appear depend on the category, type of chart, and data collection that you select. For example, if you select Bar as the chart category and Bar as the chart type, then the name of the dialog that appears is Create Bar Chart and the input fields are labeled Bars and X Axis.

4. Do the following in the dialog to configure the chart to display data:

   • Drag attributes from the Available list to the input fields, depending on where you want the values for the attributes to appear at runtime.

     For example, to configure the bar chart in the Summit ADF sample application to display the order dates along the X Axis, drag the DateOrdered attribute from the Available list to the X Axis field in the Create Bar Chart dialog. To configure the chart to display the time to ship as bars, drag the TimeToShip attribute from the Available list to the Bars field in the Create Bar Chart dialog.

     If you selected a chart type that includes a dual y-axis, the second area, bar, or line that you add will be rendered on the second y-axis. In addition, a chartSeriesStyle component will be added to the chart for the series represented on the second y-axis, and the assignedToY2 attribute of the chartSeriesStyle component will be set to true.

     If you selected a combination chart, each attribute that you add to the Data Points input field will be rendered as an area, bar, or line chart. By default, the first attribute will be rendered as a bar chart, the second attribute will be rendered as a line chart, and the third attribute will be rendered as an area chart. To change the chart type, you can add a chartSeriesStyle component to the combination chart's seriesStamp facet.

     If you selected a range area or range bar chart, there will be two required fields for the y-axis. To configure the chart to display a range of data, drag attributes from the Available list to the High Values and Low Values fields in the Create Range Area Chart or Create Range Bar Chart dialog.

   • In the Attribute Labels table, accept the default value or select a value from the dropdown list in the Label field to specify the label that appears at runtime.

     The underlying data type determines the choices available in the Label field. The choice you make determines how that attribute's label is rendered in the chart.

   Figure 38-5 shows the Create Bar Chart dialog that generates the Summit ADF sample application Shipping Time bar chart using data from the DateOrdered and TimeToShip attributes in the OrdersForCustomer data collection.

   Figure 38-5 Create Bar Chart Dialog for Summit ADF Shipping Time Chart

   
   Description of "Figure 38-5 Create Bar Chart Dialog for Summit ADF Shipping Time Chart"
5. Click OK.

Dropping a chart from the Data Controls panel has the following effect:

• Creates the bindings for the chart and adds the bindings to the page definition file

• Adds the necessary code for the UI components to the JSF page

The data binding XML that JDeveloper generates represents the physical model of the specific chart type you create. The example below shows the bindings that JDeveloper generated in the page definition file where a vertical bar chart was created using data from the DateOrdered and TimeToShip attributes in the OrdersForCustomer data collection.

<tree IterBinding="OrdersForCustomerIterator" id="OrdersForCustomer5"
      ChangeEventPolicy="ppr">
  <nodeDefinition DefName="oracle.summit.model.views.OrdVO"
                  Name="OrdersForCustomer5">
    <AttrNames>
      <Item Value="TimeToShip"/>
      <Item Value="DateOrdered"/>
    </AttrNames>
  </nodeDefinition>
</tree>

Charts use a standard tree binding as shown in the example. The node definition shows the name and instance of the data control (OrdersForCustomer5), and the view object (OrdVO) on which the data control is based. Each displayed attribute is listed in the AttrNames definition. For a chart configured for a dual y-axis, the AttrNames definition would include an additional item for the series displayed on the second y-axis.

The example below shows the code generated for a vertical bar chart when you drag the OrdersForCustomer data collection onto a JSF page and specify DateOrdered for the x-axis and TimeToShip for the bars.

<dvt:barChart id="barChart2" var="row"
              value="#{bindings.OrdersForCustomer5.collectionModel}">  <dvt:chartLegend id="cl2"/>
  <f:facet name="dataStamp">
    <dvt:chartDataItem id="di2" value="#{row.TimeToShip}"
                 group="#{row.DateOrdered}"
                 series="#{bindings.OrdersForCustomer5.hints.TimeToShip.label}"/>
  </f:facet>
</dvt:barChart>

A funnel chart is used to represent the steps in a process. You can create a funnel chart by using the Data Controls panel.

A funnel chart requires at least two values, with a maximum of three. The values represent the actual and target data values for each stage, and the stage value.

Figure 38-6 shows a sample funnel chart. The funnel shows the different stages in a sales conversion process for an online store. Each funnel section shows the number of customers who reached the given stage in the process versus the desired target number of customers for the stage. As the user moves over each section, a tooltip provides the numerical quantity of the actual value and target value for that stage.

Figure 38-6 Sample Funnel Chart

Description of "Figure 38-6 Sample Funnel Chart"

Before you begin:

It may be helpful to have an understanding of databound data visualization charts. For more information, see Creating Databound Charts.

You will need to complete these tasks:

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

   For example, the funnel chart displayed above is made using the SalesConversionFunnel collection. Figure 38-7 shows the SalesConversionFunnel collection in the Data Controls panel.

   Figure 38-7 Data Collection for SalesConversionFunnel Collection

   
   Description of "Figure 38-7 Data Collection for SalesConversionFunnel Collection"
2. Drag the collection onto a JSF page and, from the context menu, choose Charts.
3. In the Component Gallery, select the funnel chart category and a chart type and click OK.

   For example, select the Funnel chart category and the Funnel chart type to create a vertical funnel chart.

4. Do the following in the dialog to configure the chart to display data:

   • From the dropdown menus of the Actual Value and Target Value fields, select an attribute to represent series of data.

     For example, to configure the funnel chart in the sample, select the NumOfVisitors attribute from the Actual Value field's dropdown menu, and the TargetVisitors attribute from the Target Value field's dropdown menu.

   • From the dropdown menu of the Funnel Section field, select an attribute to represent a group of data.

     For example, to configure the funnel chart in the sample, select the Stage attribute from the Funnel Section field's dropdown menu.

   Figure 38-8 shows the Create Funnel Chart dialog that generates a funnel chart using the NumberOfVisitors, TargetVisitors, Stage attributes in the SalesConversionFunnel collection.

   Figure 38-8 Create Funnel Chart for SalesConversionFunnel

   
   Description of "Figure 38-8 Create Funnel Chart for SalesConversionFunnel"
5. Click OK.

<dvt:funnelChart id="funnelChart1" var="row"
         value="#{bindings.SalesConversionFunnel.collectionModel}">
<dvt:funnelDataItem id="di1" value="#{row.NumberOfVisitors}"
                             targetValue="#{row.TargetVisitors}"
                             label="#{row.Stage}"/>
</dvt:funnelChart>

A pie chart displays one group of data, each slice representing a different series. This chart type requires one column, with multiple rows, one for each slice. You can create a pie chart using the Data Controls panel.

Figure 38-9 shows a pie chart in the Summit ADF sample application that displays the inventory available for the ordered item at each stock location as a percentage of the total available inventory for the item. As the user moves the mouse over each slice, a tooltip shows the actual quantity at the location. The column of data in this example represents the total inventory for the ordered item, and the slices represent the inventory levels at each stocking location.

Figure 38-9 Pie Chart Showing Inventory Levels at Stock Locations

Before you begin:

It may be helpful to have an understanding of databound data visualization charts. For more information, see Creating Databound Charts.

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.

You will need to complete these tasks:

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

   For example, to create the pie chart that displays the inventory levels at each stock location in the Summit Customer Management page of the Summit ADF sample application, select the BackOfficeAppModuleDataControl > Customers > OrdersForCustomer > ItemsForOrder > InventoryForOrderItem collection. Figure 38-10 shows the InventoryForOrderItem collection in the Data Controls panel.

   Figure 38-10 Data Collection for InventoryForOrderItem Collection

   
2. Drag the collection onto a JSF page and, from the context menu, choose Charts.
3. In the Component Gallery, select the Pie chart category and a chart type and click OK.

   For example, select the Pie chart category and the Pie chart type to create the pie chart in Figure 38-9.

4. Do the following in the Create Pie Chart dialog to configure the pie chart to display data:

   • From the Pie field's dropdownx‘ menu, select an attribute to represent the column of data.

     For example, to configure the pie chart in the Summit ADF sample application to display inventory levels, select the AmountInStock attribute from the Pie field's dropdown menu.

   • Drag attributes from the Available list to the Slices field, depending on where you want the values for the attributes to appear at runtime.

     For example, to configure the pie chart in the Summit ADF sample application to display the ordered item's inventory levels at each stock location, drag the City attribute from the Available list to the Slices field in the Create Pie Chart dialog.

   • In the Attribute Labels table, accept the default value or select a value from the dropdown list in the Label field to specify the label that appears at runtime.

     The underlying data type determines the choices available in the Label field. The choice you make determines how that attribute's label is rendered in the chart. For more information, see What You May Need to Know About Using Attribute Labels.

   Figure 38-11 shows the Create Pie Chart dialog that generates a pie chart using the AmountInStock and City attributes in the InventoryForOrderItem collection.

   Figure 38-11 Create Pie Chart for InventoryForOrderItem

   
   Description of "Figure 38-11 Create Pie Chart for InventoryForOrderItem "
5. Click OK.

   The example below shows the code generated for the pie chart when you drag the InventoryForOrderItem data collection onto a JSF page and specify AmountInStock for the Pie value and City for the Slices.

   <dvt:pieChart id="pieChart1" var="row"
                 value="#{bindings.InventoryForOrderItem1.collectionModel}">
     <dvt:chartLegend/>
     <dvt:pieDataItem id="di1" value="#{row.AmountInStock}" label="#{row.City}"/>
   </dvt:pieChart>
   

Spark charts are simple, condensed charts that display trends or variations, often in the column of a table, or inline with text. You can create a sparkchart by inserting a data control from the Data Controls Panel.

Figure 38-12 shows the Component Gallery that displays when you drag a spark chart onto your page from the Data Controls panel.

Figure 38-12 Create Spark Chart Component Gallery

Description of "Figure 38-12 Create Spark Chart Component Gallery"

A binding dialog prompts you to specify the value you wish to display for the selected spark chart type. Line, bar, and area spark charts require a single series of data values, for example the changing value of a stock. Floating bar spark charts require two series of data values, one for the float offset, and one for the bar value. For example, in the Create Floating Stacked Bar Sparkchart dialog you specify:

• Bar Height: Use to select the data value to use for the bar value.

• Bar Float: Use to select the data value to use for the float offset, the distance between the axis and the floating bar.

Figure 38-13 shows a completed Create Floating Stacked Bar Sparkchart dialog.

Figure 38-13 Sparkchart Binding Dialog

Description of "Figure 38-13 Sparkchart Binding Dialog"

In a simple UI-first development scenario you can insert a sparkchart using the Components window and bind it to data afterwards. For additional information about providing data to spark charts, see How to Add Data to Spark Charts in Developing Web User Interfaces with Oracle ADF Faces.

Bubble and scatter charts represent data by the location of the data marker. Bubble charts also use the size of the markers to represent an additional aspect of the data.

• The x value that determines the marker's location along the x-axis.

• The y value that determines the marker's location along the y-axis.

• The z value that determines the size of the marker on bubble charts

For more than one group of data, the data must be in multiples of two for scatter charts and three for bubble charts.

Figure 38-14 shows a scatter and a bubble chart displaying salary and commission for salesmen in the Summit organization. In this example, the x value is determined by the commission, and the y value is determined by the salary. The bubble chart is configured to use the salesmen's total sales for the z value. In this example, Magee has the lowest salary and commission but is the salesman with the highest sales total.

Figure 38-14 Databound Scatter and Bubble Chart Examples

Before you begin:

It may be helpful to have an understanding of databound data visualization charts. For more information, see Creating Databound Charts.

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.

You will need to complete these tasks:

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

  For example, the bubble and scatter charts in Figure 38-14 in 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 38-15 shows the SalesRepViewObj view object.

  Figure 38-15 SalesRepViewObj View Object in Summit DVT Sample Application

  
  Description of "Figure 38-15 SalesRepViewObj View Object in Summit DVT Sample Application"

  Figure 38-16 shows the SalesRepViewObj3 data control.

  Figure 38-16 SalesRepViewObj3 Data Control in Summit DVT Sample Application

  
  Description of "Figure 38-16 SalesRepViewObj3 Data Control in Summit DVT Sample Application"

  The TotalSales attribute is a transient attribute that calculates the salesman's total sales from the Total attribute in the SOrdView view object: SOrdView.sum ('Total'). For information about adding transient attributes to view objects, see Adding Calculated and Transient Attributes to a View Object.

• Create a JSF page as described in the How to Create JSF Pages section of Developing Web User Interfaces with Oracle ADF Faces.

To create a databound bubble or scatter chart:

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

   For example, to create the bubble or scatter chart shown in Figure 38-14, select the SalesRepViewObj3 collection.

2. Drag the collection onto a JSF page and, from the context menu, choose Charts.
3. In the Component Gallery, select the bubble or scatter chart category and a chart type and click OK.
4. In the Create Bubble Chart or Create Scatter Chart dialog, do the following in the dialog to configure the bubble or scatter chart axis values:

   • In the X Axis Data Point field, use the dropdown list to specify the attribute in the data collection to use for the x-axis data point.

     For example, to configure the bubble or scatter chart to display the commission percent along the X Axis, select CommissionPct from the dropdown list.

   • In the Y Axis Data Point field, use the dropdown list to specify the attribute in the data collection to use for the y-axis data point.

   • For bubble charts, in the Z Axis Data Point field, use the dropdown list to specify the attribute in the data collection to use for the z-axis data point.

5. If you are configuring a scatter chart, in the Markers section, do the following in the dialog to configure the scatter chart's color, shape, and tooltip:

   • Select Automatically to use system-generated values for color/shape combinations. Select Manually to use distinct attributes to determine color and shape.

     If you select Manually, select the attributes in the dropdown list for Marker Color and Marker Shape.

     For example, you could select LastName and FirstName to be used for Marker Color and Marker Shape for the scatter chart displayed in Figure 38-14. When the scatter chart is rendered, the legend will contain entries for both the color and shape as shown in Figure 38-17. The scatter chart's tooltip displays the value associated with both the marker and shape attributes.

     Figure 38-17 Scatter Chart Configured Manually for Color and Shape

     

   • From the Marker Type field's dropdown list, specify one or more attributes in the data collection that determine the values that appear in the legend of the scatter chart. Each attribute will be represented by its own color/shape combination in the scatter chart's legend. You can drag and drop attributes from the Available list, or select from the Add dropdown list.

     After specifying attributes for the input field, you can right click on any attribute to display a context menu for actions such as Move Right, Move Left, Delete, or Treat as Text.

   • From the Marker Tooltip field's dropdown list, select the attribute to use for the scatter chart's tooltip.

6. If you are configuring a bubble chart, in the Markers section, do the following in the dialog to configure the bubble colors and tooltip:

   • Select Automatically to use system-generated values for color. Select Manually to use distinct attributes to determine color and shape.

     If you select Manually, select the attribute in the dropdown list for Marker Color and Marker Shape.

   • If you selected Automatically, from the Bubble Color field's dropdown list, specify one or more attributes in the data collection that determine the values that appear in the legend of the bubble chart. Each attribute will be represented by its own color in the bubble chart's legend. You can drag and drop attributes from the Available list, or select from the Add dropdown list.

     After specifying attributes for the input field, you can right click on any attribute to display a context menu for actions such as Move Right, Move Left, Delete, or Treat as Text.

   • From the Bubble Tooltip field's dropdown list, select the attribute to use for the bubble chart's tooltip.

     By default, the bubble chart's tooltip will display the attribute or attributes associated with the bubble chart's legend. For example, the bubble chart's tooltip in Figure 38-14 shows the last name of the salesman for the Group. You can select a different attribute in the collection to be used for the Group item in the tooltip.

7. In the Attribute Labels table, accept the default value or select a value from the dropdown list in the Label field to specify the label that appears at runtime.

   The underlying data type determines the choices available in the Label field. The choice you make determines how that attribute's label is rendered in the chart. For more information, see What You May Need to Know About Using Attribute Labels.

8. Click OK.

Figure 38-18 shows the Create Bubble Chart dialog that generates a bubble chart using data from the CommissionPct, Salary, and Total Sales attributes in the SalesRepViewObj3 data collection.

Figure 38-18 Create Bubble Chart Dialog

Description of "Figure 38-18 Create Bubble Chart Dialog"

The entries for the Create Scatter Chart dialog are similar, but you would not need to select a bubble size. Figure 38-19 shows the Create Scatter Chart dialog that generates a scatter chart using data from the CommissionPct and Salary attributes in the SalesRepViewObj3 data collection.

Figure 38-19 Create Scatter Chart Dialog

Description of "Figure 38-19 Create Scatter Chart Dialog"

The example below shows the code generated for the bubble and scatter charts when you drag the SalesRepViewObj3 data collection onto a JSF page and specify CommissionPct for the X Axis Data Point, Salary for the Y Axis Data Point, and TotalSales for the bubble chart's Z Axis Data Point.

<dvt:scatterChart id="scatterChart1" var="row"
                  value="#{bindings.SalesRepViewObj3.collectionModel}">
  <dvt:chartLegend rendered="true" id="cl1">
    <dvt:legendSection source="ag1" id="ls1"/>
  </dvt:chartLegend>
  <f:facet name="dataStamp">
    <dvt:chartDataItem id="di1" group="#{row.LastName}" x="#{row.CommissionPct}"
                       y="#{row.Salary}">
      <dvt:attributeGroups id="ag1" value="#{row.LastName}" type="color shape"/>
    </dvt:chartDataItem>
  </f:facet>
</dvt:scatterChart>
...
<dvt:bubbleChart id="bubbleChart1" var="row"
                 value="#{bindings.SalesRepViewObj3.collectionModel}">
  <dvt:chartLegend rendered="true" id="cl1">
    <dvt:legendSection source="ag1" id="ls1"/>
  </dvt:chartLegend>
  <f:facet name="dataStamp">
    <dvt:chartDataItem id="di1" group="#{row.LastName}" x="#{row.CommissionPct}"
                       y="#{row.Salary}" z="#{row.TotalSales}">
      <dvt:attributeGroups id="ag1" value="#{row.LastName}" type="color"/>
    </dvt:chartDataItem>
  </f:facet>
</dvt:bubbleChart>

If you chose to configure the scatter chart manually using attributes from the data collection for marker and shape, JDeveloper adds an additional dvt:legendSection and dvt:attributeGroups tag to the JSF page. The example below shows the revised code, with the modified entries highlighted in bold.

<dvt:scatterChart id="scatterChart1" var="row"
                  value="#{bindings.SalesRepViewObj3.collectionModel}">
  <dvt:chartLegend rendered="true" id="cl1">
    <dvt:legendSection source="ag1" id="ls1"/>
    <dvt:legendSection source="ag2" id="ls2"/>
  </dvt:chartLegend>
  <f:facet name="dataStamp">
    <dvt:chartDataItem id="di1" group="#{row.LastName} #{row.FirstName}"
                       x="#{row.CommissionPct}"
                       y="#{row.Salary}">
      <dvt:attributeGroups id="ag1" value="#{row.LastName}" type="color"/>
      <dvt:attributeGroups id="ag2" value="#{row.FirstName}" type="shape"/>
    </dvt:chartDataItem>
  </f:facet>
</dvt:scatterChart>

After completing the data binding dialog, you can use the Properties window to specify settings for the chart attributes, and you can also use the child tags associated with the chart tag to customize the chart further. For example, you can specify where you want the chart's legend to appear. For more information, see Using Chart Components in Developing Web User Interfaces with Oracle ADF Faces.

Polar and Radar charts are variations of the line, bar, area, bubble and scatter charts. You can create a polar or radar chart using the Data Controls panel.

The requirements of polar and radar charts vary based on the type of chart used. Radar line, radar area, and polar bar charts require at least two groups of data, with one or more series. Polar scatter charts require at least two data values to indicate position, while polar bubble charts require three values - two for position and one for bubble size.

Figure 38-20 shows a sample polar line chart, configured to show the available inventory levels of different products against the product ID and name.

Figure 38-20 Sample Polar Bar Chart

Before you begin:

It may be helpful to have an understanding of databound data visualization charts. For more information, see Creating Databound Charts.

You will need to complete these tasks:

1. From the Data Controls panel, select a collection.
2. Drag the collection onto a JSF page and, from the context menu, choose Charts.
3. In the Component Gallery, select the Radar/Polar chart category and a chart type and click OK.

   For example, select the Radar/Polar chart category and the Radar chart type to create a radar line chart.

4. If configuring a polar line, area or bar chart, do the following:

   • Drag attributes from the Available list to the input fields, depending on how you want the values for the attributes to appear at runtime.

     For example, to configure the polar bar chart in the sample application to display the inventory levels, drag the AmountInStock attribute from the Available list to the Bars field in the Create Bar Chart dialog. To configure the chart to display the product ID and name, drag the ProductId and Name attributes from the Available list to the X Axis field in the Create Bar Chart dialog.

5. Click OK.

Figure 38-23 shows the Create Radar Chart dialog that generates a polar line chart using data from the AmountInStock, ProductId, and Name attributes in the Inventory data collection.

Figure 38-23 Create Radar Chart Dialog

Description of "Figure 38-23 Create Radar Chart Dialog"

The example below shows the code generated for the bubble and scatter charts when you drag the Inventory data collection onto a JSF page and specify AmountInStock for the Y Axis Data Point, and ProductId and Name for the Y Axis Data Point. Notice that radar and polar charts do not have a separate tag, but are rather basic charts with the coordinateSystem attribute set to polar.

<dvt:lineChart coordinateSystem="polar" polarGridShape="polygon" id="lineChart1" var="row" value="#{bindings.Inventory.collectionModel}">
 <f:facet name="dataStamp">
  <dvt:chartDataItem id="di1"      series="#{bindings.Inventory.hints.AmountInStock.label}" value="#{row.AmountInStock}" group="#{row.ProductId} #{row.Name}"/>
 </f:facet>
</dvt:lineChart>

After completing the data binding dialog, you can use the Property Inspector to specify settings for the chart attributes and you can also use the child tags associated with the chart tag to customize the chart further. For more information about configuring chart components, see the Using Chart Components section in the Developing Web User Interfaces with Oracle ADF Faces.

Stock charts are used to track the period milestone values of trade stocks, such as the high, low, opening and closing prices of a stock. You can create a stock chart by using the Data Controls panel.

Depending on the type of chart chosen, stock charts require a minimum of four values to a maximum of seven values. Figure 38-24 shows a sample stock chart configured to show stocks and their opening value, closing value, high value, low value, time period, and trade volume. As the user moves over each stock, a tooltip provides the numerical quantity of all values for that stock.

Figure 38-24 Sample Stock Chart

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

   For example, the stock chart displayed above is made using the StockView1 collection. Figure 38-25 shows the StockView1 collection in the Data Controls panel.

   Figure 38-25 Data Control for StockView1 Collection

   
   Description of "Figure 38-25 Data Control for StockView1 Collection"
2. Drag the collection onto a JSF page and, from the context menu, choose Charts.
3. In the Component Gallery, select the Stock chart category and a chart type and click OK.
   For example, to create the chart configured in the sample, select the Stock chart category and the Open-Hi-Lo-Close Candle with Volume chart type.
4. Do the following in the dialog to configure the chart to display data:
   • From the Stock field’s dropdown menu, select an attribute to represent the name of the stock. You may use the Select Text Resource option to enter a text value or use the Expression Builder to provide a JSF expression.
   • Depending on the type of stock chart chosen, a selection of labels will be shown. For each label, select an attribute from that label’s dropdown menu.

     For example, to configure the chart from the example above, select the Open, High, Low, Close, Volume, and MarketDate attributes for the Open, High, Low, Close, Volume, and Time labels respectively.

     Figure 38-26 shows the Create Chart Dialog for the stock chart configured in the sample above.

     Figure 38-26 Create Chart Dialog for StockView1 Collection

     
     Description of "Figure 38-26 Create Chart Dialog for StockView1 Collection"
5. Click OK.

<dvt:stockChart id="stockChart1" var="row" value="#{bindings.StockView1.collectionModel}">
	<dvt:chartY2Axis id="cya1"/>
	<dvt:stockDataItem id="di1" volume="#{row.Volumn}" high="#{row.High}" low="#{row.Low}" series="Stock"
                              close="#{row.Close}" open="#{row.Open}" group="#{row.MarketDate}"/>
</dvt:stockChart>

When you configure attribute labels in the Create Chart dialog, the underlying data type determines the choices available in the Label field. The choice you make determines how that attribute's label is rendered in the chart.

If an attribute represents data values, then the choices in the Label field are:

• Use Attribute Name: Select to render the value as a string using the label from the UIHints for that attribute in the underlying ViewObject. This is the default selection.

• No Label: Select to render no label. This choice is useful if there is a single metric and you want to provide your own descriptive text on the page to describe the resulting chart.

• Select Text Resource: Select to open a Select Text Resource dialog to select or add a text resource to use for the label. The text resource is a translatable string from an application resource bundle. If you need help, press F1 or click Help.

• Expression Builder: Select to open the Expression Builder dialog to create an expression to be executed at runtime for the label. If you need help, press F1 or click Help.

If the attribute represents a category of data values, then the choices are:

• Use Attribute Value: Select to render the attribute values as category labels. This is the default selection.

• From the dropdown list, choose an alternate attribute for the label. For example, use Employee Names for labels instead of Employee IDs.

You can use the ADF gauge component to create a dial gauge against a circle, dome, or rectangle background. The gauge's indicator specifies the current value of the metric.

Figure 38-28 shows a single dial gauge that appears if you create a gauge from the AmountInStock data for inventory items in the Summit ADF DVT sample application. The value of the AmountInStock metric, which is 0.650K, appears in a label in the center of the gauge

Figure 38-28 The Amount in Stock Dial Gauge

To create a dial gauge using a data control, you bind the gauge component to an attribute in a data collection. JDeveloper allows you to do this declaratively by dragging and dropping an attribute from the Data Controls panel. After you drag and drop the attribute, use the Create Dial Gauge dialog to configure the gauge.

Figure 38-29 shows the Create Dial Gauge dialog configured for the Amount in Stock dial gauge shown in Figure 38-28 and using the gauge type shown in Figure 38-27.

Figure 38-29 Create Dial Gauge Dialog for Amount in Stock Dial Gauge

Description of "Figure 38-29 Create Dial Gauge Dialog for Amount in Stock Dial Gauge"

Before You Begin:

It may be helpful to have an understanding of databound data visualization gauges. For more information, see Creating Databound Gauges.

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.

You will need to complete these tasks:

1. From the Data Controls panel, select an attribute from a collection.

   For example, to create a dial gauge in the Summit ADF DVT sample application to display the stock levels for an inventory item, you would select the AmountInStock attribute in the ProductInventoryView1 collection. Figure 38-30 shows the ProductInventoryView1 collection in the Data Controls panel with the AmountInStock attribute selected.

   Figure 38-30 Data Collection with Amount in Stock for an Inventory Item

   
   Description of "Figure 38-30 Data Collection with Amount in Stock for an Inventory Item"
2. Drag the attribute onto a JSF page and, from the context menu, choose Gauges.
3. In the Component Gallery, choose the category and type of gauge, and then click OK.
4. In the Create Dial Gauge dialog, do the following:

   • In the Metric field, confirm the column in your data collection that contains the actual value that the gauge is to plot. This is the only required value in the dialog.

   • In the Minimum field, if your data collection stores a minimum value for the gauge range, select the column that contains this value from the dropdown list. Alternatively, specify a minimum number for the range. If you do not specify a value, the minimum defaults to 0.

   • In the Maximum field, if your data collection stores a maximum value for the gauge range, select the column that contains this value from the dropdown list. Alternatively, specify a maximum value. If you do not specify a value, the maximum value defaults to 100.

   • In the Background field, select a background from the dropdown list.

     Available shapes include circle, dome, and rectangle, with alta, light, antique, or dark shading. By default, the gauge's background is set to auto which will return the primary design for the current skin.

   • In the Indicator field, select an indicator style from the dropdown list.

     Available indicators include alta, antique, dark, and light. By default the indicator is set to auto which will select the indicator that matches the gauge's background.

   • In the Show Metric Label check box, select the Show Metric Label check box to show a metric label for the gauge. The metric label contains the actual metric value for the gauge. For example, if the amount in stock for a given item is 63, then the metric label will display 63.

5. Click OK.

Dropping a gauge from the Data Controls panel has the following effect:

• Creates the bindings for the gauge and adds the bindings to the page definition file

• Adds the necessary code for the UI components to the JSF page

The example below shows the bindings that JDeveloper generated for the dial gauge that displays the inventory level for a product in a warehouse. This code example shows that the gauge metric receives its value dynamically from the AmountInStock attribute in the ProductInventoryView1 data collection.

<bindings>
  <attributeValues IterBinding="ProductInventoryView1Iterator" id="AmountInStock">
    <AttrNames>
      <Item Value="AmountInStock"/>
    </AttrNames>
  </attributeValues>
</bindings>

The example below shows the code that ­JDeveloper generated in the JSF page for a dial gauge.

<dvt:dialGauge id="dialGauge1" indicator="needleAlta" minimum="0"
               maximum="2600" background="domeAlta"
               value="#{bindings.AmountInStock.inputValue}">
  <dvt:gaugeMetricLabel rendered="true" id="gml1"/>
</dvt:dialGauge>

The rating gauge displays and optionally accepts input for a metric value. This gauge is typically used to show ratings for products or services, such as the star rating for a movie.

Figure 38-31 shows an example of a rating gauge used to indicate a customer's credit rating in the Summit ADF sample application. In this example, the customer has a poor credit rating and is assigned one star. Other ratings include two stars for fair credit, three stars for good credit, and four stars for excellent.

Figure 38-31 Rating Gauge in Summit ADF Sample Application

Description of "Figure 38-31 Rating Gauge in Summit ADF Sample Application"

To create a rating gauge using a data control, you bind the rating gauge to an attribute in a data collection. JDeveloper allows you to do this declaratively by dragging and dropping an attribute from the Data Controls panel. After you drag and drop the attribute, use the Create Rating Gauge dialog to configure the gauge.

Figure 38-32 shows the Create Rating Gauge dialog completed for the rating gauge in Figure 38-31. In this example, the rating gauge is set to a maximum value of four to reflect the four credit ratings.

Figure 38-32 Create Rating Gauge Dialog for Summit Credit Rating Gauge

Description of "Figure 38-32 Create Rating Gauge Dialog for Summit Credit Rating Gauge"

Before You Begin:

It may be helpful to have an understanding of databound data visualization gauges. For more information, see Creating Databound Gauges.

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.

You will need to complete these tasks:

1. From the Data Controls panel, select an attribute from a collection.

   For example, to create the rating gauge in the Summit ADF sample application to display the credit ratings for a customer, you would select the CreditRatingId attribute in the Customer collection. Figure 38-30 shows the Customer collection in the Data Controls panel with the CreditRatingId attribute selected.

   Figure 38-33 Data Collection with Amount in Stock for an Inventory Item

   
   Description of "Figure 38-33 Data Collection with Amount in Stock for an Inventory Item"
2. Drag the attribute onto a JSF page and, from the context menu, choose Gauges.
3. In the Component Gallery, choose the category and type of gauge, and then click OK.
4. In the Create Rating Gauge dialog, do the following:

   • In the Rating Value field, confirm the column in your data collection that contains the actual value that the gauge is to plot. This is the only required value in the dialog.

   • In the Minimum field, if your data collection stores a minimum value for the gauge range, select the column that contains this value from the dropdown list. Alternatively, specify a minimum number for the range. If you do not specify a value, the minimum defaults to 0.

   • In the Maximum field, if your data collection stores a maximum value for the gauge range, select the column that contains this value from the dropdown list. Alternatively, specify a maximum value. If you do not specify a value, the maximum value defaults to 5.

   • In the Shape field, select a background from the dropdown list.

     Available shapes include circle, diamond, rectangle, and star.

5. Click OK.

<dvt:ratingGauge id="ratingGauge1" minimum="0" maximum="4"
                 value="#{5 - bindings.CreditRatingId.inputValue}" shape="star"/>

You can add databound gauges to a databound ADF table by choosing the gauge component when specifying column content during table editing or creation.

Figure 38-34 shows a portion of a table that displays all the products in a warehouse in the Summit ADF DVT sample application. In this example, the AmountInStock column includes a LED gauge that shows the amount in stock for each product and whether the value falls within an acceptable range.

Figure 38-34 LED Gauge in an ADF Table

A picto chart is used to visualize an absolute number or the relative sizes of the different parts of a population. You can create a picto chart by using the Data Controls panel.

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

   For example, to use the data collection shown in Figure 38-37, select the PictoChartData collection. Figure 38-38 shows the collection in the Data Controls panel.

   Figure 38-38 Data Control for Sample Picto Chart

   
   Description of "Figure 38-38 Data Control for Sample Picto Chart"
2. Drag the collection onto a JSF page, and from the menu, choose Picto Chart.
3. In the Create Picto Chart dialog, do the following:

   • In the Name field, specify a value for the tooltip to be displayed.

     For example, to configure the picto chart in the sample, select the Name attribute.

   • Optionally, in the Count field, specify a numeric value for the number of times the shape or image should be drawn. You can specify a data item or text resource or use the Expression Builder from the dropdown list. If no value is specified, it will use a default value of 1.

     For example, to configure the picto chart in the sample, select the Count attribute.

     Figure 38-39 shows the Create Picto Chart dialog with the values filled in.

     Figure 38-39 Create Picto Chart Dialog

     
     Description of "Figure 38-39 Create Picto Chart Dialog"
4. Click OK.

To create a picto chart from a Data control, drag the control from the Data Control panel and drop it on a relevant container on the JSF page.

Dropping a picto chart from the Data Controls panel has the following effect:

• Creates the bindings for the picto chart and adds the bindings to the page definition file

• Adds the necessary code for the UI components to the JSF page

The example below shows the bindings that JDeveloper generated for the sample picto chart.

<tree IterBinding="PictoChartDataIterator" id="PictoChartData" ChangeEventPolicy="ppr">
	<nodeDefinition DefName="view.prototype.PictoChartData" Name="PictoChartData">
		<AttrNames>
			<Item Value="Name"/>
			<Item Value="Count"/>
		</AttrNames>
	</nodeDefinition>
</tree>

The example below shows the code that JDeveloper generated in the JSF page for a picto chart.

<dvt:pictoChart id="pictoChart1" var="row" value="#{bindings.PictoChartData.collectionModel}">
  <dvt:pictoChartItem name="#{row.Name}" count="#{row.Count}" id="pci1"/>
</dvt:pictoChart>

After you create your picto chart, you can modify the binding or add additional rules using the Edit Picto Chart dialog. To open the dialog, click the Edit icon in the Properties window for the picto chart component. You can also customize the attributes of the picto chart directly in the code, in the visual editor, or by setting values in the Properties window. For example, you can use the Properties window or code editor to set the color for different parts of the population and to set a shape for the data items.. The example below highlights the relevant code.

<dvt:pictoChartItem name="#{row.Name}" count="#{row.Count}" color="#{row.Color}"
			shape="human" id="pci1"/>