Enhancing Graphs to Achieve Special Effects

Purpose

The goal of this tutorial is to show you how to modify simple graph reports by manipulating the graph XML to introduce special effects in the graphs.

Time to Complete

Approximately 1 hour

Topics

This tutorial covers the following topics:

	Overview
	Scenario
	Prerequisites
	Adding Color Gradients to a Bar Graph
	Making a Graph Transparent and Adding a Background Image
	Summary
	Related information

Viewing Screenshots

Place the cursor over this icon to load and view all the screenshots for this tutorial. (Caution: Because this action loads all screenshots simultaneously, response time may be slow depending on your Internet connection.)

Note: Alternatively, you can place the cursor over each individual icon in the following steps to load and view only the screenshot associated with that step.

Overview

In the tutorial, Creating a Graph Using the Graph Wizard, you learned that the Graph Wizard provides a great deal of functionality to enable you to easily define and customize your graph. When you create a graph using the Graph Wizard, the wizard generates an XML file to store the attributes for the graph. You can define additional graph attributes beyond the ones exposed by the Graph Wizard by editing the XML file manually. This enables you to enhance your graph by introducing special effects.

In this tutorial, you will learn how to add color gradients to a simple bar graph. You will also learn how to make a graph transparent and add a background image.

Back to Topic List

Scenario

The graphs that you will enhance in this tutorial represent product inventory for an international company. The first graph displays inventory in several warehouses. The second graph depicts the dollar value of the inventory in several of the company's worldwide locations.

Back to Topic List

Prerequisites

Before starting this tutorial, you should:

1.	Have access to or have installed Oracle Reports Developer.
2.	Have access to or installed the sample schema. This tutorial uses the OE schema included in the Oracle10g database.
3.	DownloadreportsOBE.zipand unzip into your working directory.

Back to Topic List

Adding Color Gradients to a Bar Graph

In the first part of this tutorial, you will modify a simple bar graph to include color gradients. The basic graph report is provided for you.

Back to Topic List

1.
If it is not already open, start Oracle Reports by double-clicking the Reports Builder icon on your desktop. The welcome screen displays. Select the option Open an existing report. Click OK.

If Reports Builder is already open, select File > Open from the menu.

In the Open dialog box, select Graph_Spl_Effects_1_source.rdf from your working directory.

Click Open.

The report definition opens in the Object Navigator window of Reports Builder.

2.
To see the report you are starting with, run the paper layout of the report by clicking the Run Paper Layout icon on the Reports Builder toolbar, or by selecting Program > Run Paper Layout from the menu.

You are prompted to connect to a database. In the database connect dialog box, enter OE for the User Name,OE for the Password, and the name of your database for the Database field. Click Connect.

Note: If you were previously working in this Reports Builder session using a different schema, you will have to connect to the OE schema in order to complete this tutorial.

The report displays in the Paper Design view of the Report Editor. The graph depicts the average amount of inventory for several warehouses.

3.
Examine the graph XML file. You access the graph XML file from the Property Inspector for the graph object. Every Reports Builder object has associated properties that you can view, locate, and set using the Property Inspector. The Property Inspector window contains two columns. The column on the left lists all the properties for the selected object. The column on the right displays the current values, or settings, for each property.

Open the Property Inspector for the graph object. Right-mouse-click on the graph object and select Property Inspector. As an alternative, you can select the graph object and then select Tools > Property Inspector from the menu.

4.
Locate the Graph Settings properties under the Graph category. This property contains the XML that defines the look-and-feel of the graph object in the report.

Click the Graph Settings property. A button appears to the right of the current setting for the property.

Click the button to display the Graph Settings dialog box. This window enables you to view and edit the XML that defines this graph. Resize the window so that you can view all the code.

5.
To enhance this graph, you will define color gradients for the graph bars. A color gradient is a series of progressively increasing or decreasing differences in color.

For your convenience, the XML code to achieve this effect is provided for you in the file ColorGradients.xml. Open this file from your working directory using a text editor, such as Notepad or WordPad.

Select all the code in this file by using Ctrl+A, and copy it by using Ctrl+C, or by selecting Edit > Copy from the menu.

Return your focus to the graph XML file in the Graph Settings dialog box and paste the code between the beginning <Graph> and ending </Graph> tags by using Ctrl+V.

Click OK.

Close the Property Inspector.

6.
Run the paper layout again to see the effects of the modified graph XML. The graph now displays with color gradients, that is, the color in each bar of the graph changes from a darker gray on the edges, to a lighter shade of gray in the center.

7.
Next, you will further enhance your graph such that the bars in your graph display in a different color. To achieve this, you need to define ‘exceptional risers'. Exceptional risers are data markers that do not share series attributes, e.g., series color. You define different attributes for exceptional risers so they look different than the rest of the series.

Once again, open the Property Inspector for the graph object. Right-mouse-click on the graph object and select Property Inspector. As an alternative, you can select the graph object and then select Tools > Property Inspector from the menu.

