In various recent articles (such as Drag and Drop in ADF DVT Schedule Gantt) I have discussed the ADF DVT Gantt Chart component. And in these articles I have been describing the Gantt Charts as they were intended. However, something compels me to go beyond what was intended at the initial conception of the component. Just because I can, if for no other reason. So I am going to do just that in this article.
A Gantt Chart is basically a matrix report. The horizontal axis represents time, the vertical axis represents tasks or resources and the cells or bars positioned on this time vs. resources grid present an allocation of sorts of the resource in time. The Resource Utilization Gantt in ADF DVT is a slight variation on the theme – and it is where I got some inspiration from. It does not take time as a continuum but rather divides time in periods (days, weeks, months, quarters, years etc.) and presents for each resource its utilization per period through vertical bars.
My improvisation no the theme is to take the Scheduling Bar Chart and do something similar: present data per period, only using horizontal bars. This not only provides me with yet another way of presenting data – which is really needed – it also gives me more control over the visual appearance of the bars (length, color, label) as well as their interaction. The key to my approach is: for presenting results per period, the start date will tie a result to a period. The end date does not actually represent a real end date, however it does determine the length of the bar. So by working our way backwards from the desired length of the bar (representing a certain numerical value) we can derive the end date. So if the results are presented per year, and we need a bar that represents half of the maximum value, it end date is June 30th of the year it represents. A bar visualizing a value equal to the overall maximum value would have December 31st as its end date. The Gantt Chart will translate the end date into the length of the bar.
I am using this approach in this article to present the final results of various football (soccer for some of you) competitions in Europe. Which teams ended in the top 3 for the years 2010 through 2012. Note: the data presented here is the result of my imagination and is not anywhere near the real result! The final Gantt Chart looks like this:
Gantt Charts are easy to create – once you know how to do it. They basically require a collection of resources – in this case football competitions. Each resource requires a collection of ‘tasks’. Well, task is the assumed cell element in the Gantt Chart – but it is basically a registration of something associated with the resource at some point in time. In this case, each resource (or competition) has a collection of YearResults. A year result represents a year, a position and a team. From the year result the start date is easily derived: 1st of January in the year of the result. The end date is derived based on the position. If the position is 1 – Champion – then we want a long bar. So the end date is calculated as perhaps 1st of December. When the position is 2 – Runner Up – the bar should be a little bit shorter and therefore the end date is derived as 1st of October or the 1st of September. And for third place we will take 1st of July of the year as the date.
Model – the football data service
In order to create the Gantt Chart shown overhead, we will first create the Model, our classes and the POJO Data Control that exposes the data. The class representing each bar is YearResult. It is a simple bean with properties position, year and teamIdentifier. Based on these properties, the class will also provide methods getStartDate(), getEndDate(), getIdentifier() and getResultType(). For example, deriving the start date:
and similarly, deriving the endDate:
The result type is used to determine the color of the bars. We could have used the position property directly, but it seems nicer this way:
Note: the class representing the bars in the GanttChart – YearResult in this case – needs to have a unique identifier (in this case a concatenation of year and position. I overlooked this requirement and lost two hours at least; the exception resulting from not having a unique identifier was not very informative: NullPointerException in the SchedulingTaskbarsRenderer class.
The Resource in this case is represented by a Competition class. This class is a bean too, with two properties: the identifier (a name) and a List of YearResult objects.
Finally, I have created a simple class – FootballManager – that will create a collection of Competitions with their YearResults. This class is exposed as a Data Control:
View – Taking the Model to the User Interface
Now the Data Control is exposed, it is but a small step to realizing the Gantt Chart. Simply create a new page and drag the competitions collection from the Data Control palette to this page. Drop the collection on the page as a Gantt | Scheduling chart.
Configuring the Gantt Chart is simple enough. The Resource Id is the identifier property (of the Competition bean). The Tasks Accessor is used to indicate the collection of ‘time allocations’ of the Resources or in our case: the YearResults in the Competition. The properties of the YearResult bean are used to set the Task Id, Type, Start Time and End Time.
On the Appearance tab, the Label is specified based on the teamIdentifier property:
The binding for the Gantt Chart is created in the Page Definition and the dvt:schedulingGantt component is created in the jspx file.
We need to configure this component. We need to set the startTime and endTime attributes – to make the chart cover from early 2010 to late 2012. Ideally the label is positioned inside the bars in this case- so we set labelPlacement to innerLeft. Finally, the component will be bound to a managed bean (I will describe this bean a little bit later on) in order to set the colors based on the task type.
We also need to configure the timeAxis components. The major axis is set at the year – because I want to present results per year. Note that in different situations the results could be presented at week, month or hour level and the major axis scale would be set accordingly. The Minor axis is ideally set to the scale that is one step more fine grained than the major axis. Then this axis is made invisible by setting the rendered attribute to false.
Then let’s create the managed bean that sets the formatting styles for Gold, Silver and Bronze.
Create a class that has a property based on class UISchedulingGantt – to which the dvt:schedulingGantt is bound. Then create method createNewTask that creates and registers the custom format for a new Task Type (in our case that would be the result type which is either Gold, Silver or Bronze. The custom format can be specified in various ways. This case I will keep things simple: only specify the fill color for the bars and the same color for the outline.
Finally, the managed bean needs to be configured – based on the FootballGanttManager class and with the name footballGanttManager already used in the binding attribute’s EL expression #{viewScope.footballGanttManager.ganttChart}.
This completes the application and allows us to run it. It will report information per period using a well controlled horizontal bars based approach:
Of course we can easily make this presentation richer. We can support hovering over the bars (tool tips), interaction (click), context popup and even drag and drop to create or manipulate the data.
Resources
Download the JDeveloper 11gR1 PS5 (11.1.1.6) application with the code presented in this article: FootballResultsGantt.zip.
