What You May Need to Know About Automatic Scaling and Precision

24-28 Web User Interface Developers Guide for Oracle Application Development Framework

24.6.4.1 How to Specify the Size of a Graph at Initial Display

You can specify the initial size of a graph by setting values for attributes of the dvt:typeGraph tag. If you do not also provide for dynamic resizing of the graph, then the initial size becomes the only display size for the graph. To specify the size of a graph at its initial display: 1. In the Structure window, right-click the graph node and choose Go to Properties. 2. In the Style attributes category of the Property Inspector, enter a value for the inlineStyle attribute of the graph tag. For example: inlineStyle=width:200px;height:200px

24.6.4.2 How to Provide for Dynamic Resizing of a Graph

You must enter values in each of two attributes of the dvt:typeGraph tag to allow for a graph to resize when its container in a JSF page changes in size. The values that you specify for this capability also are useful for creating a graph component that fills an area across different browser window sizes. To allow dynamic resizing of a graph: 1. In the Structure window, right-click the graph node and choose Go to Properties. 2. In the Behavior attributes category of the Property Inspector for the DynamicResize attribute, select the value DYNAMIC_SIZE. 3. In the Style attributes category of the Property Inspector for the InlineStyle attribute, enter a fixed number of pixels or a relative percent for both width and height. 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.4.3 How to Use a Specific Style Sheet for a Graph

You have the option of selecting any of the standard styles available for the dvt:typeGraph tag. You can also specify a custom style sheet for use with a graph. To select a specific style sheet for a graph: 1. If you want to use one of the standard style sheets provided with the graph, do the following:

a. In the Structure window, right-click the graph node and choose Go to

Properties . b. In the Appearance attributes category, select the desired style sheet from the style attribute dropdown list. 2. If you want to use a custom style sheet, then set the following attributes in the Style attributes category of the Property Inspector: a. For the StyleClass attribute, select Edit from the Property menu choices, and select the CSS style class to use for this gauge. b. In the InlineStyle attribute, enter a fixed number of pixels or a relative percent for both width and height. 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.