Open the Graph Settings dialog box by clicking the button in the Graph Settings property. Resize the window as necessary.

You will define the first and last bars of the graph as exceptional risers. These bars correspond to the average quantity on hand for warehouses 1 and 5, respectively. For your convenience, the XML code to do this is provided for you in the file ExceptionalRisers.xml. Open this file using a text editor, such as Notepad or WordPad.

8.
Select all the code in this file by using Ctrl+A, and copy it by using Ctrl+C, or by selecting Edit > Copy from the menu.

Return your focus to the graph XML file in the Graph Settings dialog box and paste the code after the code you added earlier in this tutorial by using Ctrl+V. Be sure you add the new code before the ending </Graph> tag.

Click OK.

Close the Property Inspector.

9.
Once again, run the paper layout to see the effects of the new code you added to the graph XML. The graph is now further enhanced with exceptional risers, as shown below.

10.
Save your report definition as SpecialEffects1_<your_initials> .rdf.

To save the report definition and not overwrite the source file for this tutorial, select File > Save As from the menu.

Enter the file name for the report definition and click Save.

Back to Topic List

Making a Graph Transparent and Adding a Background Image

Another special effects technique that you can use to enhance a graph is to make your graph transparent and display an image for the background of the graph. In this part of the tutorial, you learn how to modify the graph XML to make use of this special effects element. As with the previous example, the basic graph report is provided for you.

Back to Topic List

1.
Open the report Graph_Spl_Effects_2_source.rdf from your working directory.

The report definition opens in the Object Navigator window of Reports Builder.

2.
To see the report you are starting with, run the paper layout of the report by clicking the Run Paper Layout icon on the Reports Builder toolbar, or by selecting Program > Run Paper Layout from the menu.

The report displays in the Paper Design view of the Report Editor. The graph is a circular line graph depicting the average value of inventory for warehouses around the globe.

3.
Open the Property Inspector for the graph object. Right-mouse-click on the graph object and select Property Inspector. As an alternative, you can select the graph object and then select Tools > Property Inspector from the menu.

4.
Locate the Graph Settings properties under the Graph category. As you learned earlier in this tutorial, this property contains the XML that defines the look-and-feel of the graph object in the report.

Click the Graph Setting property. A button appears to the right of the current setting for the property.

Click the button to display the Graph Settings dialog box. This window enables you to view and edit the XML that defines this graph. Resize the window so that you can view all the code.

5.
To enhance this graph, you will add code that will render the graph transparent, and add a globe as the background image. For your convenience, the XML code to achieve this is provided for you in the file Graph_Spl_Effect_2.xml. Open this file from your working directory using a text editor, such as Notepad or WordPad.

Examine the code. Notice that the location of the background image is included in the XML code.

Make sure that the path and file name correctly identify the location of the image file, globe.gif. If necessary, modify the code to point to the correct image. For example:

6.
Select all the code in this file by using Ctrl+A, and copy it by using Ctrl+C, or by selecting Edit > Copy from the menu.

Return your focus to the graph XML file in the Graph Settings dialog box and paste the code between the beginning <Graph> and ending </Graph> tags by using Ctrl+V.

Click OK.

Close the Property Inspector.

7.
Run the paper layout of the report again to see the effects of the modified graph XML. The graph is now transparent with a background image of the globe.

8.
Save your report definition as SpecialEffects2_<your_initials> .rdf.

To save the report definition and not overwrite the source file for this tutorial, select File > Save As from the menu.

Enter the file name for the report definition and click Save.

Back to Topic List

Summary

In this lesson, you've learned how to achieve special effects by manipulating the XML code that defines a graph. Specifically, you have learned how to:

	Enhance a bar graph by adding color gradients
	Make a graph transparent and add a background image

Back to Topic List

Related Information

	To learn more about Oracle Reports 10g, refer to the additional Reports OBEs.
	Visit the OTN Web site for technical papers, presentations, frequently asked questions, demonstrations, and more.

Back to Topic List

