Time Scale
- Overview
- Time Scale Range
- Manual Scale Start and End Setting
- Padding control for automatic Time Scale Calculation
- How to define initial Range shown
- The number of Levels and Height of Time Scale
- Custom Levels
- Adding Custom Levels
- Background and Separators between tiles and levels
- Tile visualization
- Working with Variable Ranges
- Date Time Scale Units Patterns
- Custom Intervals in Time Scale
- Zooming Settings
- Separator Line between Task Plot and Time Scale
Overview
AnyGantt has smart and rather complex Time Scale. By default it is configured to cover most of the cases and can be used as is, without any setting. But if you need to configure it - features are very flexible and allow you to get what you need. Configuring time scale can be rather complex taskm but we have tried to cover all questions in this tutorial and provide a lot of samples.
Time Scale Range
Time Scale Range is the time interval that is shown on the scale - it has some starting and ending date time, not necessary the start end the end of the project, but some time span shown on Gantt Chart.
By default scale defines its start and end automatically, basing on start and end dates of the tasks or periods in the project. In this help section you can find out how to set start and end of the scale manually and some В данной секции описана техника мануальной настройки пределов шкалы, а так же auxiliary settings for automatic time scale range
Manual Scale Start and End Setting
To override the automatic definition of time scale range use start and end attributes in <scale> node, these attributes should contain date time. Both parameters should be set simultaneously.
Sample XML syntax with manual start and end set:
<timeline>
<scale start="2007.01.12" end="2007.06.09" />
</timeline>
</anygantt>
Live sample with manual start and end set:
![]() |
Padding control for automatic Time Scale Calculation
When scale is calculated by AnyGantt automatically - some paddings are added before actual project start and end. These paddings can be changed using left and right attributes of <scale> node. Measurement unit of padding is set in padding_unit attribute, that accepts Day or Percent value.
XML Syntax to define padding in days (5 days before and after actual project start and end):
<timeline>
<scale padding_unit="Day" left="5" right="5" />
</timeline>
</anygantt>
To set padding in percents of the plot width the following settings are used. Paddings would cover 20% of the plot - 10% before and after:
<timeline>
<scale padding_unit="Percent" left="10" right="10" />
</timeline>
</anygantt>
Live sample shows setting paddings in percents:
![]() |
How to define initial Range shown
By default AnyGantt shows all tasks of the project on the plot, if you want to focus users attention on the given part of the time scale - you can set what range should be show at the start up.
To do this use show_start and show_end attributes of <scale> node, which should be set in Date Time format. Both attributes should be set simultaneously.
Sample XML with initial Range defined:
<timeline>
<scale start="2007.01.12" end="2007.06.09" show_start="2007.02.01" show_end="2007.04.23" />
</timeline>
</anygantt>
Live sample with modified initial range:
![]() |
The number of Levels and Height of Time Scale
Time Scale can have any number of levels. By defaul AnyGantt shows 2 levels, but you can alter this by setting lines attribute in <scale> node. lines attribute accepts any positive integer as the value, but the usage of more than 3-4 levels is not, usually, a great idea.
Also you can set the height of the scale in pixels using height attribute.
Sample XMl with the number of levels and scale height set:
<timeline>
<scale height="60" lines="3" />
</timeline>
</anygantt>
Live sample of the Gantt chart with three levels in time scale:
![]() |
Custom Levels
When you are using automatic levels - you can define the number of them, but you have no control over the visualization and can't define levels with custom ranges.
You can define what scale and levels you want to see, and how these levels should look like using custom levels, each custom level has its own custom settings.
Adding Custom Levels
Custom levels are defined in <levels> node, each is represented by <level> subnode, each <level> - is the level in the scale and the order of levels in the scale is inverted list of <level> nodes. Each level can have custom height set by height attribute.
Here is the samle of the time scale with three custom levels, each has its own height.
<timeline>
<scale>
<levels>
<level height="30">
</level>
<level height="45">
</level>
<level height="45">
</level>
</levels>
</scale>
</timeline>
</anygantt>
Background and Separators between tiles and levels
Tiles in Time Scale that contain dates are separated by the vertical lines, which can be configured in <vertical_separator> node. You can set the color and other line settings, and the padding of the separator and top and bottom of the level. To set this padding - use padding attribute (is set in pixels).
Besides vertical tiles separator you can tune the horizontal levels separator, which is placed in the top of the level. It is configured in <horizontal_separator> node.
Sample XML for separators configuration:
<timeline>
<scale>
<levels>
<level height="20">
<style>
<vertical_separator enabled="true" color="#FF0000" padding="3" />
</style>
</level>
<level height="20">
<style>
<vertical_separator enabled="true" color="#0000FF" padding="3" />
<horizontal_separator enabled="true" color="Magenta" padding="3" />
</style>
</level>
</levels>
</scale>
</timeline>
</anygantt>
Live sample shows separators defined for the different levels:
![]() |
Tile visualization
When configuring tiles appearance yo can tune normal and hover states. All settings are set in <tile> node and applied to all tiles on the level.
Sample XML with configuration of tiles states:
<style>
<tile>
<fill enabled="true" type="Solid" color="Rgb(250,220,220)" />
<states>
<hover>
<fill enabled="true" type="Solid" color="Rgb(180,230,180)" />
</hover>
</states>
</tile>
</style>
</level>
Live sample shows two levels on the scale with different tiles fill:
![]() |
Working with Variable Ranges
Custom Scale level can be used to mark the specific time ranges like, for example, project phases or custom Date Time untis unsupported by time scale.
Variable ranges are defined as the list, each range has the custom text whish is shown in the time scale. If level has ranges defined - only ranges are shown.
XML Syntax for the level with ranges:
<timeline>
<scale>
<levels>
<level>
<ranges>
<range start="2008.07.03" end="2008.07.10">
<text>PHASE 1</text>
</range>
<range start="2008.07.10" end="2008.07.19">
<text>PHASE 2</text>
</range>
</ranges>
</level>
<level />
<level />
</levels>
</scale>
</timeline>
</anygantt>
Live sample shows time scale with 3 levels, one level consists of custom ranges, other are usual levels:
![]() |
Date Time Scale Units Patterns
Date Time Scale Unit Patterns are used to configure how what date time units are show in the scale and how date time is formatted.
The follwowing Date Time Units can be used in the Time Scale:
- Second
- Minute
- Hour
- Day
- Week
- Decade
- Month
- Quarter
- Semester
- Year
For each of this Date Time Unit several patterns can de defined, the use of the patterns depends on your project and the things you want to see in the time scale.
AnyGantt has the wide patterns list, which allows time scale to show proper tiles in the time scale for almost any scale.
All patterns are grouped in the Date Time unit nodes. XML Syntax and full list of these nodes look like that:
<timeline>
<scale>
<patterns>
<seconds />
<minutes />
<hours />
<days />
<weeks />
<decades />
<months />
<quarters />
<semesters />
<years />
</patterns>
</scale>
</timeline>
</anygantt>
Each pattern is defined in <pattern> node, which has the only attribute: is_lower="True|False". This attribute defines whether this pattern is used for lower level only or for all levels. Every Date Time unit node should contain at least one pattern marked with is_lower set to True, the only exception is <years>.
Sample XML syntax for different Date Time patterns settings:
<patterns>
<years>
<pattern>%yyyy</pattern>
</years>
<months>
<pattern is_lower="true">%MM</pattern>
<pattern is_lower="true">%MMM</pattern>
<pattern is_lower="true">%MMMM</pattern>
<pattern>%MMM '%yy</pattern>
<pattern>%MMMM, %yyyy</pattern>
</months>
<weeks>
<pattern>%MM %dd, '%yy</pattern>
<pattern>%MMM %dd, '%yy</pattern>
<pattern>%MMMM %dd, %yyyy</pattern>
</weeks>
<days>
<pattern>%MM %dd, '%yy</pattern>
<pattern>%MMM %dd, '%yy</pattern>
<pattern>%MMMM %dd, %yyyy</pattern>
<pattern is_lower="true">%dd</pattern>
</days>
</patterns>
</scale>
As you can see from the listing some Date Time Units have several patterns defined. Some of the patterns have is_lower="True". The patterns without is_lower set have more detailed format - for example full date format - this patterns would appera on the top of the scale as more informative.
Pattern format is defined in <pattern> node, for example: <pattern>Date: %MMMM %dd, %yyyy</pattern>. Pattern format can contain any date time token with no regard to the Date Time unit group.
Table below lists all avalilable tokens:
Format specifier | Description |
---|---|
%d | Displays the current day of the month, measured as a number between 1 and 31, inclusive. If the day is a single digit only (1-9), then it is displayed as a single digit. |
%dd | Displays the current day of the month, measured as a number between 1 and 31, inclusive. If the day is a single digit only (1-9), it is formatted with a preceding 0 (01-09). |
%ddd | The abbreviated name of the day of the week. |
%dddd | The full name of the day of the week. |
%w | The first letter of weekday name. For example: S,M,T... and so on. |
%e | The number of the week in the year: from 1 to 52. |
%c | The number of decade in the month: from 1 to 3. |
%cс | The number of decade in the month: from 1 to 3 with leading zero (01, 02, 03). |
%С | The first letter of the decade in the month: F, S or T |
%С | The abbreviature of the decade in the month: Fir, Sec or Thi. |
%С | The text name of the decade in the month: First, Second or Third |
%N | The first letter of the month name. For example: J,F,M,A... and so on. |
%M | Displays the month, measured as a number between 1 and 12, inclusive. If the month is a single digit (1-9), it is displayed as a single digit. |
%MM | Displays the month, measured as a number between 1 and 12, inclusive. If the month is a single digit (1-9), it is formatted with a preceding 0 (01-09). |
%MMM | The abbreviated name of the month. |
%MMMM | The full name of the month. |
%y | Displays the year as a maximum two-digit number. The first two digits of the year are omitted. If the year is a single digit (1-9), it is displayed as a single digit. |
%yy | Displays the year as a maximum two-digit number. The first two digits of the year are omitted. If the year is a single digit (1-9), it is formatted with a preceding 0 (01-09). |
%yyyy | Displays the year, including the century. If the year is less than four digits in length, then preceding zeros are appended as necessary to make the displayed year four digits long. |
%r | The number of half-year: 1 or 2 |
%rr | The number of the half-year numerical suffix: 1st or 2nd. |
%rrr | The numerical name of the half-year. For example: First or Second. |
%q | The number of the quarter: 1,2,3 or 4. |
The number of the quarter with numerical suffix. For example: 1st, 2nd, 3rd or 4th. | |
%qqq | The numerical name of the quarter . For example: First, Second, Third or Fourth |
%h | Displays the hour in the range 1-12. The hour represents whole hours passed since either midnight (displayed as 12) or noon (also displayed as 12). If the hour is a single digit (1-9), it is displayed as a single digit. No rounding occurs when displaying the hour. |
%hh | Displays the hour in the range 1-12. The hour represents whole hours passed since either midnight (displayed as 12) or noon (also displayed as 12). If the hour is a single digit (1-9), it is formatted with a preceding 0 (01-09). |
%H | Displays the hour in the range 0-23. The hour represents whole hours passed since midnight (displayed as 0). If the hour is a single digit (0-9), it is displayed as a single digit. |
%HH | Displays the hour in the range 0-23. The hour represents whole hours passed since midnight (displayed as 0). If the hour is a single digit (0-9), it is formatted with a preceding 0 (01-09). |
%m | Displays the minute in the range 0-59. The minute represents whole minutes passed since the last hour. If the minute is a single digit (0-9), it is displayed as a single digit. |
%mm | Displays the minute in the range 0-59. The minute represents whole minutes passed since the last hour. If the minute is a single digit (0-9), it is formatted with a preceding 0 (01-09). |
%s | Displays the seconds in the range 0-59. The second represents whole seconds passed since the last minute. If the second is a single digit (0-9), it is displayed as a single digit only. |
%ss | Displays the seconds in the range 0-59. The second represents whole seconds passed since the last minute. If the second is a single digit (0-9), it is formatted with a preceding 0 (01-09). |
%t | Short am/pm name. |
%tt | The first character in the AM/PM designator. |
Live sample shows patterns use for years, months, weeks and days. For better demonstration patterns with is_lower attribute have M and D prefixes for months and days, this is done only to show you where are this patterns appear and how patterns behave on the scale:
![]() |
Custom Intervals in Time Scale
When Time Scale is changed - the engine operates with some predfined set of Date Time interavals to choose the appropriate formatting pattern. The intervals match Date Time units list and go from Year to Second.
Upon scaling Time Scale jumps from interval to interval choosing the smaller Date Time unit for lower levels and next in list bigger interval for upper levels.
You can preset your own interval list excluding certain Date Time units - for example if you don't want Time Scale to show minutes or seconds.
Sample XML with intervals defined:
<timeline>
<scale>
<intervals>
<interval type="Day" interval="1" />
<interval type="Week" interval="1" />
<interval type="Week" interval="2" />
<interval type="Month" interval="1" />
<interval type="Month" interval="3" />
<interval type="Month" interval="6" />
<interval type="Year" interval="1" />
</intervals>
</scale>
</timeline>
</anygantt>
As you can see - each interval is defined by node: <interval type="SomeDateUnit" interval="1"/>, where interval attribute - is the unit step, and type - unit type. Unit type, as already said above, match Date Time units:
- Second
- Minute
- Hour
- Day
- Week
- Decade
- Month
- Quarter
- Semester
- Year
As soon as you add at least one interval - default interval settings are discarded and only the intervals you define are used in Time Scale.
Live sample shows how custom interval list can be used: only Year, Semester, Quarter and Month intervals are defined, all other units would not be shown in Time Scale whatever scale is:
![]() |
Zoom Settings
All settings dealing with zooming are contained in <zoom> subnode of <scale> node.
Zoom Maximum and Minimum Size Control
Zoom in terms of units is defined by scale intervals and patterns, but to fix zoom depth in terms of pixels you should use <maximum> and <minimum> subnodes of <zoom> node.
These nodes allow you to set how small in pixels can the minimal element in scale can be and how large the maximum element can be.
Sample XML Settings:
<timeline>
<scale>
<zoom>
<minimum date_unit="Month" pixels="10" />
<maximum date_unit="Year" pixels="120" />
</zoom>
</scale>
</timeline>
</anygantt>
As you can see both nodes have date_unit and pixels, which define which unit controls maximum or minimum (date_unit) and how large or small it can be (pixels). date_unit can be one of mentioned above date time units:
- Second
- Minute
- Hour
- Day
- Week
- Decade
- Month
- Quarter
- Semester
- Year
Live sample fixes Year at 120 pixels, which makes zoom limited with this value:
![]() |
Animation Control
Be default when user uses Zoom-In or Zoom-Out buttons - scale and plot are animated. It looks good, but when you are working with the large projects - animation may slow, and you might want to turn it off to improve the performance.
To turn off the animation use the following syntax:
<timeline>
<scale>
<zoom allow_animation="false" />
</scale>
</timeline>
</anygantt>
Live sample below shows chart which is not animated on zoom-in and zoom-out:
![]() |
Zoom Factor Control
Be default when user clicks clicks Zoom-In or Zoom-Out buttons - 2.5 factor is used, which means the scale would become in 2.5 times longer or shorter (the range shown becomes 2.5 times larger or smaller).
You can alter the factor using zoom_factor attribute of <zoom> node . XML Syntax below shows this:
<timeline>
<scale>
<zoom zoom_factor="3" />
</scale>
</timeline>
</anygantt>
In the live sample zoom factor is set to 1.3, which makes zooming smoother (but may be annoying if the scale is large):
![]() |
Separator Line between Task Plot and Time Scale
To configure the appearance of the line that separates timescale and tasks plot use <bottom_line> node in <scale> node. Live sample shows modified Time Scale Bottom Line:
![]() |