Minute scale is enabled by adding the GANTT_HMIN in the GanttGraph::ShowHeaders() call, for example as the following line shows

1

$graph -> ShowHeaders ( GANTT_HDAY  |  GANTT_HHOUR  |  GANTT_HMIN );

The SetStyle($aStyle) method supports the following label styles

Minute scale is enabled by adding the GANTT_HHOUR in the GanttGraph::ShowHeaders() call, for example as the following line shows

1

$graph -> ShowHeaders ( GANTT_HDAY  |  GANTT_HHOUR  |  GANTT_HMIN );

The SetStyle($aStyle) method supports the following label styles

For hours it is possible to specify the interval in either of two ways. With an integer, e.g. 6, or as time interval, e.g. "1:30" which makes the interval one and a half hour. The only restriction is that the interval must be a divisor of 24 since one day is the smallest possible interval to show. This means that it is allowed to use, for example 2,4,6,"1:30" or "0:45" as intervals but not 7, "2:45".

The code snippet below shows hot to set up a hour scale to with 45 minutes interval and custom colors

1
2
3
4
5
6

<?php
$graph->scale->hour->SetBackgroundColor( 'lightyellow:1.5' );
$graph->scale->hour->SetFont( FF_FONT1 );
$graph->scale->hour->SetStyle( HOURSTYLE_HMAMPM );
$graph->scale->hour->SetIntervall( '0:45' ); 
?>

The example in Figure 16.56. Gantt chart with day and hour scale enabled (gantthourex1.php) below shows a gantt chart with the day and hour scale enabled. In this example we have also added a gradient background to show some formatting options.

Figure 16.56. Gantt chart with day and hour scale enabled (gantthourex1.php)

The SetStyle($aStyle) method supports the following label styles

Example:

1

$graph->scale->day->SetStyle ( DAYSTYLE_LONG );

The graphical formatting possibilities for days allow the possibility to specify a different color for the weekend background and also for the Sunday.

In addition to this there is also a possibility to choose whether or not the weekend background should be extended vertically down over the plot area which is the default. Since that is a property more of the whole plot this behavior is modified with a call to the method

Week scales, if enabled, by default shows the week number in range 1 to 53 (as defined by ISO-8601)

The SetStyle($aStyle) method supports the following label styles

Example:

1

$graph->scale->week->SetStyle(WEEKSTYLE_FIRSTDAY);

The SetStyle($aStyle) method supports the following label styles

Example:

1

$graph->scale->month->SetStyle(MONTHSTYLE_LONGNAME);

Year scale has no extra formatting possibilities it is always displayed as a four digit number , e.g. "2009"

Instances of class GanttBar is created with the constructor

In order to illustrate this we will create a the most basic (and simple ) Gantt chart possible. This will consist of just a chart with one activity bar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php // content="text/plain; charset=utf-8"
require_once ('jpgraph/jpgraph.php');
require_once ('jpgraph/jpgraph_gantt.php');
 
// A new graph with automatic size
$graph = new GanttGraph();
 
//  A new activity on row '0'
$activity = new GanttBar(0,"Activity 1","2001-12-21","2002-01-19");
$graph->Add($activity);
 
// Display the Gantt chart
$graph->Stroke();
?>

Figure 16.57. The simplest possible Gantt graph (ganttex00.php)

The example above will make use of just the default settings for all formatting parameters but still manage to create a perfectly readable Gantt chart with only 4 lines of real code. We can note a couple of things

Lets now take the above simple graph and make a few small alterations.

Figure 16.58. Making some minor alterations to the Gantt graph (ganttex01.php)

To show the effect of row positioning Figure 16.59. Specifying a large vertical position (ganttex03.php) shows the effect of adding a bar to row 7. This will as can be seen create graph that is mostly empty sine row 0-6 have no specified gantt objects.

Figure 16.59. Specifying a large vertical position (ganttex03.php)

The height of the bars can also be adjusted. The horizontal spacing between each bar is based on the highest single bar including the size of the title. By default the height of the bar is 60% of the overall vertical size allocated to each row (all the rows have the same height).

