Bar Style

Overview

Bar Style - is a style used to visualize different elements on the Gantt plot. List of elements that use Bar Style for is rather numerous. These are such elements as Summary Task, Normal Task, Resource Period and Milestone. Each of these elements uses its own typical styles, that are based on Bar Style.

Bar Style consists of the following elements:

Here is a scheme of Summary Task Style with Bar Style elements shown:

to top

Bar-Style Application

Bar-Style is NOT applied as is to the elements of the Gantt Chart - it is used as a part of another styles, such as Task Style and Period Style.

In this tutorial general settings of Bar-Style are described, to see more detailed information about specific style application Task Project tutorials and Resource Project tutorials.

to top

Bar Style in Task Style

To configure how task looks like, you should use Task Style. Task Style contains three Bar Styles in it - for actual, baseline and progress bars. See Task Project docs for more.

Take a look at full XML for the project with one task with a style applied. Task Style uses several bar styles:

<anygantt>
  
<settings>
    
<background enabled="false" />
    
<navigation>
      
<buttons collapse_expand_button="false" />
    
</navigation>
  
</settings>
  
<timeline>
    
<plot line_height="30" item_height="12" item_padding="8" />
    
<scale start="2008.07.05" end="2008.07.18" />
  
</timeline>
  
<datagrid enabled="false" />
  
<styles>
    
<task_styles>
      
<task_style name="simpleTaskStyle">
        
<actual>
          
<bar_style>
            
<middle shape="Full">
              
<fill enabled="true" type="Solid" color="#EEEEEE" />
              
<border enabled="true" color="#999999" />
            
</middle>
            
<labels>
              
<label anchor="Left" halign="Near" valign="Center">
                
<text>{%Complete}%</text>
              
</label>
              
<label anchor="Right" halign="Far" valign="Center">
                
<text>{%Name}</text>
              
</label>
            
</labels>
          
</bar_style>
        
</actual>
        
<progress>
          
<bar_style>
            
<middle shape="Full">
              
<fill enabled="true" type="Solid" color="#EE8888" />
              
<border enabled="true" color="#AA4444" />
            
</middle>
          
</bar_style>
        
</progress>
      
</task_style>
    
</task_styles>
  
</styles>
  
<project_chart>
    
<tasks>
      
<task id="01" name="Sample Task 01" actual_start="2008.07.07" actual_end="2008.07.16" style="simpleTaskStyle" progress="55" />
    
</tasks>
  
</project_chart>
</anygantt>

Above you can see the Task Style named simpleTaskStyle and it is applied to the only task in this project using style attribute of <task> node. Bar Style is used twice - to configure actual task state (<actual> node) and task progress (<progress> node).

This XML above produces chart like this:

Using Bar-Style within Task-Style - Click to see Live Chart Preview
Using Bar-Style within Task-Style - Click to see Live Chart Preview

to top

Bar Style in Resource Project

In Resource Projects Bar Style is used to configure how resources bars look like. Bar Style is used within Period Style in this case. See more docs in about Period Styles in Resource Projects tutorials.

Take a look at full XML for the project with two resources and several periods with a style applied. Period Styles use bar style:

<anygantt>
  
<settings>
    
<background enabled="false" />
    
<navigation>
      
<buttons collapse_expand_button="false" />
    
</navigation>
  
</settings>
  
<timeline>
    
<plot line_height="30" item_height="20" item_padding="5" />
    
<scale start="2008.07.06" end="2008.07.17" />
  
</timeline>
  
<datagrid enabled="true" width="65">
    
<columns>
      
<column width="60">
        
<header>
          
<text>Name</text>
        
</header>
        
<format>{%Name}</format>
      
</column>
    
</columns>
  
</datagrid>
  
<styles>
    
<period_styles>
      
<period_style name="Working">
        
<bar_style>
          
<middle>
            
<fill enabled="true" color="#99EE99" />
          
</middle>
        
</bar_style>
      
</period_style>
      
<period_style name="Maintance">
        
<bar_style>
          
<middle>
            
<fill enabled="true" color="#EEEE99" />
          
</middle>
        
