Gantt Best Practice: Visualize Working Times in a Bar

Posted by Ulrich Kuck on Dec 18, 2014 11:11:00 AM

Sometimes a planner is not only interested in the timing and duration of an operation but he also wants to see the number of work packages needed by a resource to complete an operation. Our Gantt component VARCHART XGantt allows visualizing the individual working times of a resource in the operation bar in an optical appealing way. Read the following blog post to learn how this works.

Use case / scenario

An operation bar stretching over a certain persiod (e.g. several days) is usually based on two different time spans:

a) Duration of the operation, i.e. the time span from its beginning to its end, no matter which working calendar is currently valid.

b) Work effort, that means the real working time spent on the operation. This figure usually is smaller than the duration, since not every operation will be worked on continuously (7 days/week,  24 h/day).

So the developer of Gantt charts faces a visual dilemma: Is he to focus on a) the total duration of an operation or b) the visualization of the concrete work effort.


The trick: Combining different layers

Displaying an operation with the single work packages, i.e. the individual working times, can be realized by a combination of different layers to be selected in VARCHART XGantt. The underlying thought in this is to visually stack bars. For this, a continuous bright layer (total duration) has to be defined and an interrupted dark layer (working times) be placed over it. As a consequence, the brighter background color will shine through during work-free periods

The bar now shows both the individual working time of the resource and the total duration of the operation it is currently working off.

Gantt chart bar with timing, duration & individual working times


Realization in VARCHART XGantt

The following tools of our component are used:
  • Combination of different layers that are moved by vertical offsets
  • Mapping colors by field contents (background, foreground, line color) and two color mapping tables
  • Display of workfree periods in the bar (can also be set individually by INI file)

4 or 5 single layers are needed, depending on whether logical links are to be shown as well.

Basically, the following applies:

  • All layers use the default start and end data field of the operation.
  • There’s a mapping table with the (brighter) background colors and an anlogue one with more intense colors for the working time and the boundary lines.
  • The global switch “Layers with nonWork interval” is ticked on, being ticked off (by INI-switch) for all layers except “Below (working time)”:

    [Layer_1]  |  Name=Top                              |  NonWorkIntervalShape=VC_NIL
    [Layer_2]  |  Name=Below (background)       |  NonWorkIntervalShape=VC_NIL
    [Layer_3]  |  Name=Below (working time)      |  NonWorkIntervalShape=VC_INVISIBLE
    [Layer_4]  |  Name=Below (frame)                |  NonWorkIntervalShape=VC_NIL
    [Layer_5]  |  Name=Imaginary middle           |  NonWorkIntervalShape=VC_NIL


Gantt Chart that visualizes working times in a bar

Detailed description of the layers used

The “Specify Bar Appearance” dialog of the Gantt component VARCHART XGantt lets you define different layers. On the property page “Objects” click “Layers” to open the below dialog:



Five layers need to be defined for visualizing the operation bars with individual working times:

1) “Top”
Purpose: Shows the upper half of the bar, displaying the operation text on mapped background color.
  • Height 2mm, moved upward by 1 mm
  • Mapped layer color (brighter background)
  • Mapped line color (darker foreground)
  • Labeling

2) “Below (Background)”
Purpose: Causes a brighter background to be shown in the lower part of the bar.
  • Rectangle layer
  • Height 2mm, moved downward by 1 mm
  • Mapped layer color (brighter background)
  • No line type>

3) “Below (working time)”
Purpose: Effects bar sections with more intense colors = working times.
  • Rectangle layer
  • Height 2mm, moved downward by 1 mm
  • Layer color mapped here to darker foreground color
  • No line type

4) “Below (frame)”
Purpose: Draws a frame around all bars that matches in color.
  • Rectangle layer
  • Height 2mm, moved downward by 1 mm
  • Layer color fully transparent
  • Line color mapped (darker foreground)

5) “Imaginary middle”
Purpose: Only needed if links are to be defined. Links will be tied to this layer and thus will be centered vertically.
  • Line layers
  • (Virtual) height 4 mm, not moved vertically
  • Line color mapped (darker foreground)


Did this blog post help you solving a problem you face in every day scheduling? Do want to get more Gantt Best Practice tips on how to make your Gantt chart more effecitve? Then read our blog post How to integrate a shift calendar in the time scale.

Not yet using VARCHART XGantt? Get started with your trial today:

VARCHART XGantt free trial - Gantt chart control .NET

Topics: Windows Forms Gantt Control, XGantt development tricks, Gantt Best Practice, Gantt Chart Controls