Está en la página 1de 59

Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt

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.

Installing the Database Schema

In this part, you use a JDeveloper Application to install the schema in your database and populate the FOD
schema with the corresponding data.

1. Download and extract Infrastructure.zip and BrowseEditApp.zip to your file system


2. Click the Open Application link or from the tool menu, choose File | Open.

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.

3. In the Application Navigator, expand the MasterBuildScript | Resources nodes and


double-click build.properties to open it in the editor.

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

jdeveloper.home Location where you have installed JDeveloper, i.e. c:/middleware/jdeveloper


jdbc.urlBase Base URI for your database, i.e., jdbc:oracle:thin:@localhost
jdbc.port Port number for your database, i.e. , 1521
jdbc.sid Database instance name, i.e. ,XE or ORCL

5. In the MasterBuildScript project, select the build.xml file.

6. In the Structure window, right-click the refreshSchema target and choose Run Target
"buildAll".

When prompted enter the database system user password.

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

window doesn't report any major (red) error.

7. Next to the Infrastructure application name, click the down arrow and select Close
Application.

Uploading the Starter Application

Before you create any component, you must first open the startup application. To do this, perform the
following steps:

1. From the Application Navigator, click the Open Application link.


2. Locate the workspace BrowseEditApp.jws where you've unzipped the BrowseEditApp.zip file. i.e.:
d:\temp\Infrastructure.
3. The Application is loaded up in JDeveloper.

Creating a Database Connection

You need to create a Database Connection to the FOD schema. To do this, perform the following steps:

1. From the Menu Bar, select View | Database Navigator.

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.

4. Click Test Connection to confirm that you can connect.

Click OK if the connection was successful.

5 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt

Exploring the Startup Application

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

Wait for the Browser window to open.

5. In the Business Component Browser, double-click OrdersItemsOrdersFkLink1.

8 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt

6. Use the navigation buttons to browse through the Orders

7. Close the Business Component Browser window.

Creating the Master Detail Order Page

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 .

Then click OK.

12. With the new table selected, in the Property Inspector, set the StyleClass property to
AFStretchWidth.

Set the ColumnStretching property to last.

14 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt

Set the Id of the table to OrdItem


13. The page should look like this:

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

16. The page loads up in your browser.

17. Close the browser window.

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.

Add a Bar Chart to the Page

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.

Creating the Basic Bar Chart


Based on the view WarehouseStockLevelsView, you add a bar chart to the MDOrders tab in the
OrdersAndStocks page to render for each product of a given order the corresponding stock level in each
warehouse location. The WarehouseStockLevelsView view is linked to the OrderItemsView via the productId
attribute.

1. Before you create the bar chart, create a space for it.

Set the AutoHeightRows property of the Order Items table to 3.

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

Set the panelGroupLayout layout property to horizontal.

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

From the Create context menu, select Graphs.

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.

8. In the Create Bar Graph dialog, specify the following values:


- Bars : click Add and select QuantityOnHand from the Available list.
- X Axis: click Add and select WarehouseId from the drop down list.
- X Axis: click Add and select City from the drop down list.

In the Attribute Labels section:

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 the Swap Bars with X Axis button.

Click OK.

9. In the Property Inspector for the dvt:barGraph component, using the Appearance group, set the
following property:

Style Comet

set the 3D Effect property to true.

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.

Refining the Basic Bar Chart.

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.

2. In the Animation section, set the AnimationOnDataChange and AnimationOnDisplay


properties to auto.

3. Refresh the page in the browser.

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.

Select a warehouse name in the legend part to highlight another bar.

Click the Next button to change order.

Using a Gauge for Stock Levels

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

4. Select Tables --> ADF Read-only Table.

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.

In the Structure pane expand the gauge | ThresholdSet component.

13. Notice that 3 thresholds exist inside the Threshold Set.

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

19.. The Page should look like this:

32 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt

20. Click the Run button to run the Page.

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.

Creating a Geographic Map

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..

Provide the following URL information:URL: http://elocation.oracle.com/geocoder/gcserver


Click the Test Connection button. Connection should be successful.

36 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt

Click OK. Back on the Map Configuration dialog, click OK.

8. The world map displays.

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

Under Point Data specify:

Data Quantity on Hand


Label Quantity

Click OK to insert the map.

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.

15. Close the thumbnail window.

41 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt

Click within the map to zoom in.

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

Create a Pivot Table

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.

SELECT category_translations.CATEGORY_NAME as "Category",


products_base.product_name as "Product", addresses.state_province
as "State", sum(order_items.QUANTITY * order_items.UNIT_PRICE) as
"Sales"
FROM products_base, product_categories_base,
category_translations, orders, order_items, addresses
WHERE products_base.product_id = order_items.product_id and
products_base.CATEGORY_ID = product_categories_base.CATEGORY_ID
and product_categories_base.CATEGORY_ID =
category_translations.CATEGORY_ID and orders.SHIP_TO_ADDRESS_ID =
addresses.ADDRESS_ID and orders.order_id = order_items.ORDER_ID
and addresses.COUNTRY_ID = 'US'
GROUP BY category_translations.CATEGORY_NAME,
products_base.product_name, addresses.state_province order by
category_translations.CATEGORY_NAME, products_base.product_name

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.

9. Click Next twice to preview the design.

47 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt

Click Finish to insert a PivotTable into the page.

10. Click Save All icon on the JDeveloper menu bar, or select File | Save All.

11. Click the Run button to run the page.

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.

Create a Gantt Chart

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:

SELECT persons.PERSON_ID, persons.FIRST_NAME as "First Name",


persons.LAST_NAME as "Last Name", min(orders.ORDER_DATE) as "Order
Date",
max(orders.ORDER_SHIPPED_DATE) as "Shipped Date", concat('Summary', '')
as "Task Type"
FROM orders, persons
WHERE orders.CUSTOMER_ID = persons.PERSON_ID
group by persons.person_id, persons.FIRST_NAME, persons.last_name

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:

SELECT persons.PERSON_ID, orders.ORDER_ID, orders.ORDER_DATE as "Order


Date", orders.ORDER_SHIPPED_DATE as "Shipped Date", persons.FIRST_NAME
as "First Name", persons.LAST_NAME as "Last Name", concat('Normal', '')
as "Task Type"

51 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt

FROM orders, persons


WHERE orders.CUSTOMER_ID = persons.PERSON_ID

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

Add a panelGroupLayout component within the showDetailItem.

Set the Layout property to scroll.

8. Click the OrdersPlanning tab, then In the Data Controls panel select OrderShippingSummary2 and
drop it onto the page.

9. From the dynamic menu select Gantt --> Project

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:

Subtasks Accessor OrderShippingDetails


Sub Task Id OrderId
Sub Task Type TaskType
Start Time OrderDate
End Time ShippedDate

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.

Your page should look like the following:

55 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt

13. Click the Run button to run the page.

14. The page loads up in the browser

Click the OrdersPlanning tab.

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.

17. Enlarge the left pane to view more columns.

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.

19. In the Menu click the View | Time Scale.

You can choose the unit for the timing scale.

58 of 59
Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt

59 of 59

También podría gustarte