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:

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

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