</bar_style>
      
</period_style>
      
<period_style name="Broken">
        
<bar_style>
          
<middle>
            
<fill enabled="true" color="#EE9999" />
          
</middle>
        
</bar_style>
      
</period_style>
    
</period_styles>
  
</styles>
  
<resource_chart>
    
<resources>
      
<resource name="Server 1" id="server_1" />
      
<resource name="Server 2" id="server_2" />
    
</resources>
    
<periods>
      
<period resource_id="server_1" start="2008.07.07" end="2008.07.8" style="Working" />
      
<period resource_id="server_1" start="2008.07.8" end="2008.07.12" style="Maintance" />
      
<period resource_id="server_1" start="2008.07.12" end="2008.07.14" style="Working" />
      
<period resource_id="server_1" start="2008.07.14" end="2008.07.16" style="Broken" />
      
<period resource_id="server_2" start="2008.07.07" end="2008.07.11" style="Working" />
      
<period resource_id="server_2" start="2008.07.8" end="2008.07.13" style="Broken" />
      
<period resource_id="server_2" start="2008.07.13" end="2008.07.16" style="Maintance" />
    
</periods>
  
</resource_chart>
</anygantt>

Above you can see three different Period Styles, each contains Bar Style with a different Middle Bar fill settings. Subsequently, styles named Working, Maintains and Broken are applied to periods using style attribute, for example <period style="Broken"/>.

This XML above produces chart like this:

Using Bar-Style within Resource-Style - Click to see Live Chart Preview
Using Bar-Style within Resource-Style - Click to see Live Chart Preview

to top

Middle Bar

The basic part of the Bar Style is the Middle Bar. It is a rectangle that shows start, end and the duration of a task, task interval or a scheduled period for a resource. For any Middle Bar you can set the shape type, fill and border.

Sample XML syntax for Middle Bar:

<bar_style>
  
<middle>
    
<fill enabled="true" type="Solid" color="DarkSeaGreen" />
    
<border enabled="true" color="#494949" />
  
</middle>
</bar_style>

Shape type defines the placement and relative thickness of the middle bar. XML for shape settings is the following:

<bar_style>
  
<middle shape="Full">
  
</middle>
</bar_style>

The table below shows all available Middle Bar shape types:

Sample Shape type
Full
HalfBottom
HalfCenter
HalfTop
ThinBottom
ThinCenter
ThinTop

The sample below shows a project with the several tasks, each uses the style with shape type set. Fill and border settings are also demonstrated:

Bar Style - Middle Bar Settings Sample - Click to see Live Chart Preview
Bar Style - Middle Bar Settings Sample - Click to see Live Chart Preview

to top

Starting and Ending Markers

Starting and Ending Markers are preset shapes that are placed in the start and at the end of the Middle Bar. By default markers are used to distinguish regular and summary task, and to draw Milestones. When you create your own style you can use custom markers to mark special or important tasks.

Here is the easiest XML of markers in Bar Style:

<bar_style>
  
<start>
    
<marker type="Rhomb">
      
<fill enabled="true" type="Solid" color="Orange" />
      
<border enabled="true" type="Solid" color="#494949" />
    
</marker>
  
</start>
  
<end>
    
<marker type="Arrow">
      
<fill enabled="true" type="Solid" color="Orange" />
      
<border enabled="true" type="Solid" color="#494949" />
    
</marker>
  
</end>
</bar_style>

All settings for marker are defined in <marker> node. It contains settings for fill and border, marker is set using type, attribute, for example: <marker type="Arrow"/>.

The list of Marker types and names:

Sample Marker Type
Arrow
Circle
Rhomb
HalfBottomCircle
HalfCenterCircle
HalfTopCircle
ThinBottomCircle
ThinCenterCircle
ThinTopCircle

Sample below shows different markers:

Bar Style Markers Demo - Click to see Live Chart Preview
Bar Style Markers Demo - Click to see Live Chart Preview

to top

Labels

Besides visualization of Bar itself and its markers Bar Style also contains settings of labels that belong to the task or period. User can set any number of labels, and each of them can have specific font settings, text formatting, position of anchor relative to the bar and alignment relative to binding anchor.