The height of the bar can be specified as either as an absolute number of pixels or as a fraction of the row height. Since by default the bar height is 60% this means that if any single line has, for example, a large title all the rows will be adjusted to the same size and hence the bars will also be adjusted to fill 60% of the new width.

Instances of class Milestone is created with the constructor

Valid milestones are for example

1
2

$ms4 = new MileStone(3, 'Code complete', '2001-12-01'); 
$ms5 = new MileStone(3, 'Ready for test', '2002-01-06');

By default milestones are rendered as a filled "Diamond" shape. This may be optionally modified. The actual shape is specified by the 'mark' property of milestone which is an instance of class PlotMark. See Adding markers to the Gantt bars.

To change the shape of a milestone to, say a triangle, you use the SetType() method as in

1

$ms4->mark->SetType( MARK_DTRIANGLE );

An example of adding a milestone to a gantt graph is shown in Figure 16.60. Adding a milestone marker to a gantt graph (ganttex04.php)

Figure 16.60. Adding a milestone marker to a gantt graph (ganttex04.php)

We note that;

Instances of class GanttVLine is created with the constructor

By default a GanttVLine will cover the entire Gantt area from the top to the bottom. It is also possible to restrict the area that the line is spanning by specifying the start and stop row for the line with a call to the method

If the end row is left out the line will go all the way to the bottom.

Valid creations of lines are for example

1
2
3

$vline1 = new GanttVLine('2001-12-24', 'Phase 1'); 
$vline2 = new GanttVLine('2001-12-28', 'Phase 1', 'darkred', 5, 'dotted'); 
$vline2->SetRowSpan(3); // Start at row index=3 (fourth row) and go all the way to the bottom

In Figure 16.61. Adding a vertical line in the Gantt graph (ganttex06.php) we have created a line with

1
2

$vline = new GanttVLine('2001-12-24', 'Phase 1' );
$graph->Add( $vline );

Figure 16.61. Adding a vertical line in the Gantt graph (ganttex06.php)

We note the following

Figure 16.62. Adjusting the position of the vertical line within the day (ganttex07.php)

Since the position of each activity is specified by row and date there is nothing that prevents adding multiple activity bars to the same row. This observation makes it possible to illustrate breaks in activities during a certain period. Figure 16.63. Adding several activity bars on the same row (gantt_samerowex1.php) shows an example of this

Figure 16.63. Adding several activity bars on the same row (gantt_samerowex1.php)

A common variant is to have some connection between the parts in the broken activity. This can be accomplished by using a special variant of the gantt activity available just for this purpose.

Gantt bars have the following method available

This will draw the gantt bar almost hollow. It will just consist of the top and bottom line of the bar. The idea to illustrate a break is to have a bar of this style during the break. Figure 16.64. Adding a hollow "break" bar (gantt_samerowex2.php) shows an example of this.

Figure 16.64. Adding a hollow "break" bar (gantt_samerowex2.php)

Each gantt bar can have a marker either at the left or to the right of the bar. The markers are accessed through the properties

Since the markers are instances of class PlotMark all the features of this class is available as described in Adding marks to the plot (a.k.a. plot marks) and in Appendix E. Available plot marks.

To give a practical example of the usage of marks we will add a solid filled circle with a title text to the right end of a activity bar by using the following lines

1
2
3
4
5
6
7
8
9
10
11

<?php
// Add a right marker
$activity->rightMark->Show();    
$activity->rightMark->SetType(MARK_FILLEDCIRCLE);
$activity->rightMark->SetWidth(13);
$activity->rightMark->SetColor('red');
$activity->rightMark->SetFillColor('red');
$activity->rightMark->title->Set('M5');
$activity->rightMark->title->SetFont(FF_ARIAL,FS_BOLD,12);
$activity->rightMark->title->SetColor('white');
?>

This would give the effect shown in Figure 16.65. Example of adding a right marker to the activity bar

Figure 16.65. Example of adding a right marker to the activity bar

.

Figure 16.66. A large marker will force the row to become larger since it by default always fills 60% of the allocated height for each row (ganttex08.php)

The pattern and color for an activity bar is specified with the method

