Customizing Scatter Graph Series Markers

Using ADF Graph Components 24-43 ■ Graph background: Use the dvt:background tag. ■ Graph plot area: Use the dvt:graphPlotArea tag. ■ Graph pie frame: Use the dvt:graphPieFrame tag. ■ Legend area: Use the dvt:legendArea tag. ■ Series: Use the dvt:series tag. ■ Time selector: Use the dvt:timeSelector tag. ■ Reference area: Use the dvt:referenceObject tag. The approach that you use to define gradient special effects is identical for each part of the graph that supports these effects.

24.8.2.1 How to Add Gradient Special Effects to a Graph

For each subcomponent of a graph to which you want to add special effects, you must insert a dvt:specialEffects tag as a child tag of the subcomponent. For example, if you want to add a gradient to the background of a graph, then you would create one dvt:specialEffects tag that is a child of the dvt:background tag. Then, optionally if you want to control the rate of change for the fill color of the subcomponent, you would insert as many dvt:gradientStopStyle tags as you need to control the color and rate of change for the fill color of the component. These dvt:gradientStopStyle tags then must be inserted as child tags of the single dvt:specialEffects tag. To add a gradient special effect to the background of a graph: 1. In the Structure window, right-click the dvt:background node that is a child of the graph node, then choose Insert inside dvt:background, then Special Effects.

2. Use the Property Inspector to enter values for the attributes of the

dvt:specialEffects tag:

a. For fillType attribute, choose FT_GRADIENT.

For gradientDirection attribute, select the direction of change that you want to use for the gradient fill.

b. For numStops attribute, enter the number of stops to use for the gradient.

3. Optionally, in the Structure window, right-click the dvt:specialEffects node

and choose Insert within dvt:specialEffects dvt:gradientStopStyle if you want to control the color and rate of change for each gradient stop.

4. Use the Property Inspector to enter values for the attributes of the

dvt:gradientStopStyle tag:

a. For the stopIndex attribute, enter a zero-based integer as an index within the

dvt:gradientStopStyle tags that are included within the specialEffects tag. Note: By default, a graph’s series gradient is set in the seriesEffect attribute with a value of SE_AUTO_GRADIENT to make the data markers appear smoother and apply graphic antialiasing. You must set the attribute to SE_NONE in order to specify a custom series gradient. 24-44 Web User Interface Developers Guide for Oracle Application Development Framework b. For the gradientStopColor attribute, enter the color that you want to use at this specific point along the gradient. c. For the gradientStopPosition attribute, enter the proportional distance along a gradient for the identified stop color. The gradient is scaled from 0 to 100. If 0 or 100 is not specified, default positions are used for those points. 5. Repeat Step 3 and Step 4 for each gradient stop that you want to specify.

24.8.2.2 What Happens When You Add a Gradient Special Effect to a Graph

Example 24–10 shows the XML code that is generated when you add a gradient fill to the background of a graph and specify two stops. Example 24–10 XML Code Generated for Adding a Gradient to the Background of a Graph dvt:graph dvt:background borderColor=848284 dvt:specialEffects fillType=FT_GRADIENT gradientDirection=GD_RADIAL gradientNumStops=2 dvt:gradientStopStyle stopIndex=0 gradientStopPosition=60 gradientStopColor=FFFFCC dvt:gradientStopStyle stopIndex=1 gradientStopPosition=90 gradientStopColor=FFFF99 dvt:specialEffects dvt:background dvt:graph

24.8.3 Specifying Transparent Colors for Parts of a Graph

You can specify that various parts of a graph show transparent colors by setting the borderTransparent and fillTransparent attributes on the graph child tags related to these parts of the graph. The following list identifies the parts of the graph that support transparency: ■ Graph background: Use the dvt:background tag. By default the fillTransparent attribute is set to true. ■ Graph legend area: Use the dvt:legendArea tag. ■ Graph pie frame: Use the dvt:graphPieFrame tag. ■ Graph plot area: Use the dvt:graphPlotArea tag.

24.8.4 Providing Interactive Capability for Graphs

You can add a number of interactive functions to graphs including: ■ Marker and legend dimming Markers include lines, bars, areas, scatter markers, bubbles, and pie slices. ■ Zooming and scrolling ■ Changing zoom and scroll levels

24.8.4.1 How to Provide Marker and Legend Dimming

You can force all the data markers for a given set of data to be highlighted when you move the cursor over one data marker in the set or over the corresponding entry in the graph legend. The highlighting effect is visually achieved by dimming the other data markers in the set. For example, if a bar graph displays sales by month for four