to top

Simple Label Customization

To adjust settings in bar_style node use labels node, which defines a list of labels. For example let's take a look at a simple project with only four tasks. Then we apply a task style to them, that contains bar_style, and define one label of task percentage completion:

Simple task label sample - Click to see Live Chart Preview
Simple task label sample - Click to see Live Chart Preview

As you can see from the example, the syntax of labels settings is very simple. By default task style contains some pre-defined labels, but when you apply your own style and add labels node in bar_style node, all default settings are reset, and new ones are used. In the example below we've added one new label. XML syntax for it is the following:

<bar_style>
  
<labels>
    
<label anchor="Center" valign="Center" halign="Center">
      
<text>{%Complete}%</text>
      
<font face="Verdana" size="10" bold="true" color="White">
      
</font>
    
</label>
  
</labels>
</bar_style>

to top

Multiple Labels

Besides one label, as it is shown in the example above, you can use any number of labels with different settings of visualization and formatting.

As an example of multiple labels usage let's have a look at a project with some tasks and add four labels with different formatting settings to them: task starting time, task ending time, progress and task name.

Multiple task labels - Click to see Live Chart Preview
Multiple task labels - Click to see Live Chart Preview

XML syntax is the same as the syntax with the case of single label. The difference is that in this example we use a list of some label nodes:

<bar_style>
  
<labels>
    
<label anchor="Center" valign="Center" halign="Center">
      
<text>{%Complete}%</text>
      
<font face="Verdana" size="10" bold="true" color="White">
      
</font>
    
</label>
    
<label anchor="BottomCenter" valign="Far" halign="Center" vpadding="2">
      
<text>{%Name}</text>
      
<font face="Verdana" size="10" bold="true" color="#0">
      
</font>
    
</label>
    
<label anchor="Left" valign="Center" halign="Near" vpadding="2">
      
<text>{%Start}</text>
      
<font face="Verdana" size="10" bold="true" color="#660000">
      
</font>
    
</label>
    
<label anchor="Right" valign="Center" halign="Far" vpadding="2">
      
<text>{%End}</text>
      
<font face="Verdana" size="10" bold="true" color="#660000">
      
</font>
    
</label>
  
</labels>
</bar_style>

to top

Label Position

By default label is added to the center of the bar. There is a set if options which are used to configure label placement.

Anchor and alignment

There are several options that allow you to configure label position: anchor point, vertical and horizontal align, vertical and horizontal paddings. All these settings are configured in <label> node.

Full list of attributes and possible values:

Attribute Possible Values Description
anchor BottomCenter
BottomLeft
BottomRight
Center
Left
Right
TopCenter
TopLeft
TopRight
Set label anchor point.
halign Near
Center
Far
Horizontal align of a label relative to anchor point.
valign Near
Center
Far
Vertical align of a label relative to anchor point.
hpadding Any Numeric Horizontal padding of a label relative to anchor point.
vpadding Any Numeric Vertical padding of a label relative to anchor point.

Configuring label anchor point

Label anchor point is set in anchor attribute in label node. Anchor defines a point to which a label is docked (or anchored). There are 9 anchors available, as shown on a scheme below:

XML Syntax for setting anchor:

<label anchor="Center">
  
<text>Sample Text</text>
</label>

Here is a sample with task style defined, with Bar Style and nine labels set, each label uses the different anchor:

Task labels anchor settings - Click to see Live Chart Preview
Task labels anchor settings - Click to see Live Chart Preview

to top

Horizontal and Vertical Align Settings

Besides anchor settings you can also set label align.

There are two special attributes in <label> node: valign and halign. valign sets vertical align, and halign - horizontal.

Align XML settings:

<label anchor="TopLeft" valign="Near" halign="Near">
  
<text>Sample Text</text>
</label>

Using halign and valign you can set nine different positions for each anchor point. Table below shows all possible positions with one anchor point:

Nine tasks in the sample below show all these positions:

Task labels VAlign-HAlign Demo - Click to see Live Chart Preview
Task labels VAlign-HAlign Demo - Click to see Live Chart Preview

