Is chart element that identifies the patterns or colors assigned to the categories in the chart?

Figure 23-38 shows the bubble chart and scatter chart displayed at runtime. The tooltips show the data from the first ChartDataItem defined in Example 23-6 and Example 23-7.

Figure 23-38 Bubble and Scatter Charts Configured From Managed Bean

Before you begin:

It may be helpful to have an understanding of how chart attributes and child tags can affect functionality. For more information about configuring charts, see Section 23.2.2, "Configuring Charts."

You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Section 23.1.3, "Additional Functionality for Chart Components."

Add a bubble or scatter chart to your page. For help with adding a chart to a page, see Section 23.2.3, "How to Add a Chart to a Page."

To add data to a bubble chart:

1. Optionally, create the managed bean that will return the chart's data model.

   If you need help creating classes, see "Working with Java Code" in Developing Applications with Oracle JDeveloper. For help with managed beans, see Section 3.6, "Creating and Using Managed Beans."

2. In the Structure window, right-click dvt:typeChart and choose Go To Properties.

3. In the Properties window, expand the Data section, and enter a value for the Var field.

   The var property is the name of an EL variable that references each element in the data collection. For the bubble and scatter charts shown in Figure 23-38, the var attribute is defined as row.

4. In the Properties window, do one of the following:

   • To reference a managed bean that returns the chart's data model, expand the Common section and specify the EL expression that references the data model in the Value field.

     You can enter a static numeric value or specify an EL expression that references the managed bean and metric value.

     For example, to specify an EL expression for a managed bean named chartDataSource that includes the method referenced in Example 23-6, enter the following in the Value field: #{chartDataSource.defaultBubbleData}.

     For help with creating EL expressions, see Section 3.5.1, "How to Create an EL Expression."

   • To bind the chart to a data control, click Bind to ADF Control to select a data collection.

     For more information about using data controls to supply data to your chart, see "Creating Databound Charts" in Developing Fusion Web Applications with Oracle Application Development Framework.

5. If you specified a managed bean for the chart's data model, do the following to add a chartDataItem to the chart:

   1. In the Structure window, right-click dvt:typeChart and choose Insert Inside Chart > Facet dataStamp.

   2. To add multiple chart data items, right-click f:facet - dataStamp and choose Insert Inside Facet data Stamp > Group.

   3. Right-click f:facet - dataStamp or af:group and choose Insert Inside (Facet data Stamp or Group) > Chart Data Item.

   4. To add additional data items, right-click af:group and choose Insert Inside Group > Chart Data Item for each additional data item.

   5. Right-click dvt:chartDataItem and choose Go to Properties.

   6. Expand the Data section, and enter a value in the X field.

      To use the managed beans shown in Example 23-6 and Example 23-7, enter the following in the X field: #{row.x}.

   7. Enter a value in the Y field.

      For example, enter the following in the Y field: #{row.y}.

   8. For bubble charts, enter a value in the Z field.

      For example, enter the following in the Z field: #{row.z}.

   9. Enter a value in the Group field.

      For example, enter the following in the Group field: #{row.group}.

   10. Enter a value in the Series field.

       For example, enter the following in the Series field: #{row.series}.

   11. To customize the tooltip that is displayed when the user moves the focus to a data point, enter a value in the shortDesc field.

   12. Configure any additional properties as needed to customize the data item.

       For example, you can add a label or configure a series marker. For additional information, see Section 23.4, "Customizing Chart Display Elements."

   13. To configure additional chart data items, repeat Step 5 through Step 12 for each additional data item.

23.3.4 How to Add Data to Sparkcharts

Spark charts are simple, charts that display trends or variations, often in the column of a table, or inline with text. Line, bar, and area spark charts require a single series of data values. Example 23-7 shows an example of a line spark chart in a table column.

Figure 23-39 Line Spark Chart in Table of Stock Prices

Floating bar spark charts require two series of data values, one for the float offset, and one for the bar value. Figure 23-40 shows an example of a floating bar spark chart.

Figure 23-40 Floating Bar Spark Chart

In a simple UI-first development scenario you can insert a spark chart using the Components window and bind it to data afterwards.

You can provide data to spark charts in any of the following ways:

• Specify data statically in child dvt:sparkItem tags. Example 23-8 shows an example of providing static data to a spark chart.

  Example 23-8 Static Data in Sparkchart

• Specify data using EL Expression in child dvt:sparkItem tags.

  Example 23-9 shows an example of providing data to spark charts using EL Expressions to produce the table shown in Figure 23-39.

  Example 23-9 EL Expression Data in Sparkchart

  In this example, the spark chart's data is defined in a managed bean named sparkChart. Example 23-10 shows the managed bean. The class is defined as SparkchartSample, and the getTableData() method defines the columns for the table.

  Example 23-10 Sample Method to Define Data for a Table Containing a Sparkchart

  import java.util.ArrayList; import java.util.Arrays; import java.util.List; import java.util.Random; public class SparkchartSample { public List > getTableData() { List > list = new ArrayList >(); // Create a random number generator with a constant seed Random rand = new Random(5); String stocks[] = {"ORCL", "AAPL", "MSFT", "YHOO", "CSCO", "PALM", "GOOG", "SAP", "HPQ", "IBM", "INTC", "RIMM"}; Arrays.sort(stocks); // sort to look nice for(int i=0; i row = new ArrayList