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

Purpose

In this tutorial, you use the DVT components in Oracle ADF to build some graphical representations of data, such as Pie Charts, Gauges, Gantt charts and Geographical maps. You also explore the use of a pivot table.

Time to Complete

45 minutes

Topics

This tutorial covers the following sections:

	Overview
	Scenario
	Prerequisites
	Create a Master Detail Order Page
	Add a Pie Chart
	Add a Gauge
	Add a Geographic Map
	Create a Pivot Table
	Create a Gantt Chart
	Summary

Viewing Screenshots

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

Note: Alternatively, you can place the cursor over an individual icon in the following steps to load and view only the screenshot associated with that step. You can hide an individual screenshot by clicking it.

Overview

ADF Data Visualization components are a set of rich interactive ADF Faces components that provide significant graphical and tabular capabilities for analyzing data. After having performed the prerequisites section, this tutorial shows you how to use the ADF DVT components to graphically represent data.

Back to Topic List

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.

Back to Topic List

Prerequisites

Before starting any section of the tutorial, you should:

	Download the Required Components and Start JDeveloper 11g
	Install the Database Schema
	Upload the Startup Application
	Create a Database Connection

Back to Topic List

Downloading the Required Components and Start JDeveloper 11g

In the following steps, you download JDeveloper 11g and other files required for this tutorial.

Back to Topic

Back to Topic List

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.

Back to Topic

Back to Topic List

Uploading the Starter Application

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

Back to Topic

Back to Topic List

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.
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.	In the Application Navigator, open the Application Resources panel by clicking on it.
6.	In the Application Navigator, expand the Connections and Database nodes in the Application Resources panel to see the FOD connection you just created. You can expand the FOD node to view the database objects.

Back to Topic

Back to Topic List

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. Collapse the Model project.
2.	To test the module in the Business Component tester, in the Application Navigator, right-click FODModule and choose Run.
3.	In the Business Component Configuration dialog, click Connect. Wait for the Browser window to open.
4.	In the Business Component Browser, double-click OrdersItemsOrdersFkLink1.
5.	Use the navigation buttons to browse through the Orders
6.	Close the Business Component Browser window.
7.	Expand the ViewController project nodes. Notice the existing components that are created by default when creating a Fusion Web Application.

Back to Topic

Back to Topic List

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.
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. Click OK.
4.	The new page opens up in the Design editor.
5.	From the Component Palette, using the ADF Faces | Layout library, drag and drop a Panel Tabbed component onto the page. In the Property Inspector, using the Style | Box tab, set the Width to 100 Percent and the Height to 600 Pixel.
6.	Select the showDetailItem an in the Property Inspector using the Common tab, type MDOrders in the text field.
7.	In the Application Navigator, expand the Data Controls panel and the FODModuleDataControl node.
8.	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.
9.	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 . Click OK.
10.	In the Data Controls panel, expand the OrdersView1 node. Drag the OrderItemsView2 node onto the lower part of the form.
11.	From the Create context menu, select Tables --> ADF Read-only Table.
12.	In the Edit Table Columns dialog, select both Row Selection and Sorting. Select all the columns except the following: LineItemId, Quantity, UnitPrice, and ProductName. Click Delete . Then click OK.
13.	With the new table selected, in the Property Inspector, select the Style | Box tab, enter 100 Percent for the Width . For the Height enter 100 Pixel. Select the Common tab and type orderItemsTable as the Id.
14.	The page should look like this:
15.	Click Save All icon on the JDeveloper menu bar, or select File | Save All.
16.	Right click within the page and select Run from context.
17.	The page loads up in your browser.
18.	Experiment the Navigation buttons.
19.	Try the sorting facility on any of the detail columns.
20.	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.

Back to Topic List

Add a Pie Chart to the Page

In this section, you start adding a basic Pie chart based on warehouse information to the OrdersAndStocks page, then you use the Advanced Graph to enhance the pie chart characteristics.

	Create the Basic Pie Chart
	Convert to Advanced Graph

Back to Topic List

Creating the Basic Pie Chart

Based on the view WarehouseStockLevelsView, you add a pie 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.

Back to Topic

Back to Topic List

Converting to an Advanced Graph

Using the Convert option allows you to change the type visual element and provides additional properties to define your graphical component.

1.	Back to JDeveloper, in the Structure Pane, right click the pieChart component and select Convert from context.
2.	In the Convert Pie dialog, Select Advanced Graph, and click OK.
3.	On the Edit Graph Binding dialog, click Preview. Notice that by default the graph displayed is a Bar one.
4.	In the Preview, click the Change Graph button.
5.	Explore the various graph subtypes that exist in each graph type. Then select Pie as the type and Pie as Subtype. Click OK.
6.	Back in the Create Graph Dialog, check the Use new graph type check box. Click OK.
7.	On the Confirm Convert dialog, click OK to accept the removal warning.
8.	With the dvt:graph now selected, you can see that more properties have now been added in the Property Inspector. In the Property Inspector, using the Appearance tab, in the Line Graph section, set MarkerTooltipType to MTT_PERCENT_VAL_VALUES from the drop down list.
9.	In the Property Inspector, using the Appearance tab, in the Series section, set the SeriesRolloverBehavior to RB_HIGHLIGHT and the SeriesEffect to SE_GRADIENT.
10.	In the Property Inspector, using the Appearance tab, in the Style section, set the StylePath to Comet. (This is the property that was removed during the convert operation).
11.	To replace the percentage values that appear for each slice, right click the dvt:graph component in the Structure pane and select Insert Inside --> ADF Data Visualization From the Item list, select Slice Label and click OK.
12.	In the Property Inspector, for the Common tab, set the TextType to LD_TEXT
13.	From the Component Palette, drag and drop a Legend Area inside the graph component.
14.	In the Property Inspector, for the Common tab, set the Rendered property to false.
15.	Save you work and click the Run button to run the page.
16.	The page displays in your browser window.
17.	Move the mouse over a slice of the pie, the tooltips now display quantity and percentage for each warehouse and the Warehouse location now appears next to each slice.
18.	Select a different slice, the pie chart should display a new situation about this different product. You can experiment selecting another line item.
19.	Close the browser window.