Text and Formatting

AnyGantt has a wide range of features for text formatting in labels and in tooltips. You can either set static text for any selected or all tasks, or use tokens to create different labels that are based on built-in or custom tokens.

To set text in label you should use <text> subnode of <label> node. The text is set within opening and closing <text></text> tag. If you need special characters - do not forget to use CDATA.

Sample static text:

<labels>
  
<label anchor="Center">
    
<text>Sample Text</text>
  
</label>
</labels>

Special characters sample:

<labels>
  
<label anchor="Center">
    
<text><![CDATA[<TEXT>]]></text>
  
</label>
</labels>

Using built-in tokens

When you configure Gantt chart you supply a lot of data, like task name, start, end, progress and so on.

All these data can be used in labels using special tokens. You can use the alone or combine with static text - just as you chart requires. When real chart is displayed - tokens are replaced with actual data.

This sample shows how name token is used:

<labels>
  
<label anchor="Center">
    
<text>Task Name: {%Name}</text>
  
</label>
</labels>

Here is a full list ob built-in tokens:

Token Description
{%RowNum} Row index (task, resource)
{%ID} Identifier (task, resource)
{%Name} Name (task, resource)
{%ActualStart}

Actual start (task). If task has several intervals - this refers to the first interval start.
If you have resource project - the first period start.

{%ActualEnd} Actual end (task). If task has several intervals - this refers to the last interval end.
If you have resource project - the last period end.
{%BaselineStart} Task only. Baseline start. If task has several intervals - this refers to the first interval start.
{%BaselineEnd} Task only. Baseline end. If task has several intervals - this refers to the last interval start.
{%Complete} Task only. Progress (without %)
{%CompleteDate} Task only. Progress date.
{%PeriodStart} Resource only. Period start.
{%PeriodEnd} Resource only. Period end.
{%IntervalStart} Task only. Interval start.
{%IntervalEnd} Task only. Interval End.
{%Duration} The duration of actual time for tasks or period duration.
{%BaselineDuration} Task only. Baseline plan duration.

Lets create a style with several labels. Each labels uses static text and tokens. Here is the XML:

<bar_style>
  
<labels>
    
<label anchor="Center" valign="Center" halign="Center">
      
<text>{%Complete}%</text>
      
<font face="Verdana" size="10" bold="true" color="White">
      
</font>
    
</label>
    
<label anchor="BottomCenter" valign="Far" halign="Center" vpadding="2">
      
<text>Task Name: {%Name}</text>
      
<font face="Verdana" size="10" bold="true" color="#000066">
      
</font>
    
</label>
    
<label anchor="Left" valign="Center" halign="Near" vpadding="2">
      
<text>
Start Date:
{%Start}
</text>
      
<font face="Verdana" size="10" bold="true" color="#660000">
      
</font>
    
</label>
    
<label anchor="Right" valign="Center" halign="Far" vpadding="2">
      
<text>
Finish Date:
{%End}
</text>
      
<font face="Verdana" size="10" bold="true" color="#660000">
      
</font>
    
</label>
  
</labels>
</bar_style>

Which allows us to show chart like that:

Multiple task labels with custom formatting - Click to see Live Chart Preview
Multiple task labels with custom formatting - Click to see Live Chart Preview


Using Custom Attributes as text source for the labels.

Besides of explicit setting of the label text and usage of built-in tokens you can use custom attributes attaches to resources, periods or tasks. Custom attributes can hold any data of your choice.

In XML snippet below you can see how custom attributes are defined for tasks. Each task has two attributes: Status and Person. First contains status description and second holds a name of person in charge:

<project_chart>
  
<tasks>
    
<task id="01" name="Task 01" actual_start="2008.07.07" actual_end="2008.07.16" progress="14">
      
<attributes>
        
<attribute name="Status">In Progress</attribute>
        
<attribute name="Person">Steve Shafer</attribute>
      
</attributes>
    
</task>
    
<task id="02" name="Task 02" actual_start="2008.07.08" actual_end="2008.07.17" progress="34">
      
<attributes>
        