The available patterns together with the symbolic names are given in Table 16.1. Gantt bar patterns.

The caption text is a text string that is shown to the right of the activity bar. It can have different usages, for example a common use is to show the initials of the person (or persons) responsible for completing a specific activity.

The caption is accessed through the "$caption" property of the bar. This property is an instance of the Text class and hence inherits all the common text formatting options.

The following line sets the caption to the string "[AG]"

1
2
3
4

<?php
$activity->caption->Set('[AG]')
$activity->caption->SetFont(FF_FONT2,FS_BOLD);
?>

Figure 16.67. Adding a caption to a Gantt bar shows a small cut out from a gantt chart that shows the typical appearance of a gantt bar caption.

Figure 16.67. Adding a caption to a Gantt bar

In addition to specifying the caption as shown above the caption text can also be specified directly when creating a gantt bar as the fifth parameter as the following example shows

1

$activity = new GanttBar(0, 'Activity 1', '2001-11-21', '2001-12-20', '[BS,ER]') ;

In order to specify the distance between the Gantt object and the caption text the method

is used. For example, to increase the margin to 20 pixels for a gantt bar the following line must be added

1

$activity->SetCaptionTitle(20);

To indicate the progress of a specific activity it is also possible to add a progress indicator to each bar. This progress indicator consists of a smaller bar within the bar. By default this progress bar is black and 70% of the height of the bar. These parameter can all be changed.

The properties for the progress indicator are accessed through the 'progress' property and it's methods.

To set the progress for a specific activity you only specify the percent as a fraction (0-1). As in

1

$activity->progress->Set( 0.4 )

In each activity uses the default format for the progress indicator, a solid bar. To make it clearer we have also modified the caption to reflect the displayed progress. (At the same time we also modified the scale headers just to illustrate some more formatting options).

Figure 16.68. Adding progress bars ot the gantt chart (ganttex14.php)

To specify a different format for the progress the following method is used

We can now modify the progress bar above, for example by adding the line

1

$activity->progress->SetPattern( BAND_RDIAG , "blue" );

and we then get the result shown in Figure 16.69. Modifying the format for the progress pattern (ganttex15.php)

Figure 16.69. Modifying the format for the progress pattern (ganttex15.php)

Note: This feature is only available in versions >= 3.0.3 of the library.

When using the method GanttBar::title::SetFont() the same font will be applied to all columns for that particular activity. To specify individual fonts for each column the method GanttBar::title::SetColumnFonts() must be used.

This method accept an array of font arrays where each font array specifies the font family, style and size for that particular column. If fewer fonts specification than columns are given then the remaining columns will be using the default fonts specification (as defined by the SetFont() method).

For example the two lines of code

1
2
3
4

<?php
$bar->title->SetFont(FF_ARIAL,FS_NORMAL,10);
$bar->title->SetColumnFonts(array(array(FF_ARIAL,FS_BOLD,11)));
?>

will cause the first column to be set in a bold font and the remaining columns falling back to the default non-bold font style.

A complete example on how to use this is shown in Figure 16.77. Using different fonts for individual columns (ganttcolumnfontsex01.php) below.

Figure 16.77. Using different fonts for individual columns (ganttcolumnfontsex01.php)

It is possible to add a title that spans all the defined title columns. An example of this is shown in Figure 16.78. Adding a spanning title over all title columns (ganttmonthyearex4.php) . This title is specified with the property "$tableTitle" of the scale. Specifying a table title will automatically adjust the height of the column titles to fit the table title. The small code snippet below shows how to add a title.

1
2
3
4
5
6

<?php
$graph->scale->tableTitle->Set( 'Phase 1' );
$graph->scale->tableTitle->SetFont( FF_ARIAL , FS_NORMAL , 12 );
$graph->scale->SetTableTitleBackground( 'darkgreen@0.6' );
$graph->scale->tableTitle->Show( true );
?>

Figure 16.78. Adding a spanning title over all title columns (ganttmonthyearex4.php)

By default the scale will be just wide enough to fit the chosen scale headers with some small margins on each side. It is possible to adjust the width when using automatic graph sizing by setting a zoom factor for the scale. The default width corresponds to a zoom factor of 1.0.

