Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table
and Gantt
Purpose
In this tutorial, you use the DVT (Data Visualization Tool) components in Oracle ADF to build some graphical
representations of data, such as Bar Charts, Gauges, Gantt charts and Geographical maps. You also explore the
use of a pivot table.
Scenario
After building a master-detail page, you will experiment with some advanced features by adding graphical data
to your application. You add new tabs to the page and use dedicated ADF DVT components. You will use a
predefined application model, which is based on ADF Business Components.
In this part, you use a JDeveloper Application to install the schema in your database and populate the FOD
schema with the corresponding data.
Locate the workspace infrastructure.jws where you've unzipped the Infrastructure.zip file.
i.e.: d:\temp\Infrastructure.
1 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Click Open. If you are prompted to migrate the project, follow the steps of the migration wizard
to proceed.
4. Set the appropriate values in the build.properties file (jdeveloper.home, and all the jdbc.* and
db.* settings). The relevant settings are:
2 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
6. In the Structure window, right-click the refreshSchema target and choose Run Target
"buildAll".
Click Continue.
The ant script will run. When it's finished, verify that the build was successful and the log
3 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
7. Next to the Infrastructure application name, click the down arrow and select Close
Application.
Before you create any component, you must first open the startup application. To do this, perform the
following steps:
You need to create a Database Connection to the FOD schema. To do this, perform the following steps:
2. In the Database Navigator, right click BrowseEditApp and select New Connection from
context.
4 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
3. Enter a name for the connection, select the connection type, and enter the username and
password. To follow along with this example, use FOD for the connection name, fod for the
username and fusion for the password.
5 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
The startup application uses Orders, OrderItems and ProductsBase entity objects and their corresponding view
objects. It also uses additional view objects that you discover when required to use them.
1. Open the Application Navigator and expand the Model project nodes. Notice the existing Entities, Views,
Links objects and the FODModule.
The model project contains all the necessary components needled for the application.
2. Right click the Model project node and select Project Properties from context.
6 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
3. In the Project Properties dialog, select the Business Components node and in the Connection field, ensure
the FOD connection that you just created is selected.
4. To test the module in the Business Component tester, in the Application Navigator, right-click FODModule
and choose Run.
7 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
8 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
The startup application uses Orders, OrderItems and ProductsBase entity objects and their corresponding view
objects. It also uses additional view objects that you discover when required to use them.
1. In the Application Navigator right click the ViewController node and select New from context.
9 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
2. In the New Gallery, click the Current Project Technologies tab, then select the Web Tier |
JSF category and select the JSF Page item.
Click OK.
3. Set the File Name field to OrdersAndStocks and use the Oracle Three Column Layout
template.
10 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Click OK.
4. From the Component Palette, using the ADF Faces | Layout library, drag and drop a Panel
Tabbed component onto the center facet.
5. Select the showDetailItem and in the Property Inspector using the Common node, type
MDOrders in the text field.
11 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
6. In the Application Navigator, expand the Data Controls accordion and the
FODModuleDataControl node.
7. Drag the OrdersView1 node onto the visual editor, and drop it onto the Page. From the Create
context menu, select Forms --> ADF Read-only Form.
8. In the Edit Form Fields dialog, check the Include Navigation Controls check box., select all the
fields except the following: OrderId, OrderDate, OrderStatusCode, OrderTotal, and
CustomerId. Then click Delete .
12 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Click OK.
9. In the Data Controls panel, expand the OrdersView1 node. Drag the OrderItemsView2 node
onto the visual editor, beneath the form.
10. From the Create context menu, select Tables --> ADF Read-only Table.
13 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
11. In the Edit Table Columns dialog, select both Single Row Selection and Sorting. Select all the
columns except the following: LineItemId, Quantity, UnitPrice, and ProductName. Click
Delete .
12. With the new table selected, in the Property Inspector, set the StyleClass property to
AFStretchWidth.
14 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
14. Click Save All icon on the JDeveloper menu bar, or select File | Save All.
15. Right click within the page and select Run from context, or click the Run button to run the
page.
15 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
At this point you have a working page, you are now going to add graphical components such as
bart chart, gauge, gantt chart, geographic info and create a Pivot Table.
In this section, you start adding a basic Bar chart based on warehouse information to the OrdersAndStocks
page, then you enhance the bar chart characteristics with more sophisticated rendering.
1. Before you create the bar chart, create a space for it.
In the Structure window, right click the panelFormLayout node and choose Surround With...
Select the panelGroupLayout component from the ADF Faces list of components
16 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
2. Drag a spacer component beneath the panelFormLayout component in the Structure window. Set the
width property to 150.
3. Expand the Model | Application Sources | oracle.fod.model and double click the
WarehouseStockLevelsView view to open it in the editor.
17 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
4. In the editor click the Query tab, to display the SQL statement. Notice that the view returns the
following columns: warehouse id, warehouse name, product id, and quantity on hand, for any
warehouseid based in the US having the product.
SELECT Warehouses.Warehouse_id,
Warehouses.Warehouse_Name,
WarehouseStockLevels.Product_Id,
WarehouseStockLevels.Quantity_On_Hand,
Addresses.Address1, Addresses.City,
Addresses.State_Province,
Addresses.POSTAL_CODE,
Addresses.Country_Id
FROM
WAREHOUSES Warehouses,
Warehouse_Stock_Levels WarehouseStockLevels,
Addresses Addresses
WHERE
Warehouses.warehouse_id = WarehouseStockLevels.warehouse_id
and Addresses.address_id = Warehouses.address_id and Addresses.Country_id='US'
18 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
5. In the editor window, click the OrdersAndStocks tab to display the page.
6. In the Data Controls panel, expand the OrdersView1 | OrderItemsView2 nodes. Select the
WarehouseStockLevelsView1 node and drop it beneath the spacer component.
19 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
7. In the Component Gallery dialog, select the Bar one as the Category and the Bar as the Graph Type,
notice that the Quick Start Layout offers various layout in each category. Select the first layout.
20 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Click OK.
Attribute Label
QuantityOnHand Quantity (type the value)
WarehouseId WarehouseName ( from the drop down list)
City City ( from the drop down list)
21 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Click OK.
9. In the Property Inspector for the dvt:barGraph component, using the Appearance group, set the
following property:
Style Comet
3D Effect true
22 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
10. In the Behavior node, next to the PartialTriggers item, select the Edit option
and from the Edit Property dialog, shuttle table* - OrdItem so that the Graph becomes synchronized
with the order item row selection.
Click OK.
11. Save your work then right click within page and select Run from context.
23 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
12. The page loads in the Browser. Notice that for each bar, the legend on the right hand side displays the
warehouse name and the city. Each bar is associated to a different color. Move the mouse over each bar
to see the tooltip label (the warehouse name, city and quantity).
Select another row in the detail table to test the synchronization process.
Click the Next button to test the synchronization of the bar chart when changing order.
In this section you enhance the bar chart adding some animation features.
1. Select the dvt:barGraph component and in the Series section, set SeriesRolloverBehavior to
RB_HIGHLIGHT.
24 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
4. Notice the animation of the bars untill reaching the final value position.
Move the mouse over a bar, notice the other bars appearing shadowed.
Based on the same view, you add a Gauge graph reflecting the stock level in each warehouse.
1. In JDeveloper, on the OrdersAndStocks.jspx page in the editor window, right click the within the
MDOrders tab and from context select Insert after Show Detail Item --> Show Detail Item.
2. In the Property Inspector, using the Common node, set the Text to StockLevels. Set the StretchChildren
property to first.
3. Click the StockLevels tab, then open the Data Controls accordion and select FODModuleDataControl
| OrdersView1 | OrderItemsView2 | WarehouseStockLevelsView1. Drop it onto the StockLevels pane
25 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
5. In the Edit Table Column dialog, select Row Selection and Sorting check boxes. Delete the following
attributes: WarehouseId, Address1, PostalCode.
26 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Click OK.
6. In the Property Inspector, set the StyleClass property for the table to AFStretchWidth
7. In the Component Palette, select the from the ADF Data Visualization, select the Gauge component and
drop it onto the QuantityOnHand column.
In the Create Gauge dialog, choose the Status Meter category and select the Horizontal Status Meter
with Thresholds.
27 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Click OK.
8. In the Structure pane, right click the outputText #{row.Quantity} and delete it.
9. In the Structure pane, select the dvt:gauge component and in the Property Inspector click the dropdown
next to the Value property.
28 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
In the Expression Builder dialog, expand the JSP Objects | Row and double click QuantityOnHand to
shuttle it in the Expression pane.
Click OK.
10. Select the Gauge Data tab and type 0 for the MinValue and 1000 to the MaxValue assuming for our
simple example that no stock level is ever greater that 1000 for a single product in a warehouse.
29 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
11. In the table component, set the ColumnStretching property to the QuantityOnHand column. You can see
the QuantityOnHand column number in the cookie crumbs links at the bottom of the visual editor.
12. In the next few steps, you use the thresholds for the gauge, allowing you to specify in our example
minimum and maximum stock level indicators.
Select the first threshold component in the Structure pane. In the Property inspector set the
ThresholdMaxValue to 30 which is the minimum stock level alert we want to set.
Select the second threshold component in the Structure pane. In the Property inspector set the
ThresholdMaxValue to 700.
14. In the Structure pane right click the tickLabel component, and select Insert inside dvt:tickLabel -->
Number Format from context.
30 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
15. In the Property Inspector, for the Number Format tag set the ScaleFactor property to
SCALEFACTOR_NONE
16. In the Structure pane select the Metric Label component. Set the Position property for the Metric Label
to LP_INSIDE_GAUGE_RIGHT.
17. In the Structure pane right click the metricLabel component, and select Insert inside dvt:metricLabel
--> Number Format from context.
31 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
18. In the Property Inspector, for the Number Format tag, using the Scale tab, set the ScaleFactor property to
SCALEFACTOR_NONE
32 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
21. Click the StockLevels tab to display the corresponding stock levels with the Gauge.
The stock level gauge shows how a product is doing in a warehouse regarding to the minimum and
maximum alert levels. Move your mouse over a gauge to display the corresponding quantity.
Working on the same view previously used for warehouses located in the US, using the spatial functionality of
Oracle, you add a map to a new tab in the existing page, indicating the geographical location of the related
warehouses.
1. In JDeveloper, in the OrdersAndStocks page, right click within the StockLevels tab and select Insert
after Show Detail Item --> Show Detail Item
2. In the Property Inspector using the Common node, change the Text to Location.
Using the Style | Box tab set the Width to 100 Percent - the Height to 600 Pixel.
33 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
3. Click the Location tab, then in the Data Controls panel, expand the OrdersView1 |
OrderItemsView2 nodes. Select the WarehouseStockLevelsView1 node and drop it on the page in
the Location tab.
4. From the Create context menu, select Geographic Map -> ADF Map and Point Theme.
34 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
5. In the Create Geographic Map dialog, click New to create a new Map configuration.
6. For the MapViewer URL field select tapViewer from the list and click the Edit button.
In the Create URL Connection dialog, enter the following URL information:
URL: http://elocation.oracle.com/mapviewer
Click the Test Connection button. The connection should be successful.
35 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Click OK
7. Repeat the previous step for the Geocoder URL field using the geo value and click Edit..
36 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
37 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Enter -100 as Starting X and 40 as Starting Y to focus on north America. Then move up the zoom
cursor to zoom by 2. Click Refresh.
Click OK.
38 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
9. The Create Map Point Theme Binding dialog comes up. For Address, pick US (street, city, state, zip)
and choose the following fields:
Street Address1
City City
State StateProvince
Zip Code PostalCode
Label WarehouseName
10. To add a toolbar to the map, allowing zooming, area selection, and other functionalities, from the
Component Palette, select the Toolbar component and drag and drop it underneath the dvt:map
component.
39 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
11. In the Create Map Toolbar dialog, select map as the map id (the name of the map component).
Click OK.
12. Click Save All icon on the JDeveloper menu bar, or select File | Save All.
13. Click the Run button to run the OrdersAndStocks.jspx page. Select an Order with an Order Item
for which the product is stored in several locations.
14. Click the Location tab to see a map indicating where the warehouses are located geographically for
this product.
40 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Move the window in the thumbnail view to select another area on the map.
41 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
16. Click the mouse pointer icon in the toolbar and then click on the red spot of your choice to pop up a
window showing the location name and the quantity.
42 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Based on the View you just created, you add a new page to the page flow diagram and then create the Pivot
Table within the new page.
1. In JDeveloper, expand the Model | Application Sources | oracle.fod.model and double click
the SalesPivotTable view to open it in the editor.
43 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
2. In the editor click the Query tab, to display the SQL statement. Notice that the view summarize
the Sales done by product category, product name and States for the US.
44 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
3. Click the OrdersAndStocks tab to open the page, right click within the Location tab and select
Insert after Show Detail Item --> Show Detail Item.
4. In the Property Inspector using the Common node, change the Text to PivotTable. Change the
StretchChildren property to first.
5. Click the Pivot Table tab, then In the Data Controls panel drag the SalesPivotTable1 data
control on the page.
45 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
6. From the Create context menu, choose Tables -> ADF Pivot Table.
7. The Create Pivot Table Binding dialog comes up. Drag Category and Product to the row edge,
State to the column edge, and Sales to the data area on the right.
46 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Click Next.
8. Click Next to accept the default labels, and click Next again to bypass drilling.
Click the Category Totals tab. Click the Add button to create a new Total. Choose/Enter the
following values:
Attribute: Product,
Function: Sum (default),
Aggregate Value Display: After,
Aggregate Value Label: Total Product.
47 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
10. Click Save All icon on the JDeveloper menu bar, or select File | Save All.
12. The OrdersAndStocks page opens up in the browser, click the PivotTable tab.
The default view for the Sales Table appears. Notice the column totals.
48 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
13. Test the Pivot functionality, for example, select the Product column and move it underneath the
State row.
14. The new Table displays product sales within each state. Notice the new totals.
15. Pick the Product row and put it back to its original location. You can experiment other
column/row moves. For example pick the product category column and move it above the
State row to display each product sold in states.
49 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Notice that you can also swap layers - e.g. swap Category with State, by dropping one layer on
top of the other.
In this section, you add a new tab to the page, for a Gantt Chart. Based on two existing views
OrderShippingSummary and OrderShippingDetails linked with a master detail relationship, you add a new tab
to the page and then create the Gantt diagram within the new page.
1. In JDeveloper, expand the Model | Application Sources | oracle.fod.model node and select the
OrderShippingSummary View Object.
2. In the Editor, click the Query tab to see the SQL statement. This query retrieves for each person
amongst all orders, the oldest order date and the most recent shipped date. The query looks like the
50 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
following:
3. Expand the Model | Application Sources | oracle.fod.model node and select the
OrderShippingDetails View Object.
4. In the Editor, click the Query tab to see the SQL statement. This query retrieves for each person all of
the orders, giving the detail information of the OrderShippingSummary. The query looks like the
following:
51 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
5. Double click the FODModule to visualize the existing relationship between OrderShippingSummary
and OrderShippingDetails .
6. Back to the OrdersAndStocks page, right click within the PivotTable tab and select Insert after Show
Detail Item --> Show Detail Item
7. In the Property Inspector using the Common node, change the Text to OrdersPlanning.
52 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
8. Click the OrdersPlanning tab, then In the Data Controls panel select OrderShippingSummary2 and
drop it onto the page.
53 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
10. In the Create Project Gantt dialog, select the PersonId from the table columns and click the delete
button . In the Tasks tab select the following values from the drop down lists:
Task Id PersonId
Task Type TaskType
Start Time OrderDate
End Time ShippedDate
These values specify that a summary task duration is created for each person, going from the earliest
ordering date up to the latest shipped date, amongst all individual orders.
11. Now we create subtasks showing for each individual order the specific duration. Click the Subtasks tab
in the dialog and select the following values from the drop down lists:
54 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
Click OK.
12. In the Property Inspector, for the Common tab change the Start Time and End Time periods to be two
months before and one month after the current date (or the date you've installed the FOD schema).
Notice that the dates indicated here won't probably match with the ones stored in your database.
55 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
15. The Gantt chart shows for each person/customer the total duration for all the orders.
56 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
16. Click on one person + icon to expand the order details and visualize the state of each individual order.
57 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
18. Notice the toolbar created by default for Gantt charts. Click the Zoom out icon and notice the
change in the legend above the tasks, substituting the column label from week to months and quarters.
58 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt
59 of 59