How to Globally Set Graph Font Using a Skin

Using ADF Graph Components 24-29 For example, to create a graph that fills its container’s width and has a height of 200 pixels, use the following setting for the inlineStyle attribute: width:100;height:200px;

24.6.5 Changing Graph Background, Plot Area, and Title

The graph automatically provides default settings for its background and plot area based on the style it is using. You can customize these settings using child tags of the graph. The graph also provides title, subtitle, and footnote options that you can specify. By default, no text is provided for titles and footnotes. When you enter this information, you can also specify the font and font characteristics that you want to use for the text.

24.6.5.1 How to Customize the Background and Plot Area of a Graph

You can customize the following parts of graphs related to background and plot area: ■ Background: The area on which the graph is plotted. ■ Plot area: A frame in which data is plotted for all graphs other than pie graphs. Axes are displayed on at least two borders of the plot area. ■ Pie frame: A frame in which pie graphs are plotted without the use of axes. To customize the background and plot area of a graph: 1. If you want to customize the background of a graph, do the following:

a. In the Structure window, right-click the graph node and choose Insert inside

dvt:typeGraph ADF Data Visualization Background. b. Use the Property Inspector to enter colors in the attributes that you want to customize in the dvt:background tag. 2. If you want to customize the plot area of any graph other than a pie graph, do the following:

a. In the Structure window, right-click the graph node and choose Insert inside

dvt:typeGraph ADF Data Visualization Plot Area. b. Use the Property Inspector to enter colors in the attributes that you want to customize in the dvt:graphPlotArea tag. 3. If you want to customize the plot area of a pie graph, do the following:

a. In the Structure window, right-click the graph node and choose Insert inside

dvt:typeGraph ADF Data Visualization Pie Frame. b. Use the Property Inspector to enter colors in the attributes that you want to customize in the dvt:graphPieFrame tag.

24.6.5.2 How to Specify Titles and Footnotes in a Graph

You have the option of specifying a title, subtitle, and footnote for a graph. You use a separate child tag of the graph for each of these text entries. The attributes of each of Note: You can also customize the colors of the background and plot area in a graph by adding gradient special effects. For more information, see Section 24.8.2, Using Gradient Special Effects in Graphs. 24-30 Web User Interface Developers Guide for Oracle Application Development Framework these child tags let you define the horizontal alignment of the text field, the text content, and whether or not the text should be rendered. The tags for title, subtitle, and footnote support the use of a child graph font tag to let you identify the exact font characteristics to be used for each text field. To specify titles and a footnote for a graph: 1. If you want to enter a graph title, do the following:

a. In the Structure window, right-click the graph node and choose Insert inside

dvt:typeGraph ADF Data Visualization Graph Title. b. Use the Property Inspector to specify values in the attributes of the dvt:graphTitle tag. c. If you want to provide specific font characteristics for the text, then in the Structure window, right-click the dvt:graphTitle node and choose Insert inside dvt:graphTitle Font. d. Use the Property Inspector to specify values for the attributes of the dvt:graphFont tag. 2. If you want to enter a graph subtitle, do the following:

a. In the Structure window, right-click the graph node and choose Insert inside

dvt:typeGraph ADF Data Visualization Subtitle. b. Use the Property Inspector to specify values in the attributes of the dvt:graphSubtitle tag. c. If you want to provide specific font characteristics for the text, in the Structure window, right-click the dvt:graphSubtitle node and choose Insert inside dvt:graphSubtitle Font. d. Use the Property Inspector to specify values for the attributes of the dvt:graphFont tag. 3. If you want to enter a graph footnote, do the following:

a. In the Structure window, right-click the graph node and choose Insert inside

dvt:typeGraph ADF Data Visualization Footnote. b. Use the Property Inspector to specify values in the attributes of the dvt:graphFootnote tag. c. If you want to provide specific font characteristics for the text, then in the Structure window, right-click the dvt:graphFootnote node and choose Insert inside dvt:graphFootnote Font. d. Use the Property Inspector to specify values for the attributes of the dvt:graphFont tag.

24.6.6 Customizing Graph Axes and Labels

Graphs can have the following axes: ■ Ordinal axis also known as the o1-axis: The ordinal or category axis of a graph shows ordered data, such as ratings or stages, or shows nominal data, such as different cities or different products. The ordinal axis appears on bar, line, area, combination, or radar graphs. When the ordinal axis is horizontal and contains time data, it is called a time axis. Using ADF Graph Components 24-31 An example of an ordinal axis is the horizontal line across the bottom of the plot area of a vertical bar graph. The values along this axis do not identify the extent of the data shown. Instead, they identify the different groups to which the data belongs. ■ x1-axis: The x1-axis shows the values that appear along the horizontal axis in a graph. This axis has regular intervals of numbers instead of group labels. It is referred to as the x-axis. ■ y1-axis: The y1-axis is the primary y-axis. It is usually the vertical value axis along the left side of the plot area. It has regular intervals of numbers. ■ y2-axis: The y2-axis is the secondary y-axis. It is usually the vertical axis along the right side of the plot area. It has regular intervals of numbers. For each axis, there are several graph child tags that support customization. The following sections discuss the options available for various kinds of customization of an axis.

24.6.6.1 How to Specify the Title, Appearance, and Scaling of an Axis

The following graph child tags support customization of the title, and appearance of an axis: ■ Title: Specifies the text and alignment for an axis title. Includes the following tags: dvt:o1Title, dvt:x1Title, dvt:y1Title, and dvt:y2Title. An axis does not show a title unless you use the appropriate title tag. ■ Axis: Controls the color, line width, scaling, increment between tick marks, visibility of the axis, and scrolling in specific graph types. Includes the following tags: dvt:o1Axis, dvt:x1Axis, dvt:y1Axis, dvt:y2Axis. To specify the title and appearance of an x1-axis: 1. In the Structure window, right-click the graph node and choose Insert inside dvt:typeGraph ADF Data Visualization x1 Title. 2. In the Property Inspector, enter the text for the axis title and optionally specify values for other attributes of this tag.

3. If you want to specify font characteristics for the title, do the following:

a. In the Structure window, right-click the dvt:x1Title node and choose Insert

inside dvt:x1Title Font. b. In the Property Inspector, enter the desired values for the characteristics of the font.

4. Optionally, in the Structure window, right-click the graph node and choose Insert

inside dvt:typeGraph ADF Data Visualization x1 Axis. 5. In the Property Inspector, enter the desired values for the attributes of this tag. The procedure for controlling the title and appearance of any graph axis is similar to the procedure for the x-axis. However, insert the title and axis tags related to the specific axis that you want to customize. Note: Scaling attributes are not present on the dvt:o1Axis tag because the ordinal axis does not display numeric values.