<attribute name="Status">Stopped</attribute>
        
<attribute name="Person">Donald Horn</attribute>
      
</attributes>
    
</task>
    
<task id="03" name="Task 03" actual_start="2008.07.06" actual_end="2008.07.15" progress="78">
      
<attributes>
        
<attribute name="Status">In Progress</attribute>
        
<attribute name="Person">Kevin Mitchell</attribute>
      
</attributes>
    
</task>
  
</tasks>
</project_chart>

When custom attributes are defined you can use them in texts of labels, you just need to use certain syntax. Below you can see XML, where label text is templated using custom attributes.

In <label> node we add <text> subnode with custom attribute token in it. The syntax of any custom attribute usage is {%ATTRIBUTE_NAME}, where ATTRIBUTE_NAME - the name of attribute. {%Status} works in the sample described:

<label anchor="Center" valign="Center" halign="Center">
  
<text>{%Status}</text>
</label>

Finally, you can take a look at the sample with three labels attached to each task, two use custom attributes, and the third uses {%Complete} token to show task progress:

<bar_style>
  
<labels>
    
<label anchor="Center" valign="Center" halign="Center">
      
<text>{%Complete}%</text>
      
<font face="Verdana" size="10" bold="true" color="White">
      
</font>
    
</label>
    
<label anchor="Left" valign="Center" halign="Near">
      
<text>{%Status}</text>
      
<font face="Verdana" size="10" bold="true" color="#004900">
      
</font>
    
</label>
    
<label anchor="Right" valign="Center" halign="Far">
      
<text>{%Person}</text>
      
<font face="Verdana" size="10" bold="true" color="#690069">
      
</font>
    
</label>
  
</labels>
</bar_style>

Take a look at the live sample:

Using custom attributes and labels - Click to see Live Chart Preview
Using custom attributes and labels - Click to see Live Chart Preview

to top

Font settings

Each label can have own font settings. Font can be set for a whole label (unless you use HTML) and configured in <font> subnode, of <label> node. Sample XML:

<label>
  
<font face="Verdana" color="#252525" size="10" bold="true" italic="false" underline="false" />
  
<text>Sample Text</text>
</label>

Full set of font settings:

Attribute Description
face The name of the font for text
color Text Color
size The point size of text
bold Specifies whether the text is boldface
italic Indicates whether text is italicized
underline Indicates whether the text is underlined
render_as_html Sets whether text is rendered as HTML

This sample shows several labels with different font settings:

BarStyle Labels Font Settings - Click to see Live Chart Preview
BarStyle Labels Font Settings - Click to see Live Chart Preview

to top

Using HTML Formatting

If you want to do a complex formatting of the text - consider using HTML formatting. To enable it you have to set render_as_html = "True" in <font> node. Then you need to use CDATA section with HTML tags within <format> or <text> nodes:

<label>
  
<font render_as_html="True" />
  
<text><![CDATA[ <b>Task Name:</b> {%Name} ]]></text>
</label>

Few HTML tags are supported (Flash Player limitation):

Tag Description
Bold tag The <b> tag renders text as bold. A bold typeface must be available for the font used.
Break tag The <br> tag creates a line break in the text field. You must set the text field to be a multi line text field to use this tag.
Font tag The <font> tag specifies a font or list of fonts to display the text.The font tag supports the following attributes:
  • color - All AnyChart Color values are supported.
  • face - Specifies the name of the font to use.
  • size - Specifies the size of the font. You can use absolute pixel sizes, such as 16 or 18, or relative point sizes, such as +2 or -4.
Italic tag The <i> tag displays the tagged text in italics. An italic typeface must be available for the font used.
Paragraph tag The <p> tag creates a new paragraph. You must set the text field to be a multi line text field to use this tag. The <p> tag supports the following attributes:
  • align - Specifies alignment of text within the paragraph; valid values are left, right, justify, and center.
Underline tag The <u> tag underlines the tagged text.

Here is a sample with HTML formatted text :

Task Labels Using HTML Formatting - Click to see Live Chart Preview
Task Labels Using HTML Formatting - Click to see Live Chart Preview

 

to top