Task Style

Overview

Task Style - is the cope-stone of tuning tasks functionality and visualization. This style is used to configure all task types: Regular Task, Summary Task and Milestone.

The illustration below shows almost every elements that are configured in task style:

to top

Style Application

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

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

<anygantt>
  
<styles>
    
<task_styles>
      
<task_style name="sampleStyle">
        
<row>
          
<fill enabled="true" type="Solid" color="Rgb(250,0,0)" opacity="0.2" />
        
</row>
      
</task_style>
    
</task_styles>
  
</styles>
  
<project_chart>
    
<tasks>
      
<task id="01" name="Task 01" actual_start="2008.07.07" actual_end="2008.07.16" progress="14" style="sampleStyle" />
      
<task id="02" name="Task 02" actual_start="2008.07.08" actual_end="2008.07.17" progress="34" style="sampleStyle" />
      
<task id="03" name="Task 03" actual_start="2008.07.06" actual_end="2008.07.15" progress="78" style="sampleStyle" />
      
<task id="04" name="Task 04" actual_start="2008.07.09" actual_end="2008.07.17" progress="23" style="sampleStyle" />
    
</tasks>
  
</project_chart>
</anygantt>

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

to top

In-line Style

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

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

<anygantt>
  
<project_chart>
    
<tasks>
      
<task id="01" name="Task 01" actual_start="2008.07.07" actual_end="2008.07.16" progress="14" style="sampleStyle">
        
<style>
          
<row>
            
<fill enabled="true" type="Solid" color="Rgb(250,0,0)" opacity="0.2" />
          
</row>
        
</style>
      
</task>
    
</tasks>
  
</project_chart>
</anygantt>

As you can see we have <style> node within<task> 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

Task Style Parts

There are three elements that present the task - Actual Task State, Task Progress and Planned Task State. Illustration below shows these three elements:

Each of these elements is configured using Bar Style. Bar style is in charge for configuration of border, fill, markers, labels and interactive states. Bar Style is described in details in Bar Style Tutorial .

Actual Task State (Actual)

Actual start time and end time is set using actual_start and actual_end attributes of <task> node, for example:
<task actual_start="2008.07.01" actual_end="2008.07.12"/>
.

As said above - visual representation is configured using Bar Styles. Bar style for actual state in configured like that:

<task_style name="testStyle">
  
<actual>
    
<bar_style>
      
<middle>
        
<fill enabled="true" type="Solid" color="Gray" opacity="1" />
        
<border enabled="true" type="Solid" color="Black" opacity="1" />
      
</middle>
    
</bar_style>
  
</actual>
</task_style>

Live sample shows modified border and fill for actual state:

Task-Style-Actual-Bar - Click to see Live Chart Preview
Task-Style-Actual-Bar - Click to see Live Chart Preview

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

to top

Task Progress

Task progress is optional, but it is used in the most of the cases and set using progress attribute of <task> node, for example: <task progress="72"/>.

Just as actual state the visual representation is configured using Bar Style. Here is the sample XML showing the modification of progress fill and border:

<task_style name="testStyle">
  
<progress>
    
<bar_style>
      
<middle>
        
<fill enabled="true" type="Solid" color="Gray" opacity="1" />
        
<border enabled="true" type="Solid" color="Black" opacity="1" />
      
</middle>
    
</bar_style>
  
</progress>
</task_style>

Live sample shows the same modifications:

Task-Style-Progress-Bar - Click to see Live Chart Preview
Task-Style-Progress-Bar - Click to see Live Chart Preview

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

to top

Planned Task State (Baseline)

Planned task state is optional, it set using baseline_start and baseline_end attribute in <task> node, for example:
<task baseline_start="2008.07.01" baseline_end="2008.07.12"/>.

Planned task bar is displayed under the actual bar and has its own settings. To configure planned task bar the following XML is used:

<task_style name="testStyle">
  
<baseline>
    
<bar_style>
      
<middle>
        
<fill enabled="true" type="Solid" color="Gray" opacity="1" />
        
<border enabled="true" type="Solid" color="Black" opacity="1" />
      
</middle>
    
</bar_style>
  
</baseline>
</task_style>

Live sample shows altered fill and border for planned bar:

Task-Style-Baseline-Bar - Click to see Live Chart Preview
Task-Style-Baseline-Bar - Click to see Live Chart Preview

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

to top

Task Tooltip Configuration

Using Task Style you can override default tooltip in task datagrid .

XML syntax:

<task_style name="critical">
  
<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>
</task_style>

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

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

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

to top

Timeline Plot Row Fill Configuration

You can configure how task row in timeline plot looks like in normal and hovered state using <row> node.

XML look like that:

<task_style name="critical">
  
<row>
    
<fill enabled="true" type="Solid" color="#FF0000" opacity="0.2" />
    
<states>
      
<hover>
        
<fill enabled="true" type="Solid" color="#FF3333" opacity="0.5" />
      
</hover>
    
</states>
  
</row>
</task_style>

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

Sample below shows custom timeline plot fill for three tasks and default settings for the fourth:

Task-Style-Row-Fill-Sample - Click to see Live Chart Preview
Task-Style-Row-Fill-Sample - Click to see Live Chart Preview

to top

DataGrid Row Fill Configuration

Besides timeline plot row fill you can set datagrid row fill. Use <row_datagrid> to do that.

XML Sample for datagrid row configuration:

<task_style name="critical">
  
<row_datagrid>
    
<cell>
      
<fill enabled="true" type="Solid" color="#FF0000" opacity="0.2" />
      
<states>
        
<hover>
          
<fill enabled="true" type="Solid" color="#FF3333" opacity="0.5" />
        
</hover>
      
</states>
    
</cell>
  
</row_datagrid>
</task_style>

Sample below shows custom datagrid plot fill for three tasks and default settings for the fourth:

Task-Style-Data-Grid-Row-Fill-Sample - Click to see Live Chart Preview
Task-Style-Data-Grid-Row-Fill-Sample - Click to see Live Chart Preview

to top

DataGrid Tooltip

Using Task Style you can override default tooltip in task datagrid .

XML syntax:

<task_style name="critical">
  
<row_datagrid>
    
<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>
  
</row_datagrid>
</task_style>

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

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

Task-Style-Data-Grid-Tooltip-Settings - Click to see Live Chart Preview
Task-Style-Data-Grid-Tooltip-Settings - Click to see Live Chart Preview

to top

DataGrid Font

Besides row fill Task style can also configure font for all cells in datagrid. You can set font for normal and hover states. the only limitation is the fact that these settings override datagrid column font settings.

Datagrid font settings configuration XML:

<task_style name="summaryStyle">
  
<row_datagrid>
    
<cell>
      
<font face="Times New Roman" size="15" bold="true" italic="false" underline="false" color="#393939" />
      
<states>
        
<hover>
          
<font face="Times New Roman" size="15" bold="true" italic="true" underline="true" color="#790202" />
        
</hover>
      
</states>
    
</cell>
  
</row_datagrid>
</task_style>

One style with normal and hover states and font settings is applied to all of the summary tasks in this live sample:

Task-Style-Data-Grid-Font-Settings - Click to see Live Chart Preview
Task-Style-Data-Grid-Font-Settings - Click to see Live Chart Preview

to top