ADF DVT Speed Date: Meeting the Gantt Charts

Recently the ADF Special Interest Group at AMIS organized an ADF DVT Speed Date. During this speed date, six ADF specialists from our team presented their favorite Data Visualization Component from the DVT library.
In a series of blog posts we share the information with a broader audience. In this post you get introduced to Gantt Charts – which was my own date for this party.

ADF DVT Gantt Chart – Introduction

The probably most distinguishing feature of any Gantt Chart is the horizontal time axis. Gantt Charts are used to present data against time.

Gantt Charts were invented in the 1910s by Henry Gantt (hence the name) – although a Polish engineer probably beat him to it but forgot to blog about it (http://en.wikipedia.org/wiki/Gantt_chart). They were used initially for presenting Project Schedules – showing tasks with their start time and end time and their dependencies. The essence of many modern project management tools is in fact a Gantt Chart – frequently an interactive one.

ADF DVT provides this project- and task overview in a Gantt format. Two additional Gantt Charts are provided as well:

The first additional Gantt Chart also of course has the time axis. Against this axis, the Resource Utilization chart will present bar charts that visualize metrics per time frame for some resources that are listed top to bottom. It is up to us to determine what these resources are and what the metrics are that are presented for the resources. Examples can range from equipment utilization to weather reports per weather station or consultants’ hour registrations.

The second additional Gantt Chart in the DVT library is the Resource Schedule. Is is somewhat similar to the Project Schedule, but it is more generic and can be used in many different situations. It too has the horizontal time scale and it displays a list of resources top to bottom. Resources can be anything with which time based entries can be related – from Conference Rooms to Television Channels, from Kingdoms to Family Members.

Note that the Project and Resource Schedule Gantt have support for drag and drop – which means that they are not just read only representations of the data they visualize but they can be used to manipulate that data. Project and scheduling Gantt chart components can be enabled as drag sources as well as drop targets for ADF table or tree table components. A resource utilization Gantt chart component can be enabled only as a drop target.

Component Properties

The three Gantt Charts have a lot in common. They each support click listeners and popups as well as tooltips and a context menu. The Gantt Charts support Time Line Zooming and Scrolling that allow you to zoom in and out and scroll through time. The Gantt Charts have special support to produce the chart as an XSL-FO object, that can easily be turned into PDF and several other formats as well, using for example the Apache FOP project.

You have control over the label and icon placement for the bars in the Gantt Chart as well as over the format – fill color, background image, borders – of the bars.

The Project Gantt has an impressive Legend that can be added to the display:

All DVT Gantt Charts can be created based on a Managed Bean Data Model or on a Data Binding of type TreeTable based on a ViewObject or POJO Collection. A simple drag and drop operation from the data control palette will suffice to create a Gantt Chart.

For example the Project Gantt requires a Collection Model that contains tasks. Each task needs to have a label, a start time and an end time. That is the bare minimum for creating the Gantt Chart. In addition, each task can have attributes such as the type, the actual start date and the actual end data, the percent complete and the critical-ness of the task. Tasks can have detail accessors that describe split tasks, dependent tasks, sub tasks and recurring tasks.

This Project Gantt when running looks like this:

 

The Data Model used for the other two types of Gantt Charts is a little bit different. For the Resource Utilization Chart we need a Collection Model (based on a ViewObject or POJO Collection) of Resource Records. Each Resource needs to have an accessor (child collection or ViewLink to detail ViewObject) to TimeBucket records. These TimeBucket records are the time based registrations of the metric values that the chart should visualize. In this picture, the Time Buckets are taken from a ViewLink accessor – called GanttRugTimebucketsView2 – that contain metrics Available, Setup and Used recorded for the TimeDaily timestamp:

The Data Model for the Resource Schedule is similar to this one. It uses a Collection Model of Resources. Each Resource should have a detail collection or a ViewLink Accessor (to a detail ViewObject) that produce the time slot allocations for the resource. The next picture has an example of such a data model:

 

This Gantt Chart is about the schedule for presentations at the AMIS Academy, an internal knowledge event at AMIS. The Gantt Chart looks like this:

Example

In this example you will see the creation of a Gantt Chart of type Resource Schedule to visualize the allocations of a number of consultants. The chart is based on a simple database with two tables: Consultants and Allocations. In a few rapid steps, you will create the ADF BC for these tables, a simple page with a drag and drop chart and finally a few refinements to make it even better looking.

The first step with this hands-on is to open the JDeveloper application in the zip-file ConsultantAllocationGantt_start.zip that is attached to this blog article.

This application contains two projects – Model and ViewController. In the Model project is the file Gantt_DDL.sql. This file contains the DDL statements two create the two database tables for this hands on. The file also has a number of DML statements to create the data for the tables.

Run this file against the database schema that you use for this hands-on.

Create the ADF BC components for the two tables:

· Entity Objects Consultant and Allocation.

· View Objects ConsultantsView and AllocationsView.

· An Application Module ConsultancyService

· ViewLink from ConsultantsView (source) to AllocationsView (target)

Create the page with the initial chart

Open the ViewController project. Create a new page ConsultancyPlanBoard.jspx.

Add any decorations you feel appropriate – such as a header for the page.

Drag the ConsultantsView1 collection from the Data Controls palette and drop it on the page. Select the drop option Gantt | Scheduling.

The Scheduling Gantt editor appears.

Select Name as Resource Id. Select the AllocationsView (the accessor created for the ViewLink) as the Tasks Accessor. Select the other values as shown in the screenshot.

Click on OK. This completes the initial configuration of the Gantt Chart – except for the attributes that govern the start and end date of the Gantt Chart:

Set startTime to 2013-01-01 and endTime to 2013-09-01.

At this point you can run the page and see the Gantt Chart in action.

 

Adding some refinements

Some simple refinements that you can quickly add to the Gantt Chart include tooltips and custom formats for colorful allocation types. You need to create a Java Class and configure it as managed bean. In this class, two methods are needed that return the tooltip keys (which attributes will provide values for the tooltips) and the labels associated with these values. The Gantt Chart needs to be configured with the attributes tooltipKeyLabels and tooltipKeys.

Create a class ConsultantsGanttBean in the ViewController project. Create a managed bean consultantsGanttBean in view scope in the adfc-config.xml file.

Add the following methods to this class:

public String[] getTooltipKeys() {

return new String[] {“AlloType”, “Description”,”StartDate”, “EndDate”};

}

public String[] getTooltipKeyLabels() {

return new String[] {“Allocation Type”,”Description”, “From”, “Until”};

}

Open the jspx page and select the Gantt Chart component. Add these two attributes:

tooltipKeyLabels=”#{viewScope.consultantsGanttBean.tooltipKeyLabels}”

tooltipKeys=”#{viewScope.consultantsGanttBean.tooltipKeys}”

Now you can run the page again. When the page opens, you can see the tooltips when you hover over the allocations bars with your mouse cursor.

The next refinement is the use of custom formats – for now custom colors only – for the bars in the chart.

Add a private property theGantt to the class:

private UIGantt theGantt;

and generate the accessors.

Subsequently add the following method:

public static void createNewTask(TaskbarFormatManager taskbarFormatManager,

String taskName) {

TaskbarFormat taskbarFormat = null;

if (taskName.equals(“Vakantie”)) { // magenta

taskbarFormat = new TaskbarFormat(taskName, “#FF00FF”, null, “#FF00FF”,23);

}

else if (taskName.equals(“Bank”)) { //red

taskbarFormat = new TaskbarFormat(taskName, “#FF0000”, null, “#FF0000”,23);

}

else if (taskName.equals(“Ziekte”)) { // aqua

taskbarFormat = new TaskbarFormat(taskName, “#00FFFF”, null, “#00FFFF”,23);

}

else if (taskName.equals(“Training”)) { // yellow

taskbarFormat = new TaskbarFormat(taskName, “#FFFF00”, null, “#FFFF00”,23);

}

else {

//No need to do any things

}

taskbarFormatManager.registerTaskbarFormat(taskName, taskbarFormat);

}

and add these lines to the setTheGantt method:

public void setTheGantt(UIGantt theGantt) {

this.theGantt = theGantt;

createNewTask(theGantt.getTaskbarFormatManager(), “Vakantie”);

createNewTask(theGantt.getTaskbarFormatManager(), “Ziekte”);

createNewTask(theGantt.getTaskbarFormatManager(), “Bank”);

createNewTask(theGantt.getTaskbarFormatManager(), “Training”);

}

When you run the page next, you will see different color for different types of allocations. The value of attribute associated with the Task Type – VO attribute AlloType – is matched with the taskName used for registering the custom TaskbarFormat.

 

 

Resources

Download the JDeveloper 11gR1 11.1.1.6 Start Application: ConsultantAllocationGantt_start.zip. Also download the completed application: ConsultantAllocationGantt_complete.zip.

Oracle Documentation on the Gantt Charts – http://docs.oracle.com/cd/E25178_01/web.1111/b31973/dv_gantt.htm

Live ADF Demo – http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/gantt/index.jspx

Slideshare presentation on ADF DVT Gantt Chart – http://www.slideshare.net/lucasjellema/adf-dvt-speed-dating-meeting-the-gantt-charts