Connector Style

Overview

Connector Style is a style used to tune how task connectors look like. Connector Style has no functional settings - just line color, thickness and opacity.

to top

Style Application

There are two options for style application: you can create reusable predefined style and then apply it to a connector (each style has the unique id), or in-line in connector 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 connector should be displayed only once and then apply it when needed.

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

<anygantt>
  
<styles>
    
<connector_styles>
      
<connector_style name="critical">
        
<line enabled="true" type="Solid" color="DarkRed" thickness="1" />
      
</connector_style>
      
<connector_style name="normal">
        
<line enabled="true" type="Solid" color="Green" thickness="1" />
      
</connector_style>
    
</connector_styles>
  
</styles>
  
<project_chart>
    
<tasks>
      
<task id="1" name="Task 1" actual_start="2008.07.11" actual_end="2008.07.12" />
      
<task id="2" name="Task 2" actual_start="2008.07.11" actual_end="2008.07.13" />
      
<task id="3" name="Task 3" actual_start="2008.07.12" actual_end="2008.07.16" />
      
<task id="4" name="Task 4" actual_start="2008.07.05" actual_end="2008.07.10" />
      
<task id="5" name="Task 5" actual_start="2008.07.07" actual_end="2008.07.12" />
      
<task id="6" name="Task 6" actual_start="2008.07.14" actual_end="2008.07.19" />
      
<task id="7" name="Task 7" actual_start="2008.07.05" actual_end="2008.07.10" />
      
<task id="8" name="Task 8" actual_start="2008.07.3" actual_end="2008.07.10" />
    
</tasks>
    
<connectors>
      
<connector from="1" to="2" type="StartStart" style="critical" />
      
<connector from="3" to="4" type="StartFinish" style="normal" />
      
<connector from="5" to="6" type="FinishStart" style="critical" />
      
<connector from="7" to="8" type="FinishFinish" style="normal" />
    
</connectors>
  
</project_chart>
</anygantt>

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

to top

In-Line Style

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

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

<anygantt>
  
<project_chart>
    
<tasks>
      
<task id="1" name="Task 1" actual_start="2008.07.11" actual_end="2008.07.12" />
      
<task id="2" name="Task 2" actual_start="2008.07.11" actual_end="2008.07.13" />
      
<task id="3" name="Task 3" actual_start="2008.07.12" actual_end="2008.07.16" />
      
<task id="4" name="Task 4" actual_start="2008.07.05" actual_end="2008.07.10" />
      
<task id="5" name="Task 5" actual_start="2008.07.07" actual_end="2008.07.12" />
      
<task id="6" name="Task 6" actual_start="2008.07.14" actual_end="2008.07.19" />
      
<task id="7" name="Task 7" actual_start="2008.07.05" actual_end="2008.07.10" />
      
<task id="8" name="Task 8" actual_start="2008.07.3" actual_end="2008.07.10" />
    
</tasks>
    
<connectors>
      
<connector from="1" to="2" type="StartStart">
        
<connector_style name="critical">
          
<line enabled="true" type="Solid" color="DarkRed" thickness="1" />
        
</connector_style>
      
</connector>
      
<connector from="3" to="4" type="StartFinish" />
      
<connector from="5" to="6" type="FinishStart" />
      
<connector from="7" to="8" type="FinishFinish" />
    
</connectors>
  
</project_chart>
</anygantt>

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

to top

Visual Settings

You can tune line color, thickness and opacity. All these settings are set in <line> node in <connector_style> node.

Live sample below shows the use of two different connector styles. One sets Dark Red color for the line, another - green:

Connector-Style-Visual - Click to see Live Chart Preview
Connector-Style-Visual - Click to see Live Chart Preview

to top