site/jpgraph/docs/chunkhtml/ch16s04.html

<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>