During the last years, we gained a lot of experience in developing HTML5 Gantt charts. It boiled down to a generalized model for resource planning, that is now the basis of our Visual Scheduling Widget. How this model looks, I started to explain in my previous blog post, when I described the data model and its different types of objects we think are relevant to visualize resources and their activities.
In this post, I explain how to map the members of this data model to interactive graphical representations. So the second part of my series of blog posts about our generalized model for HTML5 Gantt charts refers to the concept of mapping.
#2 Our concept of mapping
Two views
Having a data model is nice, but what is needed in the end is an interactive chart that allows a user to work with that data in the most intuitive way possible. Therefore, adequate representation for all members of the data model in the form of a Gantt chart has to be found.
In practice, two types of charts have been proven to be useful and valuable:
- the Activities view and
- the Resources view
One can imagine them as the two sides of the same coin. Both present the data model from a different perspective with a different focus.
Extensions of the pure data model for interactive representations
In order to be able to specify all desired aspects of the mapping of the data model to interactive, graphical representations, we added many additional properties to each object type of the data model. These properties – marked by the prefix “pm_”, which stands for “presentation model” – can be used to control the following aspects of the presentation:
- colours of graphical elements such as bars, table rows, lines, texts, timescale, calendar grids, etc.
- collapse status of rows/groups (expanded, collapsed)
- possible interactions (whether a bar can be moved or resized, whether a row can be collapsed or not, which elements are selectable, snapping targets, etc.)
- design of expanded and of collapsed rows (whether and how child elements should be displayed)
- visualization of special properties such as constraint dates, status, symbols, etc.
Many of these properties can be set both as default values and as individual values for individual objects.
Activity view
In this view, activities are listed in the table area of the Gantt chart. In the simplest case, each activity has its own row. In the diagram area, the start and end dates of the activities are represented by bars. Resources and allocations are not of interest in this view type.
If activities are grouped, then the parent activities can be expanded:
Or the parent activity can be interactively collapsed:
Or instead of the parent, only the children are to be seen:
In any case, the concrete design for collapsed activities can be defined individually for each activity as well as globally by default settings.
Link objects are mapped to arrows between activity bars. The relation type of a link is expressed by the layout of the arrow, which can begin and end at the beginning or the end of a bar depending on the type.
Resource view
Analogous to the activities view, the resources view lists all the resources in the table area of the Gantt chart. In the diagram area, the allocations and their entries are displayed. The calendar entries for non-working times of a resource are visualized by slightly grayed vertical strips.
There are multiple designs for visualizing allocations:
- An allocation can be represented by a single bar:
- If it has more than only one entry, then each entry can be displayed as a separate bar:
- Or the entries are shown together with the allocation itself:
For displaying curves there is a curve area inside each resource row, which can be interactively expanded and collapsed.
A curve object is displayed as a stepped line, possibly with the coloured area below the line. Each curve entry defines a data point of that stepped line.
With stacked curves, not only the stack as a whole is visible but also the single members of the curve stack.
The following figure shows two curve objects, each of them representing the load of a resource caused by an allocation. They are stacked on top of each other and visually distinguishable by two colours. An additional curve object defines the capacity of the resources and is displayed by a line. The area where the stacked curve exceeds the capacity line is highlighted by hatching:
Of course, this is only one possible sample for the use of curves. A lot of further applications for curves are conceivable and you can use curves to express any other semantics.
Last but not least, there is an additional view type – the load view – that is a derivate of the resource view with the curve diagram areas only and without any bars. It is a valuable tool when only the capacities and loads of the resources are of interest, but not the allocations in detail.
Entities table
The entities objects are displayed in a special table – the entities table – that can be displayed on the right side of the Gantt chart.
Find out more about NETRONIC and how it can help your business succeed, or contact allonline365 on +27 (21) 205 3650 or info@allonline365.com.
Resource Credit | NETRONIC