The zoom factor is adjusted by the method

In the following two examples the same Gantt chart is first shown with a scale factor of 0.7 (=70% of the original width) and in Figure 16.82. A zoom factor of 1.5 (ganttex13-zoom2.php) a zoom factor of 1.5 (=150%) is used.

Figure 16.81. A zoom factor of 0.7 (ganttex13-zoom1.php)

Figure 16.82. A zoom factor of 1.5 (ganttex13-zoom2.php)

The (default) white area in the top left of the gantt table may have a title. This is accessed by the 'tableTitle' property of the gantt scale. Using this is straightforward as the following code snippet shows.

1
2
3
4
5
6

<?php
$graph->scale->tableTitle->Set( '(Rev: 1.22)' );
$graph->scale->tableTitle->SetFont( FF_FONT1 , FS_BOLD );
$graph->scale->SetTableTitleBackground( 'silver' );
$graph->scale->tableTitle->Show (); 
?>

The example lines above also changes the default white background to silver. An example of this is shown in Figure 16.83. Adding a table title in the top left corner (ganttex16.php) . As can be seen the width of the left column which holds all the titles has been adjusted to make it wide enough to fit the table title.

Figure 16.83. Adding a table title in the top left corner (ganttex16.php)

The vertical and horizontal lines between the activity titles and the plot area and the bars can be modified by accessing the vertical divider 'divider' and the horizontal divider 'dividerh' properties of the scale. Figure 16.84. Gantt divider lines shows the exact location of the divider lines.

Figure 16.84. Gantt divider lines

Again, this is straightforward as the following code snippet shows.

1
2
3
4
5
6

<?php
$graph->scale->divider->SetWeight( 3 );
$graph->scale->divider->SetColor( 'navy' );
$graph->scale->dividerh->SetWeight( 3 );
$graph->scale->dividerh->SetColor( 'navy' ); 
?>

An example of this can be seen in Figure 16.85. Adjusting the plot box around the gantt chart (ganttex18.php)

In a similar manner to the other plots in the library the Box around the plot can be modified with the gantt graph method 'GanttGraph::SetBox()' . The following line will result in a thicker plot box around the plot area as can be seen in Figure 16.85. Adjusting the plot box around the gantt chart (ganttex18.php)

1

$graph->SetBox(true, 'navy', 3);

Figure 16.85. Adjusting the plot box around the gantt chart (ganttex18.php)

In order to make large charts easier to read it is possible to specify alternating an horizontal grid and optional alternating line colors in the background for Gantt charts. The horizontal grid is accessed through the Graph::hgrid property and the line (used in the grid) is accessed through the Graph::hgrid::line sub-property.

In order to specify alternating line colors the following method is used

For example, to use an alternating blue background with blue grid line the following lines would have to be added to the graph script

1
2
3
4
5
6

<?php
// Setup a horizontal grid
$graph->hgrid->Show();
$graph->hgrid->line->SetColor( 'lightblue' );
$graph->hgrid->SetRowFillColor( 'darkblue@0.9' ); 
?>

An example,of this is shown in Figure 16.86.  (gantthgridex1.php)

In the same way as for ordinary x-y graphs it is possible to add small images (or icons) to a Gantt graph by creating an instance of class IconPlot and then adding that instance to the graph.

For example the following line will add an icon (similar to what was shown in ??) to a gantt chart with the result shown in Figure 16.86.  (gantthgridex1.php)

1
2
3
4
5

<?php
$icon = new IconPlot('penguin.png' , 0.01 , 0.95 , 1 , 15 );
$icon->SetAnchor('left', 'bottom');
$graph->Add( $icon ); 
?>

Figure 16.86.  (gantthgridex1.php)

By default the library adds 20% margin above and below each activity bar. In order to set the activities closer or further away from each other the method

can be used. For example

1

$graph->SetVMarginFactor(0.0);

will cause the gantt bars to touch each other since there will be no margins. If we instead use

1

$graph->SetVMarginFactor(1.0);

we will in effect get "double-line-spacing" since we add the width of one activity height as margin. The default 40% corresponds to

1