1.	If it is not already open, start Oracle Reports by double-clicking the Reports Builder icon on your desktop. The welcome screen displays. Select the option Open an existing report. Click OK. If Reports Builder is already open, select File > Open from the menu. In the Open dialog box, select Graph_Spl_Effects_1_source.rdf from your working directory. Click Open. The report definition opens in the Object Navigator window of Reports Builder.
2.	To see the report you are starting with, run the paper layout of the report by clicking the Run Paper Layout icon on the Reports Builder toolbar, or by selecting Program > Run Paper Layout from the menu. You are prompted to connect to a database. In the database connect dialog box, enter OE for the User Name,OE for the Password, and the name of your database for the Database field. Click Connect. Note: If you were previously working in this Reports Builder session using a different schema, you will have to connect to the OE schema in order to complete this tutorial. The report displays in the Paper Design view of the Report Editor. The graph depicts the average amount of inventory for several warehouses.
3.	Examine the graph XML file. You access the graph XML file from the Property Inspector for the graph object. Every Reports Builder object has associated properties that you can view, locate, and set using the Property Inspector. The Property Inspector window contains two columns. The column on the left lists all the properties for the selected object. The column on the right displays the current values, or settings, for each property. Open the Property Inspector for the graph object. Right-mouse-click on the graph object and select Property Inspector. As an alternative, you can select the graph object and then select Tools > Property Inspector from the menu.
4.	Locate the Graph Settings properties under the Graph category. This property contains the XML that defines the look-and-feel of the graph object in the report. Click the Graph Settings property. A button appears to the right of the current setting for the property. Click the button to display the Graph Settings dialog box. This window enables you to view and edit the XML that defines this graph. Resize the window so that you can view all the code.
5.	To enhance this graph, you will define color gradients for the graph bars. A color gradient is a series of progressively increasing or decreasing differences in color. For your convenience, the XML code to achieve this effect is provided for you in the file ColorGradients.xml. Open this file from your working directory using a text editor, such as Notepad or WordPad. Select all the code in this file by using Ctrl+A, and copy it by using Ctrl+C, or by selecting Edit > Copy from the menu. Return your focus to the graph XML file in the Graph Settings dialog box and paste the code between the beginning <Graph> and ending </Graph> tags by using Ctrl+V. Click OK. Close the Property Inspector.
6.	Run the paper layout again to see the effects of the modified graph XML. The graph now displays with color gradients, that is, the color in each bar of the graph changes from a darker gray on the edges, to a lighter shade of gray in the center.
7.	Next, you will further enhance your graph such that the bars in your graph display in a different color. To achieve this, you need to define ‘exceptional risers'. Exceptional risers are data markers that do not share series attributes, e.g., series color. You define different attributes for exceptional risers so they look different than the rest of the series. Once again, open the Property Inspector for the graph object. Right-mouse-click on the graph object and select Property Inspector. As an alternative, you can select the graph object and then select Tools > Property Inspector from the menu. Open the Graph Settings dialog box by clicking the button in the Graph Settings property. Resize the window as necessary. You will define the first and last bars of the graph as exceptional risers. These bars correspond to the average quantity on hand for warehouses 1 and 5, respectively. For your convenience, the XML code to do this is provided for you in the file ExceptionalRisers.xml. Open this file using a text editor, such as Notepad or WordPad.
8.	Select all the code in this file by using Ctrl+A, and copy it by using Ctrl+C, or by selecting Edit > Copy from the menu. Return your focus to the graph XML file in the Graph Settings dialog box and paste the code after the code you added earlier in this tutorial by using Ctrl+V. Be sure you add the new code before the ending </Graph> tag. Click OK. Close the Property Inspector.
9.	Once again, run the paper layout to see the effects of the new code you added to the graph XML. The graph is now further enhanced with exceptional risers, as shown below.
10.	Save your report definition as SpecialEffects1_<your_initials> .rdf. To save the report definition and not overwrite the source file for this tutorial, select File > Save As from the menu. Enter the file name for the report definition and click Save.

1.	Open the report Graph_Spl_Effects_2_source.rdf from your working directory. The report definition opens in the Object Navigator window of Reports Builder.
2.	To see the report you are starting with, run the paper layout of the report by clicking the Run Paper Layout icon on the Reports Builder toolbar, or by selecting Program > Run Paper Layout from the menu. The report displays in the Paper Design view of the Report Editor. The graph is a circular line graph depicting the average value of inventory for warehouses around the globe.
3.	Open the Property Inspector for the graph object. Right-mouse-click on the graph object and select Property Inspector. As an alternative, you can select the graph object and then select Tools > Property Inspector from the menu.
4.	Locate the Graph Settings properties under the Graph category. As you learned earlier in this tutorial, this property contains the XML that defines the look-and-feel of the graph object in the report. Click the Graph Setting property. A button appears to the right of the current setting for the property. Click the button to display the Graph Settings dialog box. This window enables you to view and edit the XML that defines this graph. Resize the window so that you can view all the code.
5.	To enhance this graph, you will add code that will render the graph transparent, and add a globe as the background image. For your convenience, the XML code to achieve this is provided for you in the file Graph_Spl_Effect_2.xml. Open this file from your working directory using a text editor, such as Notepad or WordPad. Examine the code. Notice that the location of the background image is included in the XML code. Make sure that the path and file name correctly identify the location of the image file, globe.gif. If necessary, modify the code to point to the correct image. For example:
6.	Select all the code in this file by using Ctrl+A, and copy it by using Ctrl+C, or by selecting Edit > Copy from the menu. Return your focus to the graph XML file in the Graph Settings dialog box and paste the code between the beginning <Graph> and ending </Graph> tags by using Ctrl+V. Click OK. Close the Property Inspector.
7.	Run the paper layout of the report again to see the effects of the modified graph XML. The graph is now transparent with a background image of the globe.
8.	Save your report definition as SpecialEffects2_<your_initials> .rdf. To save the report definition and not overwrite the source file for this tutorial, select File > Save As from the menu. Enter the file name for the report definition and click Save.