Back to Topic

Back to Topic List

Using a Gauge for Stock Levels

Based on the same view, you add a Gauge graph reflecting the stock level in each warehouse.

1.	Back 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 tab, set the Text to StockLevels
3.	Click the StockLevels tab, then open the Data Controls accordion and select FODModuleDataControl | OrdersView1 | OrderItemsView2 | WarehouseStockLevelsView1. Drop it onto the StockLevels pane
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. Click OK.
6.	In the Property Inspector, for the table component, using the Style | Box tab, set the width to 100 percent and the Height to 600 pixels.
7.	Using the Behavior tab, set the Partial Triggers property to orderItemsTable.
8.	In the Component Palette, select the from the ADF Data Visualization, select the Gauge component and drop it onto the Quantity column.
9.	In the Structure pane, right click the outputText #{row.Quantity} and delete it.
10.	In the Structure pane, select the dvt:gauge component and in the Property Inspector set the following properties: for the Common tab set the Gauge type to STATUSMETER. Next to the Value Field select Expression Builder from the list. In the Expression Builder dialog, expand the JSP Objects | Row and select QuantityOnHand, then using the Insert into Expression button, shuttle it in the Expression pane. Click OK.
11.	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.
12.	Select the Style tab and type 100 Percent for the Width and 80 Pixel for the Height.
13.	Select the af:column above the Gauge component in the Structure pane and in the Property Inspector, for the Appearance tab set the Width to 200.
14.	In the next few steps, you add thresholds to the gauge, allowing you to specify in our example minimum and maximum stock level indicators. In the Structure pane select the gauge component and in the Component Palette click the Threshold Set component. This automatically adds the component inside the gauge.
15.	With the Threshold Set selected in the Structure pane, click three times on the Threshold component on the Component palette to add 3 thresholds inside the Threshold Set.
16.	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. In the Advanced tab set the id field to t0.
17.	Select the second Threshold component in the Structure pane. In the Property inspector set the ThresholdMaxValue to 700 which is the optimum stock level we want to have. In the Advanced tab set the id field to t1.
18.	Select the the third Threshold component in the Structure pane. In the Property inspector leave the ThresholdMaxValue empty. In the Advanced tab set the id field to t2.
19.	In the next few steps, you format the way you want the metric label and tick label to be displayed. In the Structure pane select the gauge component and in the Component Palette click the Tick Label component. This automatically adds the component inside the gauge.
20.	In the Structure pane select the tickLabel component and in the Component Palette from the ADF Data Visualization | Shared Child Tags, click the Number Format component. This automatically adds the component inside the tickLabel.
21.	In the Property Inspector, for the Number Format tag, using the Common | Scale tab, set the ScaleFactor property to SCALEFACTOR_NONE
22.	In the Structure pane select the gauge component and in the Component Palette from the ADF Data Visualization | Gauge, click the Metric Label component. This automatically adds the component inside the gauge.
23.	Using the Common tab, set the Position property for the Metric Label to LP_INSIDE_GAUGE_RIGHT.
24.	In the Structure pane select the metricLabel component and in the Component Palette from the ADF Data Visualization | Shared Child Tags, click the Number Format component. This automatically adds the component inside the metricLabel.
25.	In the Property Inspector, for the Number Format tag, using the Common | Scale tab, set the ScaleFactor property to SCALEFACTOR_NONE
26.	The Page should look like this:
27.	Click the Run button to run the Page.
28.	Use the Navigation button to select another order then select an orderItem. Click the StockLevels tab to display the corresponding stock levels with the Gauge.
29.	The stock level gauge shows how a product is doing in a warehouse regarding to the minimum alert level.
30.	You can experiment switching from the MDOrders tab to the StockLevels one using a different order.
31.	Close your Browser window.

Back to Topic List

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.	Back to 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 tab, change the Text to Location. Using the Style | Box tab set the Width to 100 Percent - the Height to 600 Pixel.
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.
5.	In the Create Geographic Map dialog, click Add to create a new Map configuration.
6.	Click the Add button next to the MapViewer URL field. Enter the following URL information: Name: MapViewer URL: http://elocation.oracle.com/mapviewer Click the Test Connection button. The connection should be successful. Click OK
7.	Repeat the previous step for the Geocoder field providing the following URL information: Name: Geocoder URL: http://elocation.oracle.com/geocoder/gcserver Click the Test Connection button. Connection should be successful. Click OK Click OK. Back on the Map Configuration dialog, click OK.
8.	On the displayed map, click the top left arrow to re center the map to north america which is the location corresponding to the query, or enter -100 as Starting X and 40 as Starting Y to focus on north America. Click Refresh. Click OK.
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.	In the Structure window, select the dvt:map component. In the Property Inspector, on the Behavior tab, set the PartialTriggers property to orderItemsTable (the id of the table).
11.	On the Appearance tab, set the MapZoom to 1.
12.	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.