Timeline Plot Elements

Overview

Timeline Plot - is an are where Gantt Chart itself is displayed. Besides tasks, periods and connectors this area can contain several decorative elements and several functional.

This illustration highlight almost all major timeline plot elements, and this tutorial will describe how each element is configured:

to top

Days Off and Non Working Time Coloring

AnyGantt allows to show days off and non-working time. Both days and time should be defined in a project calender - see Calendar tutorial for more.

In this section questions of this areas coloring is covered.

Days Off

By default non working days coloring is turned off, to enable it you should set the following:

<anygantt>
  
<timeline>
    
<plot>
      
<non_working_days show="true" />
    
</plot>
  
</timeline>
</anygantt>

When coloring is enabled all days off are colored. You can change this coloring, which can be either solid or gradient. Sample XML shows how this color is configured:

<anygantt>
  
<timeline>
    
<plot>
      
<non_working_days show="true">
        
<fill enabled="true" type="Solid" color="#FF0000" opacity="0.3" />
      
</non_working_days>
    
</plot>
  
</timeline>
</anygantt>

See details about fill in XML Reference.

to top

Non Working Time

Non Working Time coloring is turned off by default too. To turn it on set:

<anygantt>
  
<timeline>
    
<plot>
      
<non_working_hours show="true" />
    
</plot>
  
</timeline>
</anygantt>

When coloring is enabled all non working hours are colored. You can change this coloring, which can be either solid or gradient. Sample XML shows how this color is configured:

<anygantt>
  
<timeline>
    
<plot>
      
<non_working_hours show="true">
        
<fill enabled="true" type="Solid" color="#00FF00" opacity="0.3" />
      
</non_working_hours>
    
</plot>
  
</timeline>
</anygantt>

See details about fill in XML Reference.

to top

Project Start/End Marker, Today Marker

There are three special markers on timeline plot:

All these markers are lines drawn vertically through all plot, they have similar settings and have both automatic (date and time is calculated automatically) and manual (set date and time in XML) modes.

XML Below shows how to enable all three markers. Each marker is defined in appropriate node: <project_start>, <project_end> and <current_time>:

<anygantt>
  
<timeline>
    
<plot>
      
<project_start show="true" mode="Auto">
        
<line enabled="true" color="DarkRed" thickness="2" />
      
</project_start>
      
<project_end show="true" mode="Auto">
        
<line enabled="true" color="DarkRed" thickness="2" />
      
</project_end>
      
<current_time show="true" mode="Auto">
        
<line enabled="true" color="Green" thickness="2" />
      
</current_time>
    
</plot>
  
</timeline>
</anygantt>

As you can see configurattion is all the same, only node names are different. To enable markers show attribute is set to True. Position for all markers are calculated autmatically, with Auto mode set in mode attribute.

Automatic mode calculates the position in a following way:

Live sample for all three markers in automatic mode:

Time-Line-Plot-Auto-Markers - Click to see Live Chart Preview
Time-Line-Plot-Auto-Markers - Click to see Live Chart Preview

As you can see start and end project markers are shown as they should, and current date marker is shown on the right side of the time plot - it happend because your PC local time doesn't fit into project time span. Please make sure that automatic mode is what you need before using it.

To set the positions of all markers manually choose Custom mode. XML below shows how all markers can be placed to the certain position:

<anygantt>
  
<timeline>
    
<plot>
      
<project_start show="true" mode="Custom" date="2008.07.01 00:00">
        
<line enabled="true" color="DarkRed" thickness="2" />
      
</project_start>
      
<project_end show="true" mode="Custom" date="2008.07.20 00:00">
        
<line enabled="true" color="DarkRed" thickness="2" />
      
</project_end>
      
<current_time show="true" mode="Custom" date="2008.07.13 16:45">
        
<line enabled="true" color="Green" thickness="2" />
      
</current_time>
    
</plot>
  
</timeline>
</anygantt>

As you can see - all you need to do is to set mode to "Custom" and set desired date and time in date attribute.

In custom mode you can place markers to any position on the time plot and use them in any way, for example to show critical deadlines or other.

Here is a live sample with markers set manually:

Time-Line-Plot-Manual-Markers - Click to see Live Chart Preview
Time-Line-Plot-Manual-Markers - Click to see Live Chart Preview

to top

Row Height and Bars Height

By default AnyGantt uses relatively small row height to display tasks and resource, you can tune this if you'd like to use a larger font or place more detailed labels in the plot, or make a Gantt chart more accessible.

There are several options that allow you to manipulate row height and tasks or periods height:

<anygantt>
  
<timeline>
    
<plot line_height="60" item_height="40" item_padding="10" />
  
</timeline>
</anygantt>