$graph->SetVMarginFactor(0.4);

It is possible to use GanttGraph::SetMargin() to specify the margin for a Gantt graph even when the vertical height is determined automatically. For example to generate a graph with no left, right or bottom margin the following lines would be needed

1
2
3
4

<?php
$graph = new GanttGraph ( 500 );
$graph->SetMargin (0, 0, 30, 0); 
?>

By default the scale will be wide enough to make room for all specified activities. It is however possible to manually set the scale range to limit the size of the Gantt chart.

This is done by calling the method

For example the following code snippet would set the specified start and end date

1

$graph->SetDateRange('2001-12-20', '2002-01-20');

By default Monday is the first day of the week. It is possible to manually set an arbitrary start day by calling the method

In the same way as was described in Adding icons (and small images) to the graph for x-y graphs it is possible to add icons and country flags to a Gantt chart. The following code snippet adds a Norwegian flag to the top left corner of a graph

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php
// Setup the Gantt graph
$graph = new GanttGraph();
 
// Create some activities
// ...
 
$icon = new IconPlot();
$icon->SetAnchor('left','top');
$icon->SetCountryFlag('norway');
$icon->SetPos(5,5);
$icon->SetMix(50);
$icon->SetScale(1.0);
 
// The above four method calls could also have been done as
// $icon->SetCountryFlag('norway', 5,5, 1.0, 50);
 
$graph->Add($icon);
 
// Any other gantt formatting
// ...

The result of adding these lines to a typical Gantt chart is shown in Figure 16.87. Adding a country flag to the top left corner of the gantt graph (ganttex17-flag.php)

Figure 16.87. Adding a country flag to the top left corner of the gantt graph (ganttex17-flag.php)

For more details on adding icons to a graph see Adding icons (and small images) to the graph .

In exactly the same way as was described in Adding arbitrary texts to the graph it is also possible to add arbitrary formatted text paragraphs to the gantt chart.

The position of the text strings is specified as either an absolute position in pixels (as usual the top left corner is (0,0)) or the position can be specified as a scale position with date and row index. The following two method of the text class is used for this

For example the lines below show how to add one text with absolute scale position in the top left corner and one text string at the second row at the date "2002-01.01"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
// Add text to top left corner of graph
$txt1 = new Text();
$txt1->SetPos(5,2);
$txt1->Set("Note:\nEstimate done w148");
$txt1->SetFont(FF_ARIAL,FS_BOLD,12);
$txt1->SetColor('darkred');
$graph->Add($txt1);
 
// Add text to the top bar
$txt2 = new Text();
$txt2->SetScalePos('2002-01-01',1);
$txt2->SetFont(FF_ARIAL,FS_BOLD,12);
$txt2->SetAlign('left','center');
$txt2->Set("Remember this!");
$txt2->SetBox('yellow');
$graph->Add($txt2);
?>

The result of adding these lines to a typical gantt graph is shown in Figure 16.88. Adding two text objects to a Gantt graph (gantt_textex1.php)

Figure 16.88. Adding two text objects to a Gantt graph (gantt_textex1.php)

Since there is no other changes in functionality we refer to Adding arbitrary texts to the graph for a full discussion of text paragraph features.

Gantt charts can have independent (different targets) hot spots in both the activities and in the associated title (or titles) for each activity. For activities both activity bars and milestones support CSIM functionality.

The targets and the associated "Alt" text for an activity bar is set by using one or both of the methods

The following code snippet sets CSIM targets fro bot the entire activity bar as well as the title

1
2

$bar->SetCSIMTarget( "http://localhost/abc/", "Alt Text for the bar" );
$bar->title->SetCSIMTarget( "http://localhost/abc", "Alt Text for the title" );

The following properties of a Gantt object can have CSIM targets

In exactly the same way as for a single title it is possible to specify individual CSIM targets for each of the title columns. This is accomplished by specifying an array for both the target and the alt text instead of a single string as arguments for SetCSIMTarget() The following code snippet shows how to specify that.

1
2
3

$bar->title->SetCSIMTarget(
    array('sometarget1.html', 'sometarget1.html'),
    array('alttext1', 'alttext2'));