Contents Previous Next

## 9.3 A simple Gantt chart

Time to show you an example of a Gantt chart and how easy it is to make one. Lets make it the simplest possible Gantt chart. One activity, named "Project", which lasts from "2001-11-01" to "2002-02-20".

All it takes to do this (using default values for everything) is the following code.

(File: ganttex00.php)
`<?php
include ( "../jpgraph.php");
include ("../jpgraph_gantt.php");
// A new graph with automatic size
$graph = new GanttGraph (0,0, "auto");
// A new activity on row '0'
$activity = new GanttBar (0,"Project", "2001-12-21", "2002-01-20");
$graph->Add( $activity);
// Display the Gantt chart
$graph->Stroke();
?>
`

The resulting image is shown in Figure 147 below.

Figure 147: Your first simple Gantt chart. [src]

Let's note a few things with the above image and code:

- You always need to include both jpgraph.php and jpgraph_gantt.php
- A bar is specified a minimum of four parameters, vertical position (more about that in a second), a title, start and end date.
- If you don't specify a size for the image it will be automatically decided based on the min and max dates for the bars rounded to a full week.
- By default the week and day scale are displayed.
- Weekend background are displayed default in a slightly gray color
- Sundays are written in red.
- Weeks are numbered according to ISO 8601
- Activity bars are rendered as blue stripes on a white background by default.

So, lets start making this graph a little bit more interesting. First we are going to add a title, then we will add a month scale and finally we will change the color of the bar.

All that is taken care of in the code below.

(File: ganttex01.php)
`<?php
include ( "../jpgraph.php");
include ("../jpgraph_gantt.php");
$graph = new GanttGraph (0,0, "auto");
$graph->SetShadow();
// Add title and subtitle
$graph->title-> Set( "A nice main title");
$graph->title-> SetFont( FF_ARIAL, FS_BOLD,12);
$graph->subtitle-> Set( "(Draft version)");
// Show day, week and month scale
$graph->ShowHeaders( GANTT_HDAY | GANTT_HWEEK | GANTT_HMONTH);
// Instead of week number show the date for the first day in the week
// on the week scale
$graph->scale-> week->SetStyle(WEEKSTYLE_FIRSTDAY);
// Make the week scale font smaller than the default
$graph->scale-> week->SetFont(FF_FONT0 );
// Use the short name of the month together with a 2 digit year
// on the month scale
$graph->scale-> month-> SetStyle( MONTHSTYLE_SHORTNAMEYEAR2);
// Format the bar for the first activity
// ($row,$title,$startdate,$enddate)
$activity = new GanttBar (0,"Project", "2001-12-21", "2002-01-20");
// Yellow diagonal line pattern on a red background
$activity ->SetPattern(BAND_RDIAG, "yellow");
$activity ->SetFillColor ("red");
// Finally add the bar to the graph
$graph->Add( $activity);
// ... and display it
$graph->Stroke();
?>
`
The resulting image is shown in Figure 148 below.
Figure 148: Making the Gantt chart a little bit more interesting with title and more colors. [src]

From the above example you might note a few things

- The margins adjust automatically to the added title and subtitle
- The height of the scale headers adjust automatically when you change the font.
- You have great flexibility in choosing what format the scale labels will have. If you for example wanted the full 4 digit year in the month header all you have to change is use the constant MONTHSTYLE_SHORTNAMEYEAR2 in the code above to MONTHSTYLE_SHORTNAMEYEAR4
- You have full freedom of manipulating headers in terms of font, color, background and size.

To show that this is really simple let's show the full year in the month, and set the header style to be white text on a dark blue background by adding the lines

`// Use the short name of the month together with a 4 digit year
// on the month scale
$graph->scale-> month-> SetStyle( MONTHSTYLE_SHORTNAMEYEAR4);
$graph->scale-> month-> SetTextColor( "white");
$graph->scale-> month-> SetBackgroundColor( "blue");`

to the code above. The resulting image is shown in Figure 149

Figure 149: Enhancing the scale headers. [src]

Contents Previous Next