All these options are set in <plot> node:

Attribute Description
line_height Sets the row height in pixels, it is used both in data grid and on time line plot.
item_height Sets the height in pixels of the task or period displayed on the time plot.
item_padding Sets the padding between the bar and the borders of the roe.

Sample chart that has these parameters tuned:

Time-Line-Plot-Row-Height - Click to see Live Chart Preview
Time-Line-Plot-Row-Height - Click to see Live Chart Preview

to top

Horizontal Grid

Horizontal grid is intended to allow user to see easily the correspondense between task names (resource names) in grid and task bars (resource periods) on the plot.

Horizontal Grid consists of two elements:

Here is a sample configuration XML:

<anygantt>
  
<timeline>
    
<plot>
      
<grid>
        
<horizontal>
          
<line enabled="true" color="DarkSeaGreen" thickness="1" />
          
<even>
            
<fill enabled="true" color="DarkSeaGreen" opacity="0.2" />
          
</even>
          
<odd>
            
<fill enabled="true" color="White" opacity="1" />
          
</odd>
        
</horizontal>
      
</grid>
    
</plot>
  
</timeline>
</anygantt>

Rows Separator Lines are configured in <line> node, and interlaced fill in configured in <even> and <odd> nodes with a help of <fill> node .

Take a look at the live sample with tuned Horizontal Grid:

Time-Line-Plot-Horizontal-Grid - Click to see Live Chart Preview
Time-Line-Plot-Horizontal-Grid - Click to see Live Chart Preview

You can disable any element in the grid by setting enabled to False where needed. Here is a sample that turns off all elements of the grid:

<anygantt>
  
<timeline>
    
<plot>
      
<grid>
        
<horizontal>
          
<line enabled="false" />
          
<even>
            
<fill enabled="false" />
          
</even>
          
<odd>
            
<fill enabled="false" />
          
</odd>
        
</horizontal>
      
</grid>
    
</plot>
  
</timeline>
</anygantt>

This section doesn't cover all configuration options available for line and fill, please see XML Reference for the details.

Please note that Plot Grid Settings DO NOT affect Data Grid rows. See Data Grid tutorials to learn about data grid rows.

to top

Vertical Grid

Vertical Grid, just as Horizontal one, is used to imrpve reability of the chart. Vertical grid divides Major Units of the time scale (the top line in time scale).

Vertical Grid consists of two elements:

Here is a sample that shows these elements configuration :

<anygantt>
  
<timeline>
    
<plot>
      
<grid>
        
<vertical>
          
<line enabled="true" color="DarkSeaGreen" thickness="1" />
          
<even>
            
<fill enabled="true" color="DarkSeaGreen" opacity="0.2" />
          
</even>
          
<odd>
            
<fill enabled="true" color="White" opacity="1" />
          
</odd>
        
</vertical>
      
</grid>
    
</plot>
  
</timeline>
</anygantt>

Separator Lines are configured in <line> node, and interlaced fill - in <even> and <odd> nodes with a help of <fill>.

Here is a sample of configured Vertical Grid. Pleae note that Horizontal Grid always Overlays Vertical. That is why it horizontal grid if turned off in this sample:

Time-Line-Plot-Vertical-Grid - Click to see Live Chart Preview
Time-Line-Plot-Vertical-Grid - Click to see Live Chart Preview

You can disable any element in the grid by setting enabled to False where needed. Here is a sample that turns off all elements of the grid:

<anygantt>
  
<timeline>
    
<plot>
      
<grid>
        
<vertical>
          
<line enabled="false" />
          
<even>
            
<fill enabled="false" />
          
</even>
          
<odd>
            
<fill enabled="false" />
          
</odd>
        
</vertical>
      
</grid>
    
</plot>
  
</timeline>
</anygantt>

This section doesn't cover all configuration options available for line and fill, please see XML Reference for the details.

to top

Background and Border

Time Plot has its own fill and border, but by default interlaced fill of horizontal grid is turned on and you can't see plot fill. If you turn off grid fill - you can use plot fill.

Fill and borders of time plot is configured in <background> subnode of <plot> node. XML below shows how to create an crazy eye-dusturbing gradient fill with a thick border:

<anygantt>
  
<timeline>
    
<plot>
      
<background>
        
<fill enabled="true" type="Gradient">
          
<gradient angle="45">
            
<key color="LightOrange" />
            
<key color="White" />
          
</gradient>
        
</fill>
        
<border enabled="true" color="Green" thickness="2" />
      
</background>
    
</plot>
  
</timeline>
</anygantt>

Live sample below shows the settings in work:

Time-Line-Plot-Background - Click to see Live Chart Preview
Time-Line-Plot-Background - Click to see Live Chart Preview

to top