deon/phptsmadmin
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
This repository has been archived on 2024-04-08. You can view files and clone it, but cannot push or open issues or pull requests.
fc2ffd7bad
phptsmadmin/includes/jpgraph/docs/chunkhtml/ch16s04.html
Deon George 21b013e3ba Added JPGraph v3.5.0b1
2011-05-28 19:51:52 +10:00

2384 lines
211 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Gantt charts</title><link rel="stylesheet" type="text/css" href="manual.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.0"><link rel="home" href="index.html" title="JpGraph Manual"><link rel="up" href="ch16.html" title="Chapter 16. Non-Linear graph types"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Gantt charts</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 16. Non-Linear graph types</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Gantt charts"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="sec.gantt-charts"></a>Gantt charts</h2></div></div></div>
<p>Gantt charts are used to give an easy overview of the extension in time of one or several
activities (possible grouped). In addition the gantt chart can show an ordinal relation
between one or several activities such as "<span class="italic">activity A needs to be
finished before activity B can start</span>". </p>
<p>The shape of each activity can also be adjusted as well as color and size. Some of the
capabilities of the Gantt module in the library are listed below.</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><span class="bold"><strong>Overall gantt graph features</strong></span></p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem">
<p>Visualization of constraints between activities, start-to-start,
start-to-end, end-to-start and end-to-end</p>
</li><li class="listitem">
<p>Unlimited number of activities (up to memory and time constrains
of PHP)</p>
</li><li class="listitem">
<p>Full support for independent CSIM for both labels and activity
bars</p>
</li><li class="listitem">
<p>Support for visualization of grouped activities</p>
</li><li class="listitem">
<p>Gantt charts can be automatically sized according to the number of
bars and scale used. </p>
</li><li class="listitem">
<p>Supports title and subtitle with user specified font, size and
color</p>
</li><li class="listitem">
<p>Supports vertical marker lines with text</p>
</li><li class="listitem">
<p>Full support for CSIM (or drill down graphs)</p>
</li><li class="listitem">
<p>Alternate row colors</p>
</li></ul></div><p>
</p>
</li><li class="listitem">
<p><span class="bold"><strong>Scale features</strong></span></p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem">
<p>Both automatic and fully automatic scale</p>
</li><li class="listitem">
<p>Flexible scale with options to display up to 6 lines of scale
headers (year,month,week,day,hour,minute)</p>
</li><li class="listitem">
<p>Supports platform independent Week number calculation according to
ISO:8601</p>
</li><li class="listitem">
<p>Scales grids are intelligent not to overwrite smaller resolution
scales</p>
</li><li class="listitem">
<p>Scale headers can be localized</p>
</li><li class="listitem">
<p>Full user configurable scales</p>
</li><li class="listitem">
<p>Each scale header is configurable in terms of font, size, color,
background, grid lines etc.</p>
</li></ul></div><p>
</p>
</li><li class="listitem">
<p><span class="bold"><strong>Activity bars</strong></span></p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem">
<p>can have multiple patterns and colors</p>
</li><li class="listitem">
<p>can have progress indicators</p>
</li><li class="listitem">
<p>can have drop shadow</p>
</li><li class="listitem">
<p>titles can have individual fonts, colors and backgrounds</p>
</li><li class="listitem">
<p>can have captions</p>
</li><li class="listitem">
<p>can have specified left- and right end markers</p>
</li><li class="listitem">
<p>heights can be specified in absolute pixels or in percent of the
activity line width</p>
</li></ul></div><p>
</p>
</li><li class="listitem">
<p><span class="bold"><strong>Milestones</strong></span></p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem">
<p>can have user selectable shape and color</p>
</li><li class="listitem">
<p>titles can have individual fonts, colors and backgrounds</p>
</li><li class="listitem">
<p>can have captions</p>
</li></ul></div><p>
</p>
</li></ul></div><p>
</p>
<p>An example of a small Gantt chart is shown in <a class="xref" href="ch16s04.html#fig.ganttmonthyearex2" title="Figure 16.53. A typical small Gantt chart (ganttmonthyearex2.php)">Figure 16.53. A typical small Gantt chart <code class="uri"><a class="uri" href="example_src/ganttmonthyearex2.html" target="_top">(<code class="filename">ganttmonthyearex2.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.ganttmonthyearex2"></a><p class="title"><b>Figure 16.53. A typical small Gantt chart <code class="uri"><a class="uri" href="example_src/ganttmonthyearex2.html" target="_top">(<code class="filename">ganttmonthyearex2.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttmonthyearex2.png" alt="A typical small Gantt chart (ganttmonthyearex2.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>The remainder of this section will be used to discuss most of the formatting options for
Gantt charts.</p>
<div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>There is one restrictions of the date scale and that is that it cannot have any
"holes" the dates must be continues.</p>
</div>
<div class="sect2" title="The structure of a Gantt chart"><div class="titlepage"><div><div><h3 class="title"><a name="id2570143"></a>The structure of a Gantt chart</h3></div></div></div>
<p>To understand the terminology used for Gantt chart <a class="xref" href="ch16s04.html#fig.gantt-building-blocks" title="Figure 16.54. Building block of a Gantt chart">Figure 16.54. Building block of a Gantt chart</a> shows a typical chart with indications of
the name of each main building block of the chart.</p>
<p>
</p><div class="figure"><a name="fig.gantt-building-blocks"></a><p class="title"><b>Figure 16.54. Building block of a Gantt chart</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/gantt-properties-original-amended-small.png" alt="Building block of a Gantt chart"></div>
</div></div><p><br class="figure-break">
</p>
<p>In addition to the specific Gantt formatting that will be discussed in the following
sections all the previously explained graph embellishment like the options of adding
texts, icons, changing font and color of titles, adding footers etc. are also available
for Gantt charts.</p>
<p>A Gantt chart is made up of four distinct areas:</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>On the left side there is the activity title column.</p>
</li><li class="listitem">
<p>On the top there is the scale headers (up to six headers may be
displayed)</p>
</li><li class="listitem">
<p>The actual plot area where all the activity Gantt bars and markers are
placed</p>
</li><li class="listitem">
<p>The margin area, where for example the titles are shown</p>
</li></ol></div><p>
</p>
<p>The steps to crate a Gantt charts is similar to creating a cartesian plot. First an
instance of the main graph canvas is created (as an instance of <code class="code">class
GanttGraph</code>) and then one or more "plots" are created an added to the graph.
For Gantt graph the "plots" that can be added are typically</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>Activity bars (we will also use the name Gantt bars as synonym) that
indicates the length (and possible progress) of one activity. An activity
bar is created as an instance of <code class="code">class GanttBar</code></p>
</li><li class="listitem">
<p>Milestone marks, this can be thought of as a special activity bar with
length = 0 and is often used to indicate a milestone or a deadline in the
Gantt chart. A milestone is created as an instance of <code class="code">class
Milestone</code></p>
</li><li class="listitem">
<p>A phase divider, this is a vertical line that can be added at specific
dates and is often used to mark then end and beginning of phases i a
project. A divider is created as an instance of <code class="code">class
GanttVLine</code> (for Gantt Vertical Line)</p>
</li><li class="listitem">
<p>A background pattern for a specific date range, this is often used to
indicate holidays, public holidays or periods of special interest in the
project</p>
</li><li class="listitem">
<p>An arbitrary icon, this is either a predefined image or one of the built
in markers in the library. This is created as an instance of <code class="code">class
IconImage</code></p>
</li></ul></div><p>
</p>
<p>All these objects may be extensively modified in terms of formatting., colors (both
fill- and frame color), size, titles, style and patterns etc. All objects have basic
default values so it is not strictly speaking necessary to adjust them. However, the
basic default values will give the charts a very simple look.</p>
</div>
<div class="sect2" title="Creating a Gantt graph"><div class="titlepage"><div><div><h3 class="title"><a name="id2570178"></a>Creating a Gantt graph</h3></div></div></div>
<p>In order to create a Gantt graph the module "<code class="filename">jpgraph_gantt.php</code>"
must be included together with the core module "<code class="filename">jpgraph.php</code>"</p>
<p>A Gantt graph is created as an instance of <code class="code">class GanttGraph</code> which
inherits much of the same formatting options available for standard x-y graphs, for
example titles, backgrounds, adding icons, adding texts and so on.</p>
<p>There is one crucial difference between all the other graph types and Gantt charts and
that is the fact that for all other graphs both the height and width of the graph must
be specified. For Gantt graphs this is not true. </p>
<p>Gantt graphs can be either </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>fully automatically sized</p>
</li><li class="listitem">
<p>have the width specified but the height automatically determined by the
number of activities added to the graph</p>
</li><li class="listitem">
<p>fully specified with both width and height</p>
</li></ul></div><p>
</p>
<p>This means that all the following gantt graph creations are valid</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Fully automatic</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$ganttgraph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">GanttGraph</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Semi automatic (automatically determined height)</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$ganttgraph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">GanttGraph</span><span class="hl-brackets">(</span><span class="hl-number">800</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Fully manual</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$ganttgraph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">GanttGraph</span><span class="hl-brackets">(</span><span class="hl-number">800</span><span class="hl-code">,</span><span class="hl-number">500</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>If the specified width and height is too small to have room for all the
activities specified the activities will be clipped to the specified date
range.</p>
</div><p>
</p>
<p>The creation of a full Gantt graph follows the now familiar pattern of</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>Create the graph (as shown above) and specify the overall formatting
options (e.g. titles, colors etc)</p>
</li><li class="listitem">
<p>Create the plot objects that should be added to the graph (e.g. activity
bars, milestones, icons, texts etc) and format them as wanted</p>
</li><li class="listitem">
<p>Add the object to the graph, with a call to
<code class="code">GanttGraph::Add()</code>, i.e. the activities, milestones etc.</p>
</li><li class="listitem">
<p>Send the graph back to the client or save it directly to a file, with a
call to <code class="code">GanttGraph::Stroke()</code></p>
</li></ol></div><p>
</p>
<div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>Even though there is no limit for the size of the Gantt chart (apart from
available memory and execution time limit specified in
"<code class="filename">php.ini</code>") the library defines two constants
<code class="code">MAX_GANTTIMG_SIZE_W</code> and <code class="code">MAX_GANTTIMG_SIZE_H</code> that sets
the maximum allowed image size for a Gantt chart. This is primarily meant to
discover scripts gone wrong that tries to make very large images (perhaps by some
non-properly terminating loops). If the overall image size becomes larger than these
limit an error message will be shown.</p>
</div>
</div>
<div class="sect2" title="Adjusting the scale headers"><div class="titlepage"><div><div><h3 class="title"><a name="id2570317"></a>Adjusting the scale headers</h3></div></div></div>
<p>A gantt chart must always have at least one scale header and at most six scale headers
(see <a class="xref" href="ch16s04.html#fig.gantt-building-blocks" title="Figure 16.54. Building block of a Gantt chart">Figure 16.54. Building block of a Gantt chart</a>). Usually it is not advisable to
use more than three scale headers at the same time. Having multiple scale headers allow
the specification of the same date range but with different resolutions.</p>
<p>The library makes six different scale headers available which is identified by a
symbolic constant that is logically combined to specify the wanted headers using the
method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttGraph::ShowHeaders($aHeaderSelection)</code></p>
</li></ul></div><p>
</p>
<p>The <code class="code">$aHeaderSelection</code> argument is a binary combination of one or more of
the following specifiers that indicates the interval used in the header</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>GANTT_HMIN, Minute interval header (See <a class="xref" href="ch16s04.html#sec.minute-scale-header" title="Minute scale">Minute scale</a> for label format options)</p>
</li><li class="listitem">
<p>GANTT_HHOUR, Hour interval header (See <a class="xref" href="ch16s04.html#sec.hour-scale-header" title="Hour scale">Hour scale</a> for label format options)</p>
</li><li class="listitem">
<p>GANTT_HDAY, Day interval header (See <a class="xref" href="ch16s04.html#sec.day-scale-header" title="Day scale">Day scale</a> for label format options)</p>
</li><li class="listitem">
<p>GANTT_HWEEK, Week interval header (See <a class="xref" href="ch16s04.html#sec.week-scale-header" title="Week scale">Week scale</a> for label format options)</p>
</li><li class="listitem">
<p>GANTT_HMONTH, Month interval header (See <a class="xref" href="ch16s04.html#sec.month-scale-header" title="Month scale">Month scale</a> for label format options)</p>
</li><li class="listitem">
<p>GANTT_HYEAR, Year interval header (See <a class="xref" href="ch16s04.html#sec.year-scale-header" title="Year scale">Year scale</a> for label format options)</p>
</li></ol></div><p>
</p>
<p>For example to show a year, month and week header the following line would be
used</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;ShowHeaders( GANTT_HYEAR | GANTT_HMONTH | GANTT_HWEEK );</span></pre></td></tr></table></div><p>
</p>
<p>Any combination of the listed headers above can be used. The scale headers will always
be drawn with the larger header rage on top ot a header with smaller range.</p>
<p>Scale headers week, day, hour , minute have a minimum span of 1 unit. This means that
if, for example, the week header is displayed the minimum width of the overall scale is
one week.</p>
<p>
</p><div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
<p>The overall minimum size of the scale regardless of what scale headers are
displayed is one day. This means that it is not possible to just create a Gantt
graph with , say 6 hour.</p>
</div><p>
</p>
<p>Specifying the wanted headers is the first step in controlling the header. The next
step is to specify the format that should be used to print the date label in each of the
selected headers. For example the week interval header will have a label at the start of
every week. This could for example be indicated as week number, day of month, full date
and so on. In order to adjust the headers the appropriate header instance variable must
be access. The header instance variables are</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p><code class="code">Graph::scale::minute</code></p>
</li><li class="listitem">
<p><code class="code">Graph::scale::hour</code></p>
</li><li class="listitem">
<p><code class="code">Graph::scale::day</code></p>
</li><li class="listitem">
<p><code class="code">Graph::scale::week</code></p>
</li><li class="listitem">
<p><code class="code">Graph::scale::month</code></p>
</li><li class="listitem">
<p><code class="code">Graph::scale::year</code></p>
</li></ol></div><p>
</p>
<p>The connection with the scale headers are shown in <a class="xref" href="ch16s04.html#fig.gantt-scale-headers" title="Figure 16.55. The Gantt scale properties">Figure 16.55. The Gantt scale properties</a> which shows a cut out part of a larger gantt
chart</p>
<p>
</p><div class="figure"><a name="fig.gantt-scale-headers"></a><p class="title"><b>Figure 16.55. The Gantt scale properties</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/gantt-scale-headers-amended.png" alt="The Gantt scale properties"></div>
</div></div><p><br class="figure-break">
</p>
<p>All the headers are an instance of <code class="code">class HeaderProperty</code> and supports the
following formatting methods</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">HeaderProperty::SetFont($aFontFamily,$aFontStyle,$aFontSize)</code></p>
<p>Specify the font to be used for the label</p>
</li><li class="listitem">
<p><code class="code">HeaderProperty::SetFontColor($aColor)</code></p>
<p>Specify the font color to use</p>
</li><li class="listitem">
<p><code class="code">HeaderProperty::SetStyle($aStyle)</code></p>
<p>The style depends on the actual header and all available styles for each
header are shown below. The style specifies the format used for the scale
header label</p>
</li><li class="listitem">
<p><code class="code">HeaderProperty::SetBackgroundColor($aColor)</code></p>
<p>Set the header background color</p>
</li><li class="listitem">
<p><code class="code">HeaderProperty::SetFrameWeight($aWeight)</code></p>
<p>Specify the weight of the frame around the scale header</p>
</li><li class="listitem">
<p><code class="code">HeaderProperty::SetTitleVertMargin($aMargin)</code></p>
<p>Specifies the margin between this header and the next header (usually
there is no need to adjust this)</p>
</li><li class="listitem">
<p><code class="code">HeaderProperty::SetInterval($aInterval)</code></p>
<p>Specifies the interval between each scale label. For example specifying </p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;scale-&gt;hour-&gt;SetInterval(6);</span></pre></td></tr></table></div><p>
</p>
<p>Will step the hour label 6 hours for each label</p>
</li></ul></div><p>
</p>
<p>So for example to set the font of the month header the following line would be
used</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$ganttgraph-&gt;scale-&gt;month-&gt;SetFont(FF_ARIAL,FS_NORMAL,10);</span></pre></td></tr></table></div><p>
</p>
<p>In addition to these methods each scale also has the property '<code class="code">$grid</code>'
which determines the appearance of grid lines for that specific scale. It is possible to
adjust the appearance of the grid lines by the "normal" line methods, i.e. </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">SetColor($aColor)</code>, Set the grid color</p>
</li><li class="listitem">
<p><code class="code">SetWeight($aWeight)</code>, Set the grid line weight</p>
</li><li class="listitem">
<p><code class="code">SetStyle($aLineStyle)</code>, Set the grid line style, i.e.
"<code class="code">solid</code>", "<code class="code">dotted</code>", "<code class="code">dashed</code>",
"<code class="code">long-dashed</code>"</p>
</li><li class="listitem">
<p><code class="code">Show($aFlg=true)</code>, Enable the grid line</p>
</li></ul></div><p>
</p>
<p>So for example to enable the week grid line and set it to red color the following
lines would be needed</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;scale-&gt;week-&gt;grid-&gt;Show();
$graph-&gt;scale-&gt;week-&gt;grid-&gt;SetColor( 'red' );</span></pre></td></tr></table></div><p>
</p>
<p>The automatic grid lines have some "intelligence" so that higher resolution scales
will not cut through part ways of scale headers with lower resolution (such as a year
grid line cutting through the middle of a week).</p>
<p>
</p><div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
<p>It is possible to specify a zoom factor for the scale that adjusts how wide
the automatic sized header should be. See <a class="xref" href="ch16s04.html#sec.zoom-factor" title="Adjusting the scale zoom factor">Adjusting the scale zoom factor</a>
for more details.</p>
</div><p>
</p>
<div class="sect3" title="Minute scale"><div class="titlepage"><div><div><h4 class="title"><a name="sec.minute-scale-header"></a>Minute scale</h4></div></div></div>
<p>Minute scale is enabled by adding the <code class="code">GANTT_HMIN</code> in the
<code class="code">GanttGraph::ShowHeaders()</code> call, for example as the following line
shows</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph -&gt; ShowHeaders ( GANTT_HDAY | GANTT_HHOUR | GANTT_HMIN );</span></pre></td></tr></table></div><p>
</p>
<p>The <code class="code">SetStyle($aStyle)</code> method supports the following label
styles</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">MINUTESTYLE_MM</code></p>
<p>This will display minutes as a two digit number with a leading zero if
necessary</p>
</li><li class="listitem">
<p><code class="code">MINUTESTYLE_CUSTOM</code></p>
<p>This will let you specify you own custom minute style by making a call
to <code class="code">HeaderProperty:: SetFormatString()</code></p>
<p>The format string is specified as a format string for the
<code class="code">date()</code> function (See <code class="uri"><a class="uri" href="http://php.net/manual/en/function.date.php" target="_top">PHP
Manual</a></code>)</p>
</li></ul></div><p>
</p>
</div>
<div class="sect3" title="Hour scale"><div class="titlepage"><div><div><h4 class="title"><a name="sec.hour-scale-header"></a>Hour scale</h4></div></div></div>
<p>Minute scale is enabled by adding the <code class="code">GANTT_HHOUR</code> in the
<code class="code">GanttGraph::ShowHeaders()</code> call, for example as the following line
shows</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph -&gt; ShowHeaders ( GANTT_HDAY | GANTT_HHOUR | GANTT_HMIN );</span></pre></td></tr></table></div><p>
</p>
<p>The <code class="code">SetStyle($aStyle)</code> method supports the following label
styles</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">HOURSTYLE_HM24</code></p>
<p>Will display the only the hour in military time 0-24 , for example
13:00</p>
</li><li class="listitem">
<p><code class="code">HOURSTYLE_H24</code></p>
<p>Will display the hour with both hour and minute in military time 0-24,
for example 13</p>
</li><li class="listitem">
<p><code class="code">HOURSTYLE_HMAMPM</code></p>
<p>Will display the hour and minutes with a suitable am/pm postfix, for
example 1:30pm</p>
</li><li class="listitem">
<p><code class="code">HOURSTYLE_HAMPM</code></p>
<p>Will display only the hour with a suitable am/pm postfix, for example
1pm</p>
</li><li class="listitem">
<p><code class="code">HOURSTYLE_CUSTOM</code></p>
<p>Custom defined format as specified with a call to
<code class="code">HeaderProperty::SetFormatString()</code></p>
<p>The format string is specified as a format string for the
<code class="code">date()</code> function (See <code class="uri"><a class="uri" href="http://php.net/manual/en/function.date.php" target="_top">PHP
Manual</a></code>)</p>
</li></ul></div><p>
</p>
<p>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".</p>
<p>The code snippet below shows hot to set up a hour scale to with 45 minutes
interval and custom colors</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">hour</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetBackgroundColor</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">lightyellow:1.5</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">hour</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">FF_FONT1</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">hour</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetStyle</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">HOURSTYLE_HMAMPM</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">hour</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetIntervall</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">0:45</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>The example in <a class="xref" href="ch16s04.html#fig.gantthourex1" title="Figure 16.56. Gantt chart with day and hour scale enabled (gantthourex1.php)">Figure 16.56. Gantt chart with day and hour scale enabled <code class="uri"><a class="uri" href="example_src/gantthourex1.html" target="_top">(<code class="filename">gantthourex1.php</code>)</a></code> </a> 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.</p>
<p>
</p><div class="figure"><a name="fig.gantthourex1"></a><p class="title"><b>Figure 16.56. Gantt chart with day and hour scale enabled <code class="uri"><a class="uri" href="example_src/gantthourex1.html" target="_top">(<code class="filename">gantthourex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/gantthourex1.png" alt="Gantt chart with day and hour scale enabled (gantthourex1.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect3" title="Day scale"><div class="titlepage"><div><div><h4 class="title"><a name="sec.day-scale-header"></a>Day scale</h4></div></div></div>
<p>The <code class="code">SetStyle($aStyle)</code> method supports the following label
styles</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">DAYSTYLE_ONELETTER</code>, </p>
<p>On letter week day. Example "M"</p>
</li><li class="listitem">
<p><code class="code">DAYSTYLE_LONG</code>, </p>
<p>Full week day. Example "Monday"</p>
</li><li class="listitem">
<p><code class="code">DAYSTYLE_LONGDAYDATE1</code>, </p>
<p>Day with date. Example "Monday 23 Jun"</p>
</li><li class="listitem">
<p><code class="code">DAYSTYLE_LONGDAYDATE2</code>, </p>
<p>Day with date+year. Example "Monday 23 Jun 2003"</p>
</li><li class="listitem">
<p><code class="code">DAYSTYLE_SHORT</code>, </p>
<p>Short date. Example "Mon"</p>
</li><li class="listitem">
<p><code class="code">DAYSTYLE_SHORTDAYDATE1</code>, </p>
<p>Short date+date. Example "Mon 23/6"</p>
</li><li class="listitem">
<p><code class="code">DAYSTYLE_SHORTDAYDATE2</code>, </p>
<p>Short date+date. Example "Mon 23 Jun"</p>
</li><li class="listitem">
<p><code class="code">DAYSTYLE_SHORTDAYDATE3</code>,</p>
<p>Short date+date. Example "Mon 23"</p>
</li><li class="listitem">
<p><code class="code">DAYSTYLE_SHORTDATE1</code>, </p>
<p>Short date. Example "23/6"</p>
</li><li class="listitem">
<p><code class="code">DAYSTYLE_SHORTDATE2</code>, </p>
<p>Short date. Example "23 Jun"</p>
</li><li class="listitem">
<p><code class="code">DAYSTYLE_SHORTDATE3</code>, </p>
<p>Short date. Example "Mon 23"</p>
</li><li class="listitem">
<p><code class="code">DAYSTYLE_SHORTDATE4</code>, </p>
<p>Short date. Example "23"</p>
</li><li class="listitem">
<p><code class="code">DAYSTYLE_CUSTOM</code>, </p>
<p>Custom specified formatting string. Example "%A"</p>
<p>The format string is specified as a format string for the
<code class="code">strftime()</code> function (See <code class="uri"><a class="uri" href="http://php.net/manual/en/function.strftime.php" target="_top">PHP
Manual</a></code>)</p>
<p>
</p><div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
<p>Note that the day format string is a format string for
<code class="code">strftime()</code> while the format string for hour and
minutes are given as a format string for the <code class="code">date()</code>
function. This inconsistency purely exists for historic reasons
and is kept not to break existing scripts.</p>
</div><p>
</p>
</li></ul></div><p>
</p>
<p><span class="bold"><strong>Example:</strong></span></p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;scale-&gt;day-&gt;SetStyle ( DAYSTYLE_LONG );</span></pre></td></tr></table></div><p>
</p>
<p>The graphical formatting possibilities for days allow the possibility to specify a
different color for the weekend background and also for the Sunday.</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">HeaderProperty::SetWeekendColor($aColor)</code></p>
<p>Set the background color for weekends. (Defaults to light gray)</p>
</li><li class="listitem">
<p><code class="code">HeaderProperty::SetSundayFontColor($aColor)</code></p>
<p>The Sunday font color. (Defaults to red)</p>
</li></ul></div><p>
</p>
<p>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</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttScale::UseWeekendBackground($aFlg=true) </code></p>
<p><span class="bold"><strong>Example:</strong></span></p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">// Don't use background for weekend in the plot area
$graph-&gt;scale-&gt;UseWeekendBackground(false);</span></pre></td></tr></table></div><p>
</p>
</li></ul></div><p>
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>The actual text displayed is dependent on the Locale used. See <a class="xref" href="ch16s04.html#sec.gantt-localizing" title="Localizing the Gantt chart scale">Localizing the Gantt chart scale</a></p>
</div><p>
</p>
</div>
<div class="sect3" title="Week scale"><div class="titlepage"><div><div><h4 class="title"><a name="sec.week-scale-header"></a>Week scale</h4></div></div></div>
<p>Week scales, if enabled, by default shows the week number in range 1 to 53 (as
defined by ISO-8601)</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>It might be worth pointing out here that the week number calculation is
carried out within the library and does not rely on the underlying OS date
libraries. This makes the behavior consistent over several OS:s (at least MS
Windows does not comply to ISO-8601 or supply any way of doing this through
the normal libraries, e.g. <code class="code">strftime()</code>)</p>
</div><p>
</p>
<p>The <code class="code">SetStyle($aStyle)</code> method supports the following label
styles</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">WEEKSTYLE_WNBR</code></p>
<p>Show week number. To further modify the formatting of the actual week
number it is possible to optionally supply a format string with a call
to</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem">
<p><code class="code">HeaderProperty::SetLabelFormatString($aFormat)</code></p>
<p>The format for this string is the same format used for the
<code class="code">sprintf()</code> function and formats the week
number given as an integer.</p>
<p>
</p><div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
<p>Note that the day format string is a format string
for <code class="code">sprintf()</code> while the format string
for hour and minutes are given as a format string
for the <code class="code">date()</code> function. This
inconsistency purely exists for historic reasons and
is kept not to break existing scripts.</p>
</div><p>
</p>
</li></ul></div><p>
</p>
</li><li class="listitem">
<p><code class="code">WEEKSTYLE_FIRSTDAY</code></p>
<p>Show date of first day in week.</p>
</li><li class="listitem">
<p><code class="code">WEEKSTYLE_FIRSTDAY2</code></p>
<p>Show date of first day in week and short month</p>
</li><li class="listitem">
<p><code class="code">WEEKSTYLE_FIRSTDAYWNBR</code></p>
<p>Show week number of first day in week.</p>
</li><li class="listitem">
<p><code class="code">WEEKSTYLE_FIRSTDAY2WNBR</code></p>
<p>Show week number of first day in week and month</p>
</li></ul></div><p>
</p>
<p><span class="bold"><strong>Example:</strong></span></p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;scale-&gt;week-&gt;SetStyle(WEEKSTYLE_FIRSTDAY);</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>The actual text displayed for month is dependent on the Locale used. See
<a class="xref" href="ch16s04.html#sec.gantt-localizing" title="Localizing the Gantt chart scale">Localizing the Gantt chart scale</a></p>
</div><p>
</p>
</div>
<div class="sect3" title="Month scale"><div class="titlepage"><div><div><h4 class="title"><a name="sec.month-scale-header"></a>Month scale</h4></div></div></div>
<p>The <code class="code">SetStyle($aStyle)</code> method supports the following label
styles</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">MONTHSTYLE_SHORTNAME</code></p>
<p>Display the month name in its locale specific short form, i.e Jan, Feb
etc</p>
</li><li class="listitem">
<p><code class="code">MONTHSTYLE_SHORTNAMEYEAR2</code></p>
<p>Display the month name in its locale specific short form together with
a 2 digit year , i.e Jan '01, Feb '01 etc</p>
</li><li class="listitem">
<p><code class="code">MONTHSTYLE_SHORTNAMEYEAR4</code></p>
<p>Display the month name in its locale specific short form together with
a 4 digit year , i.e Jan 2001, Feb 2001 etc</p>
</li><li class="listitem">
<p><code class="code">MONTHSTYLE_LONGNAME</code></p>
<p>Display the month name in its locale specific long name, i.e. January,
February</p>
</li><li class="listitem">
<p><code class="code">MONTHSTYLE_LONGNAMEYEAR2</code></p>
<p>Display the month name in its locale specific long name together with
a 2 digit year , i.e January '01, February '01 etc</p>
</li><li class="listitem">
<p><code class="code">MONTHSTYLE_LONGNAMEYEAR4</code></p>
<p>Display the month name in its locale specific long name together with
a 4 digit year , i.e January 2001, February 2001 etc</p>
</li><li class="listitem">
<p><code class="code">MONTHSTYLE_FIRSTLETTER</code></p>
<p>The first letter of the month name</p>
</li></ul></div><p>
</p>
<p><span class="bold"><strong>Example:</strong></span></p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;scale-&gt;month-&gt;SetStyle(MONTHSTYLE_LONGNAME);</span></pre></td></tr></table></div><p>
</p>
</div>
<div class="sect3" title="Year scale"><div class="titlepage"><div><div><h4 class="title"><a name="sec.year-scale-header"></a>Year scale</h4></div></div></div>
<p>Year scale has no extra formatting possibilities it is always displayed as a four
digit number , e.g. "<code class="code">2009</code>"</p>
</div>
</div>
<div class="sect2" title="Adding gantt objects to the chart"><div class="titlepage"><div><div><h3 class="title"><a name="id2570487"></a>Adding gantt objects to the chart</h3></div></div></div>
<p>Gantt objects are primarily instances of one of two classes</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p><code class="code">class GanttBar</code></p>
<p>This is the main activity added to a Gantt chart to show the extension in
time of one activity, a gantt bar</p>
</li><li class="listitem">
<p><code class="code">class Milestone</code></p>
<p>This activity is a special case of an activity with zero extension,
usually indicating a milestone or a deadline</p>
</li><li class="listitem">
<p><code class="code">class VLine</code></p>
<p>This is similar so a millstone as it has no extension in time. Instead
this object is visually represented as a vertical line that crosses the
entire graph plot area. This is often used to mark, for example, phases in a
project.</p>
</li></ol></div><p>
</p>
<p>To add a Gantt objects there are two compulsory parameters that must be set. These
parameters specify on what row and at what date the activity should start at. </p>
<p>Bars and Milestones need both a vertical position and a horizontal position. The
horizontal start position is specified as a date, e.g. "2001-06-23", and the vertical
positions are specified as a number [0,1,2,3,...]. This vertical number indicates the
position from the top where the object should be placed. To understand this one could
imagine a number of "invisible" horizontal bands with a certain height. If the vertical
position is specifies as 0 the bar will be placed in the first band, specify 3 and the
bar will be placed in the fourth band and so on.</p>
<p>All these "invisible bands" have the same height (equ-spaced). The height of each band
is automatically determined and depends on both the method of layout ( as specified by
(<code class="code">GanttChart::SetLayout()</code>) and the individual heights of the individual
bars and titles. The rules are quite simple:</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>If layout=<code class="code">GANTT_FROMTOP</code> (the default and most common) the
height will equal the height (+ a margin) of the highest gantt bar. The
height calculation of each bar takes into account both the actual bar, the
title, and any left- right-marks (more about that later) that may be
present. </p>
<p>The name "fromtop" refers to that when the height is explicitly specified
the bars will usually be added from band 0 and onwards and hence being added
from the top. (This might leave empty space at the bottom of the plot area
in the graph if the height of the graph has been explicitly
specified).</p>
</li><li class="listitem">
<p>If layout=<code class="code">GANTT_EVEN</code> the bars are evenly (hence the name)
spread out over the available height in the gantt chart and no consideration
is taken of the individual bars heights. Note that if you use automatic
sizing even layout cannot be used. (It just doesn't make sense). Even layout
is for those cases when a large area is specified and the bars should be
evenly distributed using the full height.</p>
</li></ol></div><p>
</p>
<p>So in summary each object must have two position parameters.</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p><span class="bold"><strong>Which row the gantt object should be drawn
on.</strong></span></p>
<p>This should be a positive integer in the range (0, ...), It is perfectly
legal to specify a large vertical position with no other object above as
shown in <a class="xref" href="ch16s04.html#fig.ganttex03" title="Figure 16.59. Specifying a large vertical position (ganttex03.php)">Figure 16.59. Specifying a large vertical position <code class="uri"><a class="uri" href="example_src/ganttex03.html" target="_top">(<code class="filename">ganttex03.php</code>)</a></code> </a></p>
</li><li class="listitem">
<p><span class="bold"><strong>Which start and end date (or dates) the object
should have. </strong></span></p>
<p>Start of bars are given as a date string. The format depends on the
current locale. Examples of valid date strings are</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>"2001-10-22"</p>
</li><li class="listitem">
<p>"2001-10-22"</p>
</li><li class="listitem">
<p>"22 Oct 2001"</p>
</li></ul></div><p>
</p>
<p>Even if several format are supported it is recommended to use all numeric
dates, i.e in the form "2001-10-22".</p>
<p>
</p><div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
<p>Watch our for the locale used since, for example, "2008-05-10" can
have two meanings.</p>
</div><p>
</p>
<p>Specifying the end position may be done in two different ways, either by
the end date in the same way as for the start date. The other way is to
specify the length of the activity in number of days (and fractions
thereof). Examples of valid end dates are:</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>"2001-11-15"</p>
</li><li class="listitem">
<p>"15 Nov 2001"</p>
</li><li class="listitem">
<p>22, (specifies duration of 22 days)</p>
</li><li class="listitem">
<p>22.7, (specifies duration of 22.7 days)</p>
</li></ul></div><p>
</p>
<p>Please note that duration must be specified as numerical values and not as
a string.</p>
</li></ol></div><p>
</p>
<p>Usually at least one or more of the following parameter is also specified</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>The title of the gantt object</p>
</li><li class="listitem">
<p>The caption of the object. This is a text string that is drawn beside the
object on the gantt chart</p>
</li><li class="listitem">
<p>Color and any optional patterns to separate different activities</p>
</li><li class="listitem">
<p>When applicable the state of a progress indicator (see <a class="xref" href="ch16s04.html#sec.gantt-progress" title="Adding progress indicators">Adding progress indicators</a>)</p>
</li></ol></div><p>
</p>
<div class="sect3" title="Adding Gantt activity bars"><div class="titlepage"><div><div><h4 class="title"><a name="sect.adding-gantt-activity-bars"></a>Adding Gantt activity bars</h4></div></div></div>
<p>Instances of <code class="code">class GanttBar</code> is created with the constructor</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttBar::__construct($aPos,$aLabel,$aStart,$aEnd,$aCaption="",$aHeightFactor=0.6)</code></p>
<p><code class="code">$aVPos</code> The vertical position for the bar, [0..n] </p>
<p><code class="code">$aTitle</code> Title for the activity </p>
<p><code class="code">$aStart</code> Start date for the activity given as string, e.g
"2001-09-22" </p>
<p><code class="code">$aEnd </code>End date for activity given as either a date (a
string) or as the duration (in days) of the activity, e.g both
"2001-10-15" and 20.5 are valid inputs </p>
<p><code class="code">$aCaption</code> Text string (caption) to appear at the end
(right side) of the bar </p>
<p><code class="code">$aHeight</code> Height of bar given as either a value in range
[0,1] in which case this is interpretated as what fraction of the
vertical position should the bar occupy. The height can also be given in
absolute pixels [1..200]</p>
</li></ul></div><p>
</p>
<p>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.</p>
<p>
</p><div class="example"><a name="example.ganttex00"></a><p class="title"><b>Example 16.6. The simplest possible Gantt graph (<code class="filename">ganttex00.php</code>) </b></p><div class="example-contents"> <div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code"> </span><span class="hl-comment">//</span><span class="hl-comment"> content=&quot;text/plain; charset=utf-8&quot;</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">require_once</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">jpgraph/jpgraph.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">require_once</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">jpgraph/jpgraph_gantt.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> A new graph with automatic size</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">GanttGraph</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> A new activity on row '0'</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$activity</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">GanttBar</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-quotes">&quot;</span><span class="hl-string">Activity 1</span><span class="hl-quotes">&quot;</span><span class="hl-code">,</span><span class="hl-quotes">&quot;</span><span class="hl-string">2001-12-21</span><span class="hl-quotes">&quot;</span><span class="hl-code">,</span><span class="hl-quotes">&quot;</span><span class="hl-string">2002-01-19</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$activity</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Display the Gantt chart</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div></div></div><p><br class="example-break"> </p><div class="figure"><a name="fig.ganttex00"></a><p class="title"><b>Figure 16.57. The simplest possible Gantt graph <code class="uri"><a class="uri" href="example_src/ganttex00.html" target="_top">(<code class="filename">ganttex00.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex00.png" alt="The simplest possible Gantt graph (ganttex00.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>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</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>By default two scale headers are used, week and day resolution</p>
</li><li class="listitem">
<p>Weekends will have a gray background</p>
</li><li class="listitem">
<p>Sunday scale header uses red for the "Sunday"</p>
</li></ul></div><p>
</p>
<p>Lets now take the above simple graph and make a few small alterations.</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>We will add graph titles</p>
</li><li class="listitem">
<p>We will change the pattern and color of the activity bar</p>
</li><li class="listitem">
<p>We will adjust the scale headers so er have three headers and use the
date of the start day for each week (in the week scale)</p>
</li></ul></div><p>
</p>
<p>
</p><div class="figure"><a name="fig.ganttex01"></a><p class="title"><b>Figure 16.58. Making some minor alterations to the Gantt graph <code class="uri"><a class="uri" href="example_src/ganttex01.html" target="_top">(<code class="filename">ganttex01.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex01.png" alt="Making some minor alterations to the Gantt graph (ganttex01.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>To show the effect of row positioning <a class="xref" href="ch16s04.html#fig.ganttex03" title="Figure 16.59. Specifying a large vertical position (ganttex03.php)">Figure 16.59. Specifying a large vertical position <code class="uri"><a class="uri" href="example_src/ganttex03.html" target="_top">(<code class="filename">ganttex03.php</code>)</a></code> </a> 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.</p>
<p>
</p><div class="figure"><a name="fig.ganttex03"></a><p class="title"><b>Figure 16.59. Specifying a large vertical position <code class="uri"><a class="uri" href="example_src/ganttex03.html" target="_top">(<code class="filename">ganttex03.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex03.png" alt="Specifying a large vertical position (ganttex03.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>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).</p>
<p>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.</p>
</div>
<div class="sect3" title="Adding milestones"><div class="titlepage"><div><div><h4 class="title"><a name="id2572326"></a>Adding milestones</h4></div></div></div>
<p>Instances of <code class="code">class Milestone</code> is created with the constructor</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">MileStone::__construct($aVPos,$aLabel,$aDate,$aCaption='')</code></p>
<p><code class="code">$aVPos</code>, The vertical position for the bar, [0..n] </p>
<p><code class="code">$aTitle</code>, Title for the activity </p>
<p><code class="code">$aDate</code>, Date for the milestone </p>
<p><code class="code">$aCaption</code>, Text to the right of the milestone</p>
</li></ul></div><p>
</p>
<p>Valid milestones are for example</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$ms4 = new MileStone(3, 'Code complete', '2001-12-01');
$ms5 = new MileStone(3, 'Ready for test', '2002-01-06');</span></pre></td></tr></table></div><p>
</p>
<p>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 <code class="code">class PlotMark</code>. See <a class="xref" href="ch16s04.html#sec.adding-gantt-markers" title="Adding markers to the Gantt bars">Adding markers to the Gantt bars</a>.</p>
<p>To change the shape of a milestone to, say a triangle, you use the
<code class="code">SetType()</code> method as in</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$ms4-&gt;mark-&gt;SetType( MARK_DTRIANGLE );</span></pre></td></tr></table></div><p>
</p>
<p>An example of adding a milestone to a gantt graph is shown in <a class="xref" href="ch16s04.html#fig.ganttex04" title="Figure 16.60. Adding a milestone marker to a gantt graph (ganttex04.php)">Figure 16.60. Adding a milestone marker to a gantt graph <code class="uri"><a class="uri" href="example_src/ganttex04.html" target="_top">(<code class="filename">ganttex04.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.ganttex04"></a><p class="title"><b>Figure 16.60. Adding a milestone marker to a gantt graph <code class="uri"><a class="uri" href="example_src/ganttex04.html" target="_top">(<code class="filename">ganttex04.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex04.png" alt="Adding a milestone marker to a gantt graph (ganttex04.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>We note that;</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>By default the title of a milestone is set in a red color. To change
the title the "<code class="code">$title</code>" property of the milestone must be
accessed. For example</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$milestone-&gt;title-&gt;SetColor('black');</span></pre></td></tr></table></div><p>
</p>
</li><li class="listitem">
<p>A milestone has a caption in exactly the same way as an ordinary gantt
bar</p>
</li><li class="listitem">
<p>Milestones are added to the graph with the usual
<code class="code">GanttGraph::Add()</code></p>
</li></ul></div><p>
</p>
</div>
<div class="sect3" title="Adding vertical lines (GanttVLine)"><div class="titlepage"><div><div><h4 class="title"><a name="id2572634"></a>Adding vertical lines (GanttVLine)</h4></div></div></div>
<p>Instances of <code class="code">class GanttVLine</code> is created with the constructor</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttVLine::__construct($aDate,$aTitle='',$aColor='darkred',$aWeight=2,$aStyle='solid')</code></p>
<p><code class="code">$aDate</code> Date for the milestone </p>
<p><code class="code">$aTitle</code> Title for the line. The title is displayed at the
bottom of the line </p>
<p><code class="code">$aColor</code> Color of the line </p>
<p><code class="code">$aWeight</code> Line width </p>
<p><code class="code">$aStyle</code> Line style, specified as a string
<code class="code">"dashed"</code>, <code class="code">"dotted"</code> and so on</p>
</li></ul></div><p>
</p>
<p>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</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttVLine::SetRowSpan($aStart, $aEnd)</code></p>
</li></ul></div><p>
</p>
<p>If the end row is left out the line will go all the way to the bottom.</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>Since there is a small margin from the top header row to the first Gantt
row this means that specifying a start row of 0 (the very first gantt row)
will leave a small margin between the line and the header row. If this is
not desirable the start row can be specified as -1 in which case the line
will go all the way up to the header row.</p>
</div><p>
</p>
<p>Valid creations of lines are for example</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$vline1 = new GanttVLine('2001-12-24', 'Phase 1');
$vline2 = new GanttVLine('2001-12-28', 'Phase 1', 'darkred', 5, 'dotted');
$vline2-&gt;SetRowSpan(3); // Start at row index=3 (fourth row) and go all the way to the bottom</span></pre></td></tr></table></div><p>
</p>
<p>In <a class="xref" href="ch16s04.html#fig.ganttex06" title="Figure 16.61. Adding a vertical line in the Gantt graph (ganttex06.php)">Figure 16.61. Adding a vertical line in the Gantt graph <code class="uri"><a class="uri" href="example_src/ganttex06.html" target="_top">(<code class="filename">ganttex06.php</code>)</a></code> </a> we have created a line with</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$vline = new GanttVLine('2001-12-24', 'Phase 1' );
$graph-&gt;Add( $vline );</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="figure"><a name="fig.ganttex06"></a><p class="title"><b>Figure 16.61. Adding a vertical line in the Gantt graph <code class="uri"><a class="uri" href="example_src/ganttex06.html" target="_top">(<code class="filename">ganttex06.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex06.png" alt="Adding a vertical line in the Gantt graph (ganttex06.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>We note the following</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>The title of the vertical line is rendered at the bottom of the graph
in the margin.</p>
</li><li class="listitem">
<p>By default the line is drawn at the beginning of the day of the
specified date and in a "<code class="code">dashed</code>" style. This can be
modified so that the line is drawn/aligned anywhere in the specified
day. This is done by using the method
<code class="code">GanttVLine::SetDayOffset()</code> with an argument specifying
the fraction of the width of a single day where the line should be
positioned.</p>
<p>For example, if we want to display the line in the middle of the day
we need to add the line</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$vline-&gt;SetDayOffset ( 0.5 );</span></pre></td></tr></table></div><p>
</p>
<p>Adding this line to the example in <a class="xref" href="ch16s04.html#fig.ganttex06" title="Figure 16.61. Adding a vertical line in the Gantt graph (ganttex06.php)">Figure 16.61. Adding a vertical line in the Gantt graph <code class="uri"><a class="uri" href="example_src/ganttex06.html" target="_top">(<code class="filename">ganttex06.php</code>)</a></code> </a>
gives the result shown in <a class="xref" href="ch16s04.html#fig.ganttex07" title="Figure 16.62. Adjusting the position of the vertical line within the day (ganttex07.php)">Figure 16.62. Adjusting the position of the vertical line within the day <code class="uri"><a class="uri" href="example_src/ganttex07.html" target="_top">(<code class="filename">ganttex07.php</code>)</a></code> </a></p>
</li></ul></div><p>
</p>
<p>
</p><div class="figure"><a name="fig.ganttex07"></a><p class="title"><b>Figure 16.62. Adjusting the position of the vertical line within the day <code class="uri"><a class="uri" href="example_src/ganttex07.html" target="_top">(<code class="filename">ganttex07.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex07.png" alt="Adjusting the position of the vertical line within the day (ganttex07.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect3" title="Illustrating break in activities"><div class="titlepage"><div><div><h4 class="title"><a name="id2573105"></a>Illustrating break in activities</h4></div></div></div>
<p>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. <a class="xref" href="ch16s04.html#fig.gantt_samerowex1" title="Figure 16.63. Adding several activity bars on the same row (gantt_samerowex1.php)">Figure 16.63. Adding several activity bars on the same row <code class="uri"><a class="uri" href="example_src/gantt_samerowex1.html" target="_top">(<code class="filename">gantt_samerowex1.php</code>)</a></code> </a> shows an example of this</p>
<p>
</p><div class="figure"><a name="fig.gantt_samerowex1"></a><p class="title"><b>Figure 16.63. Adding several activity bars on the same row <code class="uri"><a class="uri" href="example_src/gantt_samerowex1.html" target="_top">(<code class="filename">gantt_samerowex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/gantt_samerowex1.png" alt="Adding several activity bars on the same row (gantt_samerowex1.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>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.</p>
<p>Gantt bars have the following method available</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>
<code class="code">GanttBar::SetBreakStyle($aFlg=true, $aLineStyle='dotted',
$aLineWeight=1)</code></p>
</li></ul></div><p>
</p>
<p>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. <a class="xref" href="ch16s04.html#fig.gantt_samerowex2" title='Figure 16.64. Adding a hollow "break" bar (gantt_samerowex2.php)'>Figure 16.64. Adding a hollow "break" bar <code class="uri"><a class="uri" href="example_src/gantt_samerowex2.html" target="_top">(<code class="filename">gantt_samerowex2.php</code>)</a></code> </a> shows an example
of this.</p>
<p>
</p><div class="figure"><a name="fig.gantt_samerowex2"></a><p class="title"><b>Figure 16.64. Adding a hollow "break" bar <code class="uri"><a class="uri" href="example_src/gantt_samerowex2.html" target="_top">(<code class="filename">gantt_samerowex2.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/gantt_samerowex2.png" alt='Adding a hollow "break" bar (gantt_samerowex2.php)'></span> </div></div><p><br class="figure-break">
</p>
</div>
</div>
<div class="sect2" title="Additional formatting for activity bars (Gantt bars)"><div class="titlepage"><div><div><h3 class="title"><a name="id2573237"></a>Additional formatting for activity bars (Gantt bars)</h3></div></div></div>
<div class="sect3" title="Adding markers to the Gantt bars"><div class="titlepage"><div><div><h4 class="title"><a name="sec.adding-gantt-markers"></a>Adding markers to the Gantt bars</h4></div></div></div>
<p>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</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttBar::leftMark</code></p>
</li><li class="listitem">
<p><code class="code">GanttBar::rightMark</code></p>
</li></ul></div><p>
</p>
<p>Since the markers are instances of <code class="code">class PlotMark</code> all the features of
this class is available as described in <a class="xref" href="ch15.html#sec.adding-marks" title="Adding marks to the plot (a.k.a. plot marks)">Adding marks to the plot (a.k.a. plot marks)</a> and
in <a class="xref" href="ape.html" title="Appendix E. Available plot marks">Appendix E. <i>Available plot marks</i></a>.</p>
<p>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</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Add a right marker</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$activity</span><span class="hl-code">-&gt;</span><span class="hl-identifier">rightMark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Show</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$activity</span><span class="hl-code">-&gt;</span><span class="hl-identifier">rightMark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetType</span><span class="hl-brackets">(</span><span class="hl-identifier">MARK_FILLEDCIRCLE</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$activity</span><span class="hl-code">-&gt;</span><span class="hl-identifier">rightMark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetWidth</span><span class="hl-brackets">(</span><span class="hl-number">13</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$activity</span><span class="hl-code">-&gt;</span><span class="hl-identifier">rightMark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">red</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$activity</span><span class="hl-code">-&gt;</span><span class="hl-identifier">rightMark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFillColor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">red</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$activity</span><span class="hl-code">-&gt;</span><span class="hl-identifier">rightMark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">M5</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$activity</span><span class="hl-code">-&gt;</span><span class="hl-identifier">rightMark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_BOLD</span><span class="hl-code">,</span><span class="hl-number">12</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$activity</span><span class="hl-code">-&gt;</span><span class="hl-identifier">rightMark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">white</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>This would give the effect shown in <a class="xref" href="ch16s04.html#fig.adding-right-marker" title="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</a></p>
<p>
</p><div class="figure"><a name="fig.adding-right-marker"></a><p class="title"><b>Figure 16.65. Example of adding a right marker to the activity bar</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/gantt-bar_rightmarker.png" alt="Example of adding a right marker to the activity bar"></div>
</div></div><p><br class="figure-break">
</p>
<div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
<p>Since the bar height is 60% of the row height this means that a large
marker will adjust the row size (since it must be large enough to make room
for the mark) and it might be necessary to compensate for this by calling
the <code class="code">GanttBar::SetHeight($aHeight)</code>. Remember that the reserved
height is the maximum height needed by any line. <a class="xref" href="ch16s04.html#fig.ganttex08" title="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)">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 <code class="uri"><a class="uri" href="example_src/ganttex08.html" target="_top">(<code class="filename">ganttex08.php</code>)</a></code> </a> shows what happens with the bar height if
it is not adjusted.</p>
</div><p>.</p>
<p>
</p><div class="figure"><a name="fig.ganttex08"></a><p class="title"><b>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 <code class="uri"><a class="uri" href="example_src/ganttex08.html" target="_top">(<code class="filename">ganttex08.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex08.png" alt="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)"></span> </div></div><p><br class="figure-break">
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>There are two special markers <code class="code">MARK_LEFTTRIANGLE</code> and
<code class="code">MARK_RIGHTTRIANGLE</code> not normally available that are used to
format the visual indication of a group bar header. See <a class="xref" href="ch16s04.html#sec.gouping-activities" title="Grouping activities">Grouping activities</a></p>
</div><p>
</p>
</div>
<div class="sect3" title="Specifying a fill pattern for the activity bar"><div class="titlepage"><div><div><h4 class="title"><a name="id2573438"></a>Specifying a fill pattern for the activity bar</h4></div></div></div>
<p>The pattern and color for an activity bar is specified with the method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttBar::function
SetPattern($aPattern,$aColor="blue",$aDensity=95)</code></p>
</li></ul></div><p>
</p>
<p>The available patterns together with the symbolic names are given in <a class="xref" href="ch16s04.html#tab.grad-bar-patterns" title="Table 16.1. Gantt bar patterns">Table 16.1. Gantt bar patterns</a>.</p>
<p>
</p><div class="table"><a name="tab.grad-bar-patterns"></a><p class="title"><b>Table 16.1. Gantt bar patterns</b></p><div class="table-contents">
<table summary="Gantt bar patterns" border="1"><colgroup><col class="c1"><col class="c2"><col class="c3"><col class="c4"></colgroup><tbody><tr><td>
<p><span class="inlinemediaobject"><img src="images/gantt-bar_ldiag.png"></span></p>
<p><code class="code">GANTT_LDIAG</code></p>
</td><td>
<p><span class="inlinemediaobject"><img src="images/gantt-bar_rdiag.png"></span></p>
<p><code class="code">GANTT_RDIAG</code></p>
</td><td>
<p><span class="inlinemediaobject"><img src="images/gantt-bar_hline.png"></span></p>
<p><code class="code">GANTT_HLINE</code></p>
</td><td>
<p><span class="inlinemediaobject"><img src="images/gantt-bar_vline.png"></span></p>
<p><code class="code">GANTT_VLINE</code></p>
</td></tr><tr><td>
<p><span class="inlinemediaobject"><img src="images/gantt-bar_solid.png"></span></p>
<p><code class="code">GANTT_SOLID</code></p>
</td><td>
<p><span class="inlinemediaobject"><img src="images/gantt-bar_hvcross.png"></span></p>
<p><code class="code">GANTT_HVCROSS</code></p>
</td><td>
<p><span class="inlinemediaobject"><img src="images/gantt-bar_diagcross.png"></span></p>
<p><code class="code">GANTT_DIAGCROSS</code></p>
</td><td>
<p><span class="inlinemediaobject"><img src="images/gantt-bar_3dplane.png"></span></p>
<p><code class="code">GANTT_3DPLANE</code></p>
</td></tr></tbody></table>
</div></div><p><br class="table-break">
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>In <a class="xref" href="ch16s04.html#tab.grad-bar-patterns" title="Table 16.1. Gantt bar patterns">Table 16.1. Gantt bar patterns</a>.we have used different
value for the <code class="code">$aDensity </code>parameter to better show the pattern.
Depending on the pattern we have used a density in the range 85 to
95.</p>
</div><p>
</p>
</div>
<div class="sect3" title="Adding captions to activities"><div class="titlepage"><div><div><h4 class="title"><a name="id2573692"></a>Adding captions to activities</h4></div></div></div>
<p>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.</p>
<p>The caption is accessed through the "<code class="code">$caption</code>" property of the bar.
This property is an instance of the Text class and hence inherits all the common
text formatting options.</p>
<p>The following line sets the caption to the string <code class="code">"[AG]"</code></p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$activity</span><span class="hl-code">-&gt;</span><span class="hl-identifier">caption</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">[AG]</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">
</span><span class="hl-var">$activity</span><span class="hl-code">-&gt;</span><span class="hl-identifier">caption</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_FONT2</span><span class="hl-code">,</span><span class="hl-identifier">FS_BOLD</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p><a class="xref" href="ch16s04.html#fig.gantt-bar-caption" title="Figure 16.67. Adding a caption to a Gantt bar">Figure 16.67. Adding a caption to a Gantt bar</a> shows a small cut out from a gantt
chart that shows the typical appearance of a gantt bar caption.</p>
<p>
</p><div class="figure"><a name="fig.gantt-bar-caption"></a><p class="title"><b>Figure 16.67. Adding a caption to a Gantt bar</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/gantt-bar_caption.png" alt="Adding a caption to a Gantt bar"></div>
</div></div><p><br class="figure-break">
</p>
<p>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</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$activity = new GanttBar(0, 'Activity 1', '2001-11-21', '2001-12-20', '[BS,ER]') ;</span></pre></td></tr></table></div><p>
</p>
<p>In order to specify the distance between the Gantt object and the caption text the
method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttPlotObject::SetCaptionMargin($aMargin)</code></p>
</li></ul></div><p>
</p>
<p>is used. For example, to increase the margin to 20 pixels for a gantt bar the
following line must be added</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$activity-&gt;SetCaptionTitle(20);</span></pre></td></tr></table></div><p>
</p>
</div>
<div class="sect3" title="Adding progress indicators"><div class="titlepage"><div><div><h4 class="title"><a name="sec.gantt-progress"></a>Adding progress indicators</h4></div></div></div>
<p>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.</p>
<p>The properties for the progress indicator are accessed through the 'progress'
property and it's methods.</p>
<p>To set the progress for a specific activity you only specify the percent as a
fraction (0-1). As in</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$activity-&gt;progress-&gt;Set( 0.4 )</span></pre></td></tr></table></div><p>
</p>
<p>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).</p>
<p>
</p><div class="figure"><a name="fig.ganttex14"></a><p class="title"><b>Figure 16.68. Adding progress bars ot the gantt chart <code class="uri"><a class="uri" href="example_src/ganttex14.html" target="_top">(<code class="filename">ganttex14.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex14.png" alt="Adding progress bars ot the gantt chart (ganttex14.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>To specify a different format for the progress the following method is used</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">Progress::SetPattern($aPattern,$aColor="blue",$aDensity=98)</code></p>
<p>The parameters follow the same structure as patterns for the activity
bars</p>
</li></ul></div><p>
</p>
<p>We can now modify the progress bar above, for example by adding the line</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$activity-&gt;progress-&gt;SetPattern( BAND_RDIAG , &quot;blue&quot; );</span></pre></td></tr></table></div><p>
</p>
<p>and we then get the result shown in <a class="xref" href="ch16s04.html#fig.ganttex15" title="Figure 16.69. Modifying the format for the progress pattern (ganttex15.php)">Figure 16.69. Modifying the format for the progress pattern <code class="uri"><a class="uri" href="example_src/ganttex15.html" target="_top">(<code class="filename">ganttex15.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.ganttex15"></a><p class="title"><b>Figure 16.69. Modifying the format for the progress pattern <code class="uri"><a class="uri" href="example_src/ganttex15.html" target="_top">(<code class="filename">ganttex15.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex15.png" alt="Modifying the format for the progress pattern (ganttex15.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
</div>
<div class="sect2" title="Adding visual indication of constraints between gantt objects"><div class="titlepage"><div><div><h3 class="title"><a name="sec.add-constraints"></a>Adding visual indication of constraints between gantt objects</h3></div></div></div>
<p>With Gantt charts there is often the need to illustrate constrains between one or
several activities. One of the most common constrain is that on activity can't start
before some other activity has finished. The constrain is visualized as an arrow between
two gantt objects.</p>
<p>The library supports visualization of the following four types of constraints</p>
<p>
</p><div class="informaltable">
<table border="1"><colgroup><col class="c1"><col class="c2"></colgroup><tbody><tr><td align="center">
<p>
</p><div class="figure"><a name="id2574041"></a><p class="title"><b>Figure 16.70. Start to end constraint</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/gantt-constraint-start-to-end.png" alt="Start to end constraint"></div>
</div></div><p><br class="figure-break">
</p>
<p>Start to End</p>
</td><td align="center">
<p>
</p><div class="figure"><a name="id2574073"></a><p class="title"><b>Figure 16.71. Start to start constraint</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/gantt-constraint-start-to-start.png" alt="Start to start constraint"></div>
</div></div><p><br class="figure-break">
</p>
<p>Start to Start</p>
</td></tr><tr><td align="center">
<p>
</p><div class="figure"><a name="id2574110"></a><p class="title"><b>Figure 16.72. End to start constraint</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/gantt-constraint-end-to-start.png" alt="End to start constraint"></div>
</div></div><p><br class="figure-break">
</p>
<p>End to Start</p>
</td><td align="center">
<p>
</p><div class="figure"><a name="id2574144"></a><p class="title"><b>Figure 16.73. End to end constraint</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/gantt-constraint-end-to-end.png" alt="End to end constraint"></div>
</div></div><p><br class="figure-break">
</p>
<p>End to End</p>
</td></tr></tbody></table>
</div><p>
</p>
<p>To visualize a constrain the method <code class="code">SetConstrain()</code> is called on the first
Gantt object that is the first part of the constraint. The signature for this method
is</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttObject::SetConstrain($aRow,$aType,$aColor='black',</code></p>
<p><code class="code"> $aArrowSize=ARROW_S2, $aArrowType=ARROWT_SOLID)</code></p>
<p><code class="code">$aRow</code>, The target row for the constrain</p>
<p><code class="code">$aType</code>, The type of constraints. Can be one of the following
symbolic defines</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem">
<p><code class="code">CONSTRAIN_STARTSTART</code></p>
</li><li class="listitem">
<p><code class="code">CONSTRAIN_STARTEND</code></p>
</li><li class="listitem">
<p><code class="code">CONSTRAIN_ENDSTART</code></p>
</li><li class="listitem">
<p><code class="code">CONSTRAIN_ENDEND</code></p>
</li></ul></div><p>
</p>
<p><code class="code">$aColor</code>, The color of the constraint arrow</p>
<p><code class="code">$aArrowSize</code>, The size of the constraint arrow. Can eb one of
the following symbolic defines</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem">
<p><code class="code">ARROW_S1</code></p>
</li><li class="listitem">
<p><code class="code">ARROW_S2</code></p>
</li><li class="listitem">
<p><code class="code">ARROW_S3</code></p>
</li><li class="listitem">
<p><code class="code">ARROW_S4</code></p>
</li><li class="listitem">
<p><code class="code">ARROW_S5</code></p>
</li></ul></div><p>
</p>
<p><code class="code">$aArrowType</code>, specifies the visual appearance of the arrow.
Can be one of the following symbolic defines</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem">
<p><code class="code">ARROWT_SOLID</code>, Using a solid arrow and arrow
head</p>
</li><li class="listitem">
<p><code class="code">ARROWT_OPEN</code>, Using an outline arrow and outline
arrow head</p>
</li></ul></div><p>
</p>
</li></ul></div><p>
</p>
<p>If we assume that the gantt chart have two activity bars (Gantt bars) defined as </p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$activity1 = new GanttBar(0,'First activity','2001-01-01','2001-03-01');
$activity2 = new GanttBar(1,'Second activity','2001-02-01','2001-04-15');</span></pre></td></tr></table></div><p>
</p>
<p>and that we need to visualize a end-to-start constraint from <code class="code">$activity1</code>
to <code class="code">$activity2</code> we must add the following statement</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$activity1-&gt;SetConstrain(1,CONSTRAIN_ENDSTART);</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>The actual path followed by the arrow is controlled by some heuristics to make
it clear what the constrain is. It has been a design decision that in order to
keep the API simple the user has no further detailed controlled on the actual
path followed. </p>
</div><p>
</p>
</div>
<div class="sect2" title="Grouping activities"><div class="titlepage"><div><div><h3 class="title"><a name="sec.gouping-activities"></a>Grouping activities</h3></div></div></div>
<p>It is common to group activities. There is no special type for activity bars that are
used to illustrate grouping. The common way of illustrating this (as have been used
above) is to add "half" a triangle marker at both ends of the bar. </p>
<p>The library provides two special types of marks that are handled slightly different
than other markers just to cater for illustrating groups of activities. If the left or
right marker (see the section on adding left and right markers) are of type
<code class="code">MARK_LEFTTRIANGLE</code> or <code class="code">MARK_RIGHTTRIANGLE</code> those triangles
will be drawn under the bars to give the effect show in the examples above. </p>
<p>It is also a good idea to make the grouping bars have slightly less height than normal
activity bars since the end triangles will visually "grow" the bar. Remember that the
size of the bar can be adjusted by adding an extra parameter in the creation of the bar
and can be specified as either an absolute or as a relative (0-1) value, see <a class="xref" href="ch16s04.html#sect.adding-gantt-activity-bars" title="Adding Gantt activity bars">Adding Gantt activity bars</a></p>
<p>So to get the effect we want for a group bar we have to use the two lines</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$groupbar</span><span class="hl-code">-&gt;</span><span class="hl-identifier">leftMark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetType</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">MARK_LEFTTRIANGLE</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$groupbar</span><span class="hl-code">-&gt;</span><span class="hl-identifier">leftMark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Show</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$groupbar</span><span class="hl-code">-&gt;</span><span class="hl-identifier">rightMark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetType</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">MARK_RIGHTTRIANGLE</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$groupbar</span><span class="hl-code">-&gt;</span><span class="hl-identifier">rightMark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Show</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>to add the typical group markers at the left and right end of an otherwise standard
activity bar as can bee seen in <a class="xref" href="ch16s04.html#fig.group-markers" title="Figure 16.74. Group markers">Figure 16.74. Group markers</a></p>
<p>
</p><div class="figure"><a name="fig.group-markers"></a><p class="title"><b>Figure 16.74. Group markers</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/gantt-group-illustration.png" alt="Group markers"></div>
</div></div><p><br class="figure-break">
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>Since there is not yet any formatting support to accomplish the effect of
indentation for the titles so this is accomplished by using a fixed width font
and adding spaces in front of the title. </p>
</div><p>
</p>
</div>
<div class="sect2" title="Simplifying creation of basic Gantt charts"><div class="titlepage"><div><div><h3 class="title"><a name="id2574437"></a>Simplifying creation of basic Gantt charts</h3></div></div></div>
<p>As we have shown in the previous examples constructing a Gantt chart consists of a
number of repetitive tasks; Create the individual activity bars, add possible
constraints, format them and finally add them to the graph. </p>
<p>Since many basic Gantt charts that doesn't need a very high degree of customization
and has an almost identical (but repetitive structure) the library offers a "wrapper"
method that takes a structured specification of the activities and implements most of
these repetitive tasks which will make the graphs scripts much simpler.</p>
<p>The only drawback is that in order to keep the specification simple (which is the
whole purpose) there are very limited options to format the activities.</p>
<p>The wrapper method has the following signature</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttGraph::function CreateSimple($aData, $aConstrains=array(),
$aProgress=array())</code></p>
<p><code class="code">$aData</code>, Specification of activities described below</p>
<p><code class="code">$aConstraints</code>, (optional) List of constraints</p>
<p><code class="code">$aProgress</code>, (optional) List of progress values</p>
</li></ul></div><p>
</p>
<p>The specification of the activities used for this wrapper method has the following
structure</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$spec = array(
array( &lt;act1_row&gt;, &lt;act1_type&gt;, &lt;act1_title&gt;, &lt;act1_start&gt;, &lt;act1_end&gt;, &lt;act1_caption&gt;, &lt;act1_csimtarget&gt;, &lt;act1_title_csimtarget&gt; ),
array( &lt;act2_row&gt;, &lt;act2_type&gt;, &lt;act2_title&gt;, &lt;act2_start&gt;, &lt;act2_end&gt;, &lt;act2_caption&gt;, &lt;act2_csimtarget&gt;, &lt;act2_title_csimtarget&gt; ),
...
array( &lt;actN_row&gt;, &lt;actN_type&gt;, &lt;actN_title&gt;, &lt;actN_start&gt;, &lt;actN_end&gt;, &lt;actN_caption&gt;, &lt;actN_csimtarget&gt;, &lt;actN_title_csimtarget&gt; ));</span></pre></td></tr></table></div><p>
</p>
<p>Each array within the specification creates one activity. The fields have the
following meaning</p>
<div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">&lt;act_row&gt;</code>, Which row in the gantt chart this activity
shall be drawn on </p>
</li><li class="listitem">
<p><code class="code">&lt;act_type&gt;</code>, What type of activity is this. The type is one
of the following symbolic defines</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem">
<p><code class="code">ACTYPE_NORMAL</code>, A standard activity bar</p>
</li><li class="listitem">
<p><code class="code">ACTYPE_MILESTONE</code>, A milestone activity</p>
</li><li class="listitem">
<p><code class="code">ACTYPE_GROUP</code>, Create a grouping activity bar by
adding start and end group marks</p>
</li></ul></div><p>
</p>
</li><li class="listitem">
<p><code class="code">&lt;act_title&gt;</code>, The title for the activity, can be either a
text string or an array to specify several title when several title columns
have been specified</p>
</li><li class="listitem">
<p><code class="code">&lt;act_start&gt;</code>, <code class="code">&lt;act_end&gt;</code>, Start and end date
for the activity. For ACTYPE_MILESTONE only the &lt;act_start&gt; shall be
specified.</p>
</li><li class="listitem">
<p><code class="code">&lt;act_caption&gt;</code>, The optional caption text for the
activity</p>
</li></ul></div><p>The (optional) constraints specification has the following
structure</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$constraints = array(
array(&lt;act1_row&gt;, &lt;act2_row&gt;, &lt;type&gt;),
array(&lt;act1_row&gt;, &lt;act2_row&gt;, &lt;type&gt;),
...
array(&lt;act1_row&gt;, &lt;act2_row&gt;, &lt;type&gt;));</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>&lt;act1_row&gt;, &lt;act2_row&gt;, Start and end row for this constraint</p>
</li><li class="listitem">
<p>&lt;type&gt;, Type of constraint, as described in <a class="xref" href="ch16s04.html#sec.add-constraints" title="Adding visual indication of constraints between gantt objects">Adding visual indication of constraints between gantt objects</a></p>
</li></ul></div><p>
</p>
<p>Finally the (optional) progress specification has the structure</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$progress = array(
array( &lt;act1_row&gt;, &lt;act1_progress&gt; ),
array( &lt;act2_row&gt;, &lt;act2_progress&gt; ),
...
array( &lt;act2_row&gt;, &lt;act2_progress&gt; ));</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>&lt;act_row&gt;, The row that has the activity with the specified
progress</p>
</li><li class="listitem">
<p>&lt;act_progress&gt;, The progress value for the activity at the specified
row</p>
</li></ul></div><p>
</p>
<p>This does perhaps not look like a simplification but the following example will show
that it really is.</p>
<p>The following example will create a gantt graph with two activities, one milestone and
all grouped together by a group bar. The specification for these activities will
be</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code"> $data = array(
array( 0 , ACTYPE_GROUP , &quot;Phase 1&quot; , &quot;2001-10-26&quot; , &quot;2001-11-23&quot; , &quot;&quot; ),
array( 1 , ACTYPE_NORMAL , &quot; Label 2&quot; , &quot;2001-10-26&quot; , &quot;2001-11-13&quot; , &quot;[KJ]&quot; ),
array( 2 , ACTYPE_NORMAL , &quot; Label 3&quot; , &quot;2001-11-20&quot; , &quot;2001-11-22&quot; , &quot;[EP]&quot; ),
array( 3 , ACTYPE_MILESTONE , &quot; Phase 1 Done&quot; , &quot;2001-11-23&quot; , &quot;M2&quot; ) );</span></pre></td></tr></table></div><p>
</p>
<p>Note that we use spaces to get a the titles indented according to the group
structure.</p>
<p>We now only need to create a very basic gantt chart with some selected scale headers
and perhaps also a title. We then call the <code class="code">CreateSimple()</code> method with the
data specification above as the argument and that is all we must do.</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Create a basic graph and set a title</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">GanttGraph</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">&quot;</span><span class="hl-string">Gantt Graph using CreateSimple()</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Setup a scale</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">ShowHeaders</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">GANTT_HYEAR</span><span class="hl-code"> | </span><span class="hl-identifier">GANTT_HMONTH</span><span class="hl-code"> | </span><span class="hl-identifier">GANTT_HDAY</span><span class="hl-code"> | </span><span class="hl-identifier">GANTT_HWEEK</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">week</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetStyle</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">WEEKSTYLE_FIRSTDAY</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Add the specified activities</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">CreateSimple</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-var">$data</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> .. and stroke the graph</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Stroke</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>Compare this to all the <code class="code">$act = new GanttBar(..)</code> etc. we would have had to
add and format using the "manual" method of adding activities to gantt graph. A complete
example of this is shown in <a class="xref" href="ch16s04.html#fig.ganttsimpleex1" title="Figure 16.75. Using the CreateSimple() wrapper method (ganttsimpleex1.php)">Figure 16.75. Using the CreateSimple() wrapper method <code class="uri"><a class="uri" href="example_src/ganttsimpleex1.html" target="_top">(<code class="filename">ganttsimpleex1.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.ganttsimpleex1"></a><p class="title"><b>Figure 16.75. Using the CreateSimple() wrapper method <code class="uri"><a class="uri" href="example_src/ganttsimpleex1.html" target="_top">(<code class="filename">ganttsimpleex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttsimpleex1.png" alt="Using the CreateSimple() wrapper method (ganttsimpleex1.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>As we mentioned above the format options are very limited when using
<code class="code">CreateSimple()</code> since that is the whole idea. However, there are two
methods to at least partially affect the format and the visual appearance of the
activities.</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttGraph::SetSimpleFont($aFont,$aSize)</code></p>
<p><code class="code">$aFont</code>, Font family for titles</p>
<p><code class="code">$aSize</code>, Font size for titles</p>
</li><li class="listitem">
<p><code class="code">GanttGraph::SetSimpleStyle($aPattern,$aColor,$aFillColor)</code></p>
<p><code class="code">$aPattern</code>, Specifies the pattern (if any) to use for filling
the activity bars </p>
<p><code class="code">$aColor</code>, The pattern color</p>
<p><code class="code">$aFillColor</code>, The fill color of the activity bar</p>
</li></ul></div><p>
</p>
</div>
<div class="sect2" title="Using multiple title columns"><div class="titlepage"><div><div><h3 class="title"><a name="id2574887"></a>Using multiple title columns</h3></div></div></div>
<p>It is often of interest not only to show one title for a gantt bar but often one wants
to show, title, start date, end date, duration or effort and so on. Up until now we
have, to keep things simple only shown a single title for each activity. We will now
show how to use an arbitrary number of columns/titles for each gantt activity (gantt bar
or gantt milestone).</p>
<p>
</p><div class="figure"><a name="fig.ganttmonthyearex3"></a><p class="title"><b>Figure 16.76. Using multiple columns as titles for activties <code class="uri"><a class="uri" href="example_src/ganttmonthyearex3.html" target="_top">(<code class="filename">ganttmonthyearex3.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttmonthyearex3.png" alt="Using multiple columns as titles for activties (ganttmonthyearex3.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>To use multiple columns there are two steps needed. </p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>The number of columns to be used as titles together with the headings and
the headings properties like text, font and color are specified</p>
</li><li class="listitem">
<p>The second step is to add the proper titles to each activity to be
displayed in the specified columns</p>
</li></ol></div><p>
</p>
<p>To set the columns the "Activity information" property of the scale must be accessed.
To specify the headers of the title column the following method is used</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">ActivityInfo::SetColTitles($aHeaderArray, $aMinWidths)</code></p>
</li></ul></div><p>
</p>
<p>The following code excerpt shows an example on how to do this</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;scale-&gt;actinfo-&gt;SetColTitles(
array( 'Note', 'Task', 'Duration', 'Start', 'Finish' ),
array( 30 , 100 ));</span></pre></td></tr></table></div><p>
</p>
<p>Furthermore it is possible to modify the background colors and the style and colors of
the vertical dividing grid lines. In the previous image we used the lines</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">actinfo</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetBackgroundColor</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">green:0.5@0.5</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">actinfo</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code"> , </span><span class="hl-identifier">FS_NORMAL</span><span class="hl-code"> , </span><span class="hl-number">10</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">actinfo</span><span class="hl-code">-&gt;</span><span class="hl-identifier">vgrid</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetStyle</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">solid</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">actinfo</span><span class="hl-code">-&gt;</span><span class="hl-identifier">vgrid</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">gray</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>The style for the grid lines is as usual specified with one of the strings be
"<code class="code">solid</code>","<code class="code">dashed</code>", "<code class="code">dotted</code>" or
"<code class="code">longdashed</code>" as in other line formatting contexts within the library. </p>
<p>It is also possible to specify if a small "3D" effect should be used in the titles. By
default this is enabled. You can easily turn this of with a call to</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;scale-&gt;actinfo-&gt;SetStyle( ACTINFO_2D );</span></pre></td></tr></table></div><p>
</p>
<p>To adjust the colors of the vertical dividing lines in the title the method
<code class="code">SetColor()</code> is used as in</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;scale-&gt;actinfo-&gt;SetColor('navy');</span></pre></td></tr></table></div><p>
</p>
<p>Once the format of the title column is set up the data in the columns (the texts)
needs to be entered. </p>
<p>This is done when the activity bars are added to the graph. By default only a single
columns is used as a title and then the title of the activity is specified as a string.
When multiple columns are used then the title of each activity is specified as an array
of texts, each entry in the array corresponding to one column.</p>
<p>Specifying two column titles could be done with the following creation of the activity
bar</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$title1 = '...';
$title2 = '...';
$bar = new GanttBar(0 ,array( $title1 , $title2 ), &quot;2003-11-23&quot; , &quot;2003-12-05&quot; );</span></pre></td></tr></table></div><p>
</p>
<div class="sidebar"><div class="titlepage"></div>
<p>Apart from specifying the titles as separate entries in an array there is actually
one additional (older) way to specify the text that should go into each column and
that is to separate each text string with a "\t" tab character. So for example the
lines above could also have been written as </p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$title1 = '...';
$title2 = '...';
$bar = new GanttBar(0 , $title1 . &quot;\t&quot; . $title2, &quot;2003-11-23&quot; , &quot;2003-12-05&quot; );</span></pre></td></tr></table></div><p>
</p>
<p>Note the quote character used to encode the <code class="code">"\t"</code> character. There is
however a very crucial semantic difference between these two ways of specifying the
texts and that is that with the method of tab characters the columns will not be
automatically resized to fit the text string. This means that when the columns are
setup they must have a big enough width to cater for all the strings.</p>
</div>
<div class="sect3" title="Adjusting the individual fonts for each column"><div class="titlepage"><div><div><h4 class="title"><a name="id2575159"></a>Adjusting the individual fonts for each column</h4></div></div></div>
<p><span class="italic">Note: This feature is only available in versions &gt;= 3.0.3
of the library.</span></p>
<p>When using the method <code class="code">GanttBar::title::SetFont()</code> the same font will
be applied to all columns for that particular activity. To specify individual fonts
for each column the method <code class="code">GanttBar::title::SetColumnFonts()</code> must be
used.</p>
<p>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 <code class="code">SetFont()</code> method).</p>
<p>For example the two lines of code</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$bar</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_NORMAL</span><span class="hl-code">,</span><span class="hl-number">10</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$bar</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColumnFonts</span><span class="hl-brackets">(</span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_BOLD</span><span class="hl-code">,</span><span class="hl-number">11</span><span class="hl-brackets">)</span><span class="hl-brackets">)</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>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.</p>
<p>A complete example on how to use this is shown in <a class="xref" href="ch16s04.html#fig.ganttcolumnfontsex01" title="Figure 16.77. Using different fonts for individual columns (ganttcolumnfontsex01.php)">Figure 16.77. Using different fonts for individual columns <code class="uri"><a class="uri" href="example_src/ganttcolumnfontsex01.html" target="_top">(<code class="filename">ganttcolumnfontsex01.php</code>)</a></code> </a> below.</p>
<p>
</p><div class="figure"><a name="fig.ganttcolumnfontsex01"></a><p class="title"><b>Figure 16.77. Using different fonts for individual columns <code class="uri"><a class="uri" href="example_src/ganttcolumnfontsex01.html" target="_top">(<code class="filename">ganttcolumnfontsex01.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttcolumnfontsex01.png" alt="Using different fonts for individual columns (ganttcolumnfontsex01.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect3" title="Adding an overview title for all columns"><div class="titlepage"><div><div><h4 class="title"><a name="id2575229"></a>Adding an overview title for all columns</h4></div></div></div>
<p>It is possible to add a title that spans all the defined title columns. An example
of this is shown in <a class="xref" href="ch16s04.html#fig.ganttmonthyearex4" title="Figure 16.78. Adding a spanning title over all title columns (ganttmonthyearex4.php)">Figure 16.78. Adding a spanning title over all title columns <code class="uri"><a class="uri" href="example_src/ganttmonthyearex4.html" target="_top">(<code class="filename">ganttmonthyearex4.php</code>)</a></code> </a>. This title is
specified with the property "<code class="code">$tableTitle</code>" 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.</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">tableTitle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">Phase 1</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">tableTitle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code"> , </span><span class="hl-identifier">FS_NORMAL</span><span class="hl-code"> , </span><span class="hl-number">12</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetTableTitleBackground</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">darkgreen@0.6</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">tableTitle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Show</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-reserved">true</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="figure"><a name="fig.ganttmonthyearex4"></a><p class="title"><b>Figure 16.78. Adding a spanning title over all title columns <code class="uri"><a class="uri" href="example_src/ganttmonthyearex4.html" target="_top">(<code class="filename">ganttmonthyearex4.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttmonthyearex4.png" alt="Adding a spanning title over all title columns (ganttmonthyearex4.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>
</p><div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
<p>Remember that the overall height available for both title column header
and the spanning column title is limited to the height of the specified
scale header. This means that having only a single scale header will not
leave enough room to add a spanning title.</p>
</div><p>
</p>
</div>
</div>
<div class="sect2" title="Built-in icons for use in activity titles"><div class="titlepage"><div><div><h3 class="title"><a name="id2575300"></a>Built-in icons for use in activity titles</h3></div></div></div>
<p>To assist in getting visual clues to how to interpret activities in the Gantt chart it
is possible to add icons in the title columns. These icons can also act as hot-spots in
CSIM graphs. The available built-in icons are listed in <a class="xref" href="ch16s04.html#fig.gantt-icons" title="Figure 16.79. Built-in icons for Gantt charts">Figure 16.79. Built-in icons for Gantt charts</a> together with there symbolic names.</p>
<p>In order to add an icon in a title column first an instance of <code class="code">class
IconPlot</code> is created and it is then added in exactly the same was as a text
string. The signature for the constructor is</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">IconPlot::__construct($aIcon,$aScale=1)</code></p>
<p><code class="code">$aIcon</code>, is either one of the symbolic names in <a class="xref" href="ch16s04.html#fig.gantt-icons" title="Figure 16.79. Built-in icons for Gantt charts">Figure 16.79. Built-in icons for Gantt charts</a> or a text string which is a filename of
an arbitrary image to use as icon.</p>
<p><code class="code">$aScale</code>, is the initial scaling of the image</p>
</li></ul></div><p>
</p>
<p>For example the following code snippet adds a "folder open image" in the first column
and scaling it to be 60% of its original size</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$iconopen</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">IconImage</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-identifier">GICON_FOLDEROPEN</span><span class="hl-code"> , </span><span class="hl-number">0</span><span class="hl-number">.6</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$title2</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-string">...</span><span class="hl-quotes">'</span><span class="hl-code"> ;
</span><span class="hl-var">$bar</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">GanttBar</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-code"> ,</span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-var">$iconopen</span><span class="hl-code"> , </span><span class="hl-var">$title2</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">2003-11-23</span><span class="hl-quotes">'</span><span class="hl-code"> , </span><span class="hl-quotes">'</span><span class="hl-string">2003-12-05</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>To instead use an arbitrary image as icon the code would have to be changed to</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$iconopen</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">IconImage</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">myiconimage.jpg</span><span class="hl-quotes">'</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-number">.6</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$title2</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-string">...</span><span class="hl-quotes">'</span><span class="hl-code"> ;
</span><span class="hl-var">$bar</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">GanttBar</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-code"> ,</span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-var">$iconopen</span><span class="hl-code"> , </span><span class="hl-var">$title2</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">2003-11-23</span><span class="hl-quotes">'</span><span class="hl-code"> , </span><span class="hl-quotes">'</span><span class="hl-string">2003-12-05</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="figure"><a name="fig.gantt-icons"></a><p class="title"><b>Figure 16.79. Built-in icons for Gantt charts</b></p><div class="figure-contents">
<div class="informaltable">
<table border="1"><colgroup><col class="c1"><col class="c2"><col class="c3"></colgroup><tbody><tr><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_error.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_WARNINGYELLOW</code></p>
</td><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_warning.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_WARNINGRED</code></p>
</td><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_edit.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_TEXT</code></p>
</td></tr><tr><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_endconstrain.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_ENDCONS</code></p>
</td><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_startconstrain.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_STARTCONS</code></p>
</td><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_mail.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_MAIL</code></p>
</td></tr><tr><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_calc.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_CALC</code></p>
</td><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_viewmag.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_MAGNIFIER</code></p>
</td><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_lock.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_LOCK</code></p>
</td></tr><tr><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_stop.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_STOP</code></p>
</td><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_folder_orange_open.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_FOLDEROPEN</code></p>
</td><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_folder_orange.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_FOLDER</code></p>
</td></tr><tr><td align="center">
<p><span class="inlinemediaobject"><img src="images/gantticon_file_important.png" alt="Built-in icons for Gantt charts"></span></p>
<p><code class="code">GICON_TEXTIMPORTANT</code></p>
</td><td> </td><td> </td></tr></tbody></table>
</div>
</div></div><p><br class="figure-break">
</p>
<p>An example of using icons in the titles is shown in <a class="xref" href="ch16s04.html#fig.gantticonex1" title="Figure 16.80. Adding built in icons in titles (gantticonex1.php)">Figure 16.80. Adding built in icons in titles <code class="uri"><a class="uri" href="example_src/gantticonex1.html" target="_top">(<code class="filename">gantticonex1.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.gantticonex1"></a><p class="title"><b>Figure 16.80. Adding built in icons in titles <code class="uri"><a class="uri" href="example_src/gantticonex1.html" target="_top">(<code class="filename">gantticonex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/gantticonex1.png" alt="Adding built in icons in titles (gantticonex1.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="More general Gantt formatting"><div class="titlepage"><div><div><h3 class="title"><a name="id2575812"></a>More general Gantt formatting</h3></div></div></div>
<p>In this section we will show a few more ways by which you may customize the gantt
chart itself. This include among other thing</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>Adding a table title (not to be confused with the graph title)</p>
</li><li class="listitem">
<p>Adjusting appearance of the various lines in the bar chart</p>
</li><li class="listitem">
<p>Adjusting the zoom factor for the width when using automatic
scaling</p>
</li></ul></div><p>
</p>
<div class="sect3" title="Adjusting the scale zoom factor"><div class="titlepage"><div><div><h4 class="title"><a name="sec.zoom-factor"></a>Adjusting the scale zoom factor</h4></div></div></div>
<p>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.</p>
<p>The zoom factor is adjusted by the method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttGraph::SetZoomFactor($aZoomFactor)</code></p>
<p><code class="code">$aZoomFactor</code>, A real number that specifies the zoom of
the date scale. A zoom factor of 2.0 will double the default horizontal
spacing.</p>
</li></ul></div><p>
</p>
<p>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 <a class="xref" href="ch16s04.html#fig.ganttex13-zoom2" title="Figure 16.82. A zoom factor of 1.5 (ganttex13-zoom2.php)">Figure 16.82. A zoom factor of 1.5 <code class="uri"><a class="uri" href="example_src/ganttex13-zoom2.html" target="_top">(<code class="filename">ganttex13-zoom2.php</code>)</a></code> </a> a zoom factor of 1.5 (=150%) is used.</p>
<p>
</p><div class="figure"><a name="fig.ganttex13-zoom1"></a><p class="title"><b>Figure 16.81. A zoom factor of 0.7 <code class="uri"><a class="uri" href="example_src/ganttex13-zoom1.html" target="_top">(<code class="filename">ganttex13-zoom1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex13-zoom1.png" alt="A zoom factor of 0.7 (ganttex13-zoom1.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>
</p><div class="figure"><a name="fig.ganttex13-zoom2"></a><p class="title"><b>Figure 16.82. A zoom factor of 1.5 <code class="uri"><a class="uri" href="example_src/ganttex13-zoom2.html" target="_top">(<code class="filename">ganttex13-zoom2.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex13-zoom2.png" alt="A zoom factor of 1.5 (ganttex13-zoom2.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>There is no limit for the zoom factor but from a practical point of view
the useful range is [0.5,3.0]</p>
</div><p>
</p>
</div>
<div class="sect3" title="Adding a table title"><div class="titlepage"><div><div><h4 class="title"><a name="id2575994"></a>Adding a table title</h4></div></div></div>
<p>The (default) white area in the top left of the gantt table may have a title. This
is accessed by the '<code class="code">tableTitle</code>' property of the gantt scale. Using this
is straightforward as the following code snippet shows.</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">tableTitle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">(Rev: 1.22)</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">tableTitle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">FF_FONT1</span><span class="hl-code"> , </span><span class="hl-identifier">FS_BOLD</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetTableTitleBackground</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">silver</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">tableTitle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Show</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>The example lines above also changes the default white background to silver. An
example of this is shown in <a class="xref" href="ch16s04.html#fig.ganttex16" title="Figure 16.83. Adding a table title in the top left corner (ganttex16.php)">Figure 16.83. Adding a table title in the top left corner <code class="uri"><a class="uri" href="example_src/ganttex16.html" target="_top">(<code class="filename">ganttex16.php</code>)</a></code> </a>. 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.</p>
<p>
</p><div class="figure"><a name="fig.ganttex16"></a><p class="title"><b>Figure 16.83. Adding a table title in the top left corner <code class="uri"><a class="uri" href="example_src/ganttex16.html" target="_top">(<code class="filename">ganttex16.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex16.png" alt="Adding a table title in the top left corner (ganttex16.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect3" title="Modifying the divider lines"><div class="titlepage"><div><div><h4 class="title"><a name="id2576032"></a>Modifying the divider lines</h4></div></div></div>
<p>The vertical and horizontal lines between the activity titles and the plot area
and the bars can be modified by accessing the vertical divider
'<code class="code">divider</code>' and the horizontal divider '<code class="code">dividerh</code>' properties
of the scale. <a class="xref" href="ch16s04.html#fig.gantt-divider-lines" title="Figure 16.84. Gantt divider lines">Figure 16.84. Gantt divider lines</a> shows the exact location
of the divider lines.</p>
<p>
</p><div class="figure"><a name="fig.gantt-divider-lines"></a><p class="title"><b>Figure 16.84. Gantt divider lines</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/gantt-divider-lines-original-amended.png" alt="Gantt divider lines"></div>
</div></div><p><br class="figure-break">
</p>
<p>Again, this is straightforward as the following code snippet shows.</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">divider</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetWeight</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-number">3</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">divider</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">navy</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">dividerh</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetWeight</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-number">3</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">dividerh</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">navy</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>An example of this can be seen in <a class="xref" href="ch16s04.html#fig.ganttex18" title="Figure 16.85. Adjusting the plot box around the gantt chart (ganttex18.php)">Figure 16.85. Adjusting the plot box around the gantt chart <code class="uri"><a class="uri" href="example_src/ganttex18.html" target="_top">(<code class="filename">ganttex18.php</code>)</a></code> </a></p>
</div>
<div class="sect3" title="Modifying the box around the plot"><div class="titlepage"><div><div><h4 class="title"><a name="id2576136"></a>Modifying the box around the plot</h4></div></div></div>
<p>In a similar manner to the other plots in the library the Box around the plot can
be modified with the gantt graph method '<code class="code">GanttGraph::SetBox()</code>' . The
following line will result in a thicker plot box around the plot area as can be seen
in <a class="xref" href="ch16s04.html#fig.ganttex18" title="Figure 16.85. Adjusting the plot box around the gantt chart (ganttex18.php)">Figure 16.85. Adjusting the plot box around the gantt chart <code class="uri"><a class="uri" href="example_src/ganttex18.html" target="_top">(<code class="filename">ganttex18.php</code>)</a></code> </a></p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;SetBox(true, 'navy', 3);</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="figure"><a name="fig.ganttex18"></a><p class="title"><b>Figure 16.85. Adjusting the plot box around the gantt chart <code class="uri"><a class="uri" href="example_src/ganttex18.html" target="_top">(<code class="filename">ganttex18.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex18.png" alt="Adjusting the plot box around the gantt chart (ganttex18.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect3" title="Horizontal grids and alternating line colors"><div class="titlepage"><div><div><h4 class="title"><a name="id2576209"></a>Horizontal grids and alternating line colors</h4></div></div></div>
<p>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 <code class="code">Graph::hgrid</code>
property and the line (used in the grid) is accessed through the
<code class="code">Graph::hgrid::line</code> sub-property.</p>
<p>In order to specify alternating line colors the following method is used</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">HorizontalGridLine::SetRowFillColor($aColor1,$aColor2='')</code></p>
<p><code class="code">$aColor1</code>, <code class="code">$aColor2</code>, alternating color for
each activity line</p>
</li></ul></div><p>
</p>
<p>For example, to use an alternating blue background with blue grid line the
following lines would have to be added to the graph script</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Setup a horizontal grid</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">hgrid</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Show</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">hgrid</span><span class="hl-code">-&gt;</span><span class="hl-identifier">line</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">lightblue</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">hgrid</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetRowFillColor</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string">darkblue@0.9</span><span class="hl-quotes">'</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>An example,of this is shown in <a class="xref" href="ch16s04.html#fig.gantthgridex1" title="Figure 16.86.  (gantthgridex1.php)">Figure 16.86.  <code class="uri"><a class="uri" href="example_src/gantthgridex1.html" target="_top">(<code class="filename">gantthgridex1.php</code>)</a></code> </a></p>
</div>
<div class="sect3" title="Adding icons to Gantt graphs"><div class="titlepage"><div><div><h4 class="title"><a name="id2576277"></a>Adding icons to Gantt graphs</h4></div></div></div>
<p>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 <code class="code">class IconPlot</code> and
then adding that instance to the graph. </p>
<p>For example the following line will add an icon (similar to what was shown in ??)
to a gantt chart with the result shown in <a class="xref" href="ch16s04.html#fig.gantthgridex1" title="Figure 16.86.  (gantthgridex1.php)">Figure 16.86.  <code class="uri"><a class="uri" href="example_src/gantthgridex1.html" target="_top">(<code class="filename">gantthgridex1.php</code>)</a></code> </a></p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$icon</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">IconPlot</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">penguin.png</span><span class="hl-quotes">'</span><span class="hl-code"> , </span><span class="hl-number">0</span><span class="hl-number">.01</span><span class="hl-code"> , </span><span class="hl-number">0</span><span class="hl-number">.95</span><span class="hl-code"> , </span><span class="hl-number">1</span><span class="hl-code"> , </span><span class="hl-number">15</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$icon</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetAnchor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">left</span><span class="hl-quotes">'</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">bottom</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-var">$icon</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="figure"><a name="fig.gantthgridex1"></a><p class="title"><b>Figure 16.86.  <code class="uri"><a class="uri" href="example_src/gantthgridex1.html" target="_top">(<code class="filename">gantthgridex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/gantthgridex1.png" alt="(gantthgridex1.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect3" title="Adjusting the vertical spacing between activity bars"><div class="titlepage"><div><div><h4 class="title"><a name="id2576317"></a>Adjusting the vertical spacing between activity bars</h4></div></div></div>
<p>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</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttGraph::SetVMarginFactor($aFractionMargin)</code></p>
</li></ul></div><p>
</p>
<p>can be used. For example</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;SetVMarginFactor(0.0);</span></pre></td></tr></table></div><p>
</p>
<p>will cause the gantt bars to touch each other since there will be no margins. If
we instead use</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;SetVMarginFactor(1.0);</span></pre></td></tr></table></div><p>
</p>
<p>we will in effect get "double-line-spacing" since we add the width of one activity
height as margin. The default 40% corresponds to</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;SetVMarginFactor(0.4);</span></pre></td></tr></table></div><p>
</p>
</div>
<div class="sect3" title="Adjusting the margins with auto-sizing"><div class="titlepage"><div><div><h4 class="title"><a name="id2576346"></a>Adjusting the margins with auto-sizing</h4></div></div></div>
<p>It is possible to use <code class="code">GanttGraph::SetMargin()</code> 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</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">GanttGraph</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-number">500</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMargin</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-code">, </span><span class="hl-number">30</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
</div>
<div class="sect3" title="Limiting the date range for the Gantt chart"><div class="titlepage"><div><div><h4 class="title"><a name="id2576439"></a>Limiting the date range for the Gantt chart</h4></div></div></div>
<p>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.</p>
<p>This is done by calling the method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttGraph::SetDateRange($aStartDate, $aEndDate)</code></p>
</li></ul></div><p>
</p>
<p>For example the following code snippet would set the specified start and end
date</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;SetDateRange('2001-12-20', '2002-01-20');</span></pre></td></tr></table></div><p>
</p>
</div>
<div class="sect3" title="Specifying the first day in the week"><div class="titlepage"><div><div><h4 class="title"><a name="id2576440"></a>Specifying the first day in the week</h4></div></div></div>
<p>By default Monday is the first day of the week. It is possible to manually set an
arbitrary start day by calling the method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttScale::SetWeekStart($aStartDay)</code></p>
<p><code class="code">$aStartDay</code>, Specified as an integer in the range 0-6
where 0=Sunday, 1=Monday, ..., 6=Saturday</p>
</li></ul></div><p>
</p>
</div>
<div class="sect3" title="Adding plot icons to the graph"><div class="titlepage"><div><div><h4 class="title"><a name="id2576511"></a>Adding plot icons to the graph</h4></div></div></div>
<p>In the same way as was described in <a class="xref" href="ch14s14.html" title="Adding icons (and small images) to the graph">Adding icons (and small images) to the graph</a> 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</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Setup the Gantt graph</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">GanttGraph</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Create some activities</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> ...</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$icon</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">IconPlot</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$icon</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetAnchor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">left</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">top</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$icon</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetCountryFlag</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">norway</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$icon</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetPos</span><span class="hl-brackets">(</span><span class="hl-number">5</span><span class="hl-code">,</span><span class="hl-number">5</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$icon</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMix</span><span class="hl-brackets">(</span><span class="hl-number">50</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$icon</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetScale</span><span class="hl-brackets">(</span><span class="hl-number">1</span><span class="hl-number">.0</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> The above four method calls could also have been done as</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> $icon-&gt;SetCountryFlag('norway', 5,5, 1.0, 50);</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$icon</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Any other gantt formatting</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> ...</span><span class="hl-comment"></span></pre></td></tr></table></div><p>
</p>
<p>The result of adding these lines to a typical Gantt chart is shown in <a class="xref" href="ch16s04.html#fig.ganttex17-flag" title="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 <code class="uri"><a class="uri" href="example_src/ganttex17-flag.html" target="_top">(<code class="filename">ganttex17-flag.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.ganttex17-flag"></a><p class="title"><b>Figure 16.87. Adding a country flag to the top left corner of the gantt graph <code class="uri"><a class="uri" href="example_src/ganttex17-flag.html" target="_top">(<code class="filename">ganttex17-flag.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex17-flag.png" alt="Adding a country flag to the top left corner of the gantt graph (ganttex17-flag.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>For more details on adding icons to a graph see <a class="xref" href="ch14s14.html" title="Adding icons (and small images) to the graph">Adding icons (and small images) to the graph</a> .</p>
</div>
<div class="sect3" title="Adding text strings to the graph"><div class="titlepage"><div><div><h4 class="title"><a name="id2576573"></a>Adding text strings to the graph</h4></div></div></div>
<p>In exactly the same way as was described in <a class="xref" href="ch14s17.html" title="Adding arbitrary texts to the graph">Adding arbitrary texts to the graph</a> it is also possible to add arbitrary
formatted text paragraphs to the gantt chart. </p>
<p>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</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">Text::SetPos($aPosX, $aPosY)</code></p>
<p>Set the absolute position for the text anchor point</p>
</li><li class="listitem">
<p><code class="code">Text::SetScalePos($aDate,$aRow)</code></p>
<p>Set the position for the text anchor point using the actual date scale
(as the horizontal position) and the row number as the vertical
position.</p>
</li></ul></div><p>
</p>
<p>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"</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Add text to top left corner of graph</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$txt1</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Text</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$txt1</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetPos</span><span class="hl-brackets">(</span><span class="hl-number">5</span><span class="hl-code">,</span><span class="hl-number">2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$txt1</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">Note:</span><span class="hl-special">\n</span><span class="hl-string">Estimate done w148</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$txt1</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_BOLD</span><span class="hl-code">,</span><span class="hl-number">12</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$txt1</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">darkred</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$txt1</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Add text to the top bar</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$txt2</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Text</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$txt2</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetScalePos</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">2002-01-01</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-number">1</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$txt2</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_BOLD</span><span class="hl-code">,</span><span class="hl-number">12</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$txt2</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetAlign</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">left</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">center</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$txt2</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">Remember this!</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$txt2</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetBox</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">yellow</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$txt2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>The result of adding these lines to a typical gantt graph is shown in <a class="xref" href="ch16s04.html#fig.gantt_textex1" title="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 <code class="uri"><a class="uri" href="example_src/gantt_textex1.html" target="_top">(<code class="filename">gantt_textex1.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.gantt_textex1"></a><p class="title"><b>Figure 16.88. Adding two text objects to a Gantt graph <code class="uri"><a class="uri" href="example_src/gantt_textex1.html" target="_top">(<code class="filename">gantt_textex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/gantt_textex1.png" alt="Adding two text objects to a Gantt graph (gantt_textex1.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>Since there is no other changes in functionality we refer to <a class="xref" href="ch14s17.html" title="Adding arbitrary texts to the graph">Adding arbitrary texts to the graph</a> for a full discussion of text
paragraph features.</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>This feature was added in v2.5</p>
</div><p>
</p>
</div>
</div>
<div class="sect2" title="Localizing the Gantt chart scale"><div class="titlepage"><div><div><h3 class="title"><a name="sec.gantt-localizing"></a>Localizing the Gantt chart scale</h3></div></div></div>
<p>Since the name of the week and months are constructed by the library it must be
possible to adjust which locale should be used to construct the names.</p>
<p>Depending on the server setup of PHP there might be support for several locales. By
default the locale is set to use the default locale on the server.</p>
<p>A specific locale is specified with the locale string, for example American English is
specified with the string 'EN_US', British English with 'EN_UK' 'nl_NL' for Dutch and so
on. If the server installation does not support the specified locale an error message
like the one shown in <a class="xref" href="ch16s04.html#fig.gantt-locale-error" title="Figure 16.89. Error message when using an unsupported Locale in Gantt chart">Figure 16.89. Error message when using an unsupported Locale in Gantt chart</a> will be shown. </p>
<p>
</p><div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
<p>If the server is running on a Unix derivate the supported locales can be found
by the following command</p>
<p><span class="command"><strong>$&gt; locale -a</strong></span></p>
</div><p>
</p>
<p>
</p><div class="figure"><a name="fig.gantt-locale-error"></a><p class="title"><b>Figure 16.89. Error message when using an unsupported Locale in Gantt chart</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/gantt-locale-error.png" alt="Error message when using an unsupported Locale in Gantt chart"></div>
</div></div><p><br class="figure-break">
</p>
<p>To set the locale the following method is used</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttScale::SetDateLocale($aLocaleString)</code></p>
</li></ul></div><p>
</p>
<p>For example to set the locale to swedish the following line would be needed</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;scale-&gt;SetDateLocale('sv_SE');</span></pre></td></tr></table></div><p>
</p>
<p>An example of using Swedish locale is shown in <a class="xref" href="ch16s04.html#fig.ganttex19" title="Figure 16.90. Using Swedish locale. Notice the L for Lordag instead of S for Saturday (ganttex19.php)">Figure 16.90. Using Swedish locale. Notice the L for Lordag instead of S for Saturday <code class="uri"><a class="uri" href="example_src/ganttex19.html" target="_top">(<code class="filename">ganttex19.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.ganttex19"></a><p class="title"><b>Figure 16.90. Using Swedish locale. Notice the L for Lordag instead of S for Saturday <code class="uri"><a class="uri" href="example_src/ganttex19.html" target="_top">(<code class="filename">ganttex19.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex19.png" alt="Using Swedish locale. Notice the L for Lordag instead of S for Saturday (ganttex19.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>Internally the library uses the PHP function <code class="code">setlocale()</code> and only
affects the category <code class="code">LC_TIME</code></p>
</div><p>
</p>
</div>
<div class="sect2" title="CSIM Support in Gantt charts"><div class="titlepage"><div><div><h3 class="title"><a name="id2576896"></a>CSIM Support in Gantt charts</h3></div></div></div>
<p>The generic description on how to use CSIM (Client side image maps) together with the
library is fully described in <a class="xref" href="ch10.html" title="Chapter 10. Using CSIM (Client side image maps)">Chapter 10. <i>Using CSIM (Client side image maps)</i></a> .</p>
<div class="sect3" title="Adding CSIM (Client side Image Maps) to Gantt charts"><div class="titlepage"><div><div><h4 class="title"><a name="id2576932"></a>Adding CSIM (Client side Image Maps) to Gantt charts</h4></div></div></div>
<p>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.</p>
<p>The targets and the associated "Alt" text for an activity bar is set by using one
or both of the methods</p>
<div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttPlotObject::SetCSIMTarget($aTarget,$aAlt='',
$aWinTarget='')</code></p>
</li><li class="listitem">
<p><code class="code">GanttPlotObject::SetCSIMAlt($aAlt)</code></p>
</li></ul></div><p>The following code snippet sets CSIM targets fro bot the entire
activity bar as well as the title</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$bar-&gt;SetCSIMTarget( &quot;http://localhost/abc/&quot;, &quot;Alt Text for the bar&quot; );
$bar-&gt;title-&gt;SetCSIMTarget( &quot;http://localhost/abc&quot;, &quot;Alt Text for the title&quot; );</span></pre></td></tr></table></div><p>
</p>
<p>The following properties of a Gantt object can have CSIM targets</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">GanttPlotObject::title</code>, </p>
</li><li class="listitem">
<p><code class="code">GanttPlotObject::leftmark</code>,
<code class="code">BarPlot::rightmark</code></p>
</li><li class="listitem">
<p><code class="code">GanttPlotObject::caption</code></p>
</li></ul></div><p>
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>In the example directory there are several complete examples of how to use
CSIM together with Gantt charts.</p>
</div><p>
</p>
</div>
<div class="sect3" title="Specifying CSIM entries for column titles"><div class="titlepage"><div><div><h4 class="title"><a name="id2577044"></a>Specifying CSIM entries for column titles</h4></div></div></div>
<p>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 <code class="code">SetCSIMTarget()</code> The following code snippet shows how to specify
that.</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$bar-&gt;title-&gt;SetCSIMTarget(
array('sometarget1.html', 'sometarget1.html'),
array('alttext1', 'alttext2'));</span></pre></td></tr></table></div><p>
</p>
</div>
</div>
<div class="sect2" title="Some final Gantt graph examples"><div class="titlepage"><div><div><h3 class="title"><a name="id2577062"></a>Some final Gantt graph examples</h3></div></div></div>
<p>The example given below illustrates one or more of the features available for the
gantt graphs and shows how they may be combined to achive the wanted effect.</p>
<p></p>
<div class="sect3" title="Examples of using hours and minute scales"><div class="titlepage"><div><div><h4 class="title"><a name="id2577082"></a>Examples of using hours and minute scales</h4></div></div></div>
<p>
</p><div class="figure"><a name="fig.gantthourminex1"></a><p class="title"><b>Figure 16.91. Using multiple title columns with a scale of one day <code class="uri"><a class="uri" href="example_src/gantthourminex1.html" target="_top">(<code class="filename">gantthourminex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/gantthourminex1.png" alt="Using multiple title columns with a scale of one day (gantthourminex1.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>It is not possible to show less than one day in the scale. This is a
limitation of the library.</p>
</div><p>
</p>
</div>
<div class="sect3" title="Adding multiple activities with markers and indenting titles"><div class="titlepage"><div><div><h4 class="title"><a name="id2577145"></a>Adding multiple activities with markers and indenting titles</h4></div></div></div>
<p>
</p><div class="figure"><a name="fig.ganttex30"></a><p class="title"><b>Figure 16.92. Using multiple markers and indenting titles in the Gantt chart <code class="uri"><a class="uri" href="example_src/ganttex30.html" target="_top">(<code class="filename">ganttex30.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttex30.png" alt="Using multiple markers and indenting titles in the Gantt chart (ganttex30.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect3" title="Using grouping of bars together with constraints"><div class="titlepage"><div><div><h4 class="title"><a name="id2577161"></a>Using grouping of bars together with constraints</h4></div></div></div>
<p>
</p><div class="figure"><a name="fig.ganttconstrainex2"></a><p class="title"><b>Figure 16.93. Using a grouping bar together with constraints <code class="uri"><a class="uri" href="example_src/ganttconstrainex2.html" target="_top">(<code class="filename">ganttconstrainex2.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ganttconstrainex2.png" alt="Using a grouping bar together with constraints (ganttconstrainex2.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
</div>
</div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"><a accesskey="u" href="ch16.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>
Reference in New Issue View Git Blame Copy Permalink