Period Style

Overview

Period Style - is a special style used to tune periods display in Resource Chart. Period Style allows to configure how period bar looks like, its labels and tooltip that is shown on hover.

to top

Style Application

There are two options for style application: you can create reusable predefined style and then apply it to a period (each style has the unique id), or in-line in period node. Below you will find out what are pros and cons of each method.

Reusable Style

Reusable styles give you an opportunity to describe how period should be displayed only once and then apply it when needed.

To define and apply style you should use XML as shown:

<anygantt>
  
<styles>
    
<period_styles>
      
<period_style name="sampleStyle">
        
<bar_style>
          
<middle shape="Full">
            
<fill enabled="true" type="Solid" color="#DEDEDE" />
            
<border enabled="true" color="#656565" />
          
</middle>
        
</bar_style>
      
</period_style>
    
</period_styles>
  
</styles>
  
<resource_chart>
    
<resources>
      
<resource id="res_1" name="Resource 1" />
    
</resources>
    
<periods>
      
<period resource_id="res_1" start="2008.01.13" end="2008.04.25" style="sampleStyle" />
      
<period resource_id="res_1" start="2008.06.01" end="2008.11.29" style="sampleStyle" />
    
</periods>
  
</resource_chart>
</anygantt>

As you can see, once the style is defined in <period_styles> with certain id, you can apply it to the period using style attribute: <period style="sampleStyle"/>

to top

In-Line Style

If you need to change some setting for one period only, you can avoid creation of the new style and configure period visualization in-line.

Here is a sample how style can be defined in-line:

<anygantt>
  
<resource_chart>
    
<resources>
      
<resource id="res_1" name="Resource 1" />
    
</resources>
    
<periods>
      
<period resource_id="res_1" start="2008.01.13" end="2008.04.25">
        
<style>
          
<bar_style>
            
<middle shape="Full">
              
<fill enabled="true" type="Solid" color="#DEDEDE" />
              
<border enabled="true" color="#656565" />
            
</middle>
          
</bar_style>
        
</style>
      
</period>
      
<period resource_id="res_1" start="2008.06.01" end="2008.11.29" style="sampleStyle" />
    
</periods>
  
</resource_chart>
</anygantt>

As you can see we have <style> node within<period> node, syntax is the same for reusable and in-line style.

to top

Setting Global Default Style

You can define named style and apply it to all elements, but this may be inconvenient when there are a lot of elements, for example periods in a project.

AnyGantt allows you to set defaults for basic styles using defaults section. See Default Styles for more.

to top

Visual Settings

To tune how period looks like on the plot Bar Style is used, it contains shape, fill, border settings along with marker and label settings.

Basic XML sample for border and fill modification:

<period_style name="sampleStyle">
  
<bar_style>
    
<labels>
      
<label>
        
<text>{%Name}</text>
        
<font color="Black" />
      
</label>
    
</labels>
    
<middle shape="Full">
      
<fill enabled="true" type="Solid" color="DarkSeaGreen" />
      
<border enabled="true" color="#656565" />
    
</middle>
  
</bar_style>
</period_style>

Live sample of period bar style tuning:

Period-Style-Visual-Settings - Click to see Live Chart Preview
Period-Style-Visual-Settings - Click to see Live Chart Preview

To learn more about configuration like that - please refer to Bar Style Tutorial.

to top

Tooltip Settings

Using Period Style you can override default tooltip.

XML syntax:

<period_style name="sampleStyle">
  
<tooltip enabled="true">
    
<text>{%Name} - CRITICAL</text>
    
<font face="Tahoma" size="10" bold="false" italic="false" />
    
<border enabled="true" type="Solid" color="DarkRed" thickness="2" />
    
<fill enabled="true" type="Solid" color="#FFFFFF" opacity="0.8" />
    
<margin left="10" right="10" top="5" bottom="5" />
  
</tooltip>
</period_style>

This XML shows only the basic settings, to learn more please see XML Reference.

In this sample each period has its own style that changes tooltip :

Period-Style-Tooltip - Click to see Live Chart Preview
Period-Style-Tooltip - Click to see Live Chart Preview

Full listng of default period style XML

coming soon

to top