2384 lines
211 KiB
HTML
2384 lines
211 KiB
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"><?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">?></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->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->scale->hour->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->scale->month->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->scale->week->grid->Show();
|
|||
|
|
$graph->scale->week->grid->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 -> 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 -> 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"><?php</span><span class="hl-code">
|
|||
|
|
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">hour</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">hour</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">hour</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">hour</span><span class="hl-code">-></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">?></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->scale->day->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->scale->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->scale->week->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->scale->month->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"><?php</span><span class="hl-code"> </span><span class="hl-comment">//</span><span class="hl-comment"> content="text/plain; charset=utf-8"</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">"</span><span class="hl-string">Activity 1</span><span class="hl-quotes">"</span><span class="hl-code">,</span><span class="hl-quotes">"</span><span class="hl-string">2001-12-21</span><span class="hl-quotes">"</span><span class="hl-code">,</span><span class="hl-quotes">"</span><span class="hl-string">2002-01-19</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">-></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">-></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">?></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->mark->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->title->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->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->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->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"><?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">-></span><span class="hl-identifier">rightMark</span><span class="hl-code">-></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">-></span><span class="hl-identifier">rightMark</span><span class="hl-code">-></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">-></span><span class="hl-identifier">rightMark</span><span class="hl-code">-></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">-></span><span class="hl-identifier">rightMark</span><span class="hl-code">-></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">-></span><span class="hl-identifier">rightMark</span><span class="hl-code">-></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">-></span><span class="hl-identifier">rightMark</span><span class="hl-code">-></span><span class="hl-identifier">title</span><span class="hl-code">-></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">-></span><span class="hl-identifier">rightMark</span><span class="hl-code">-></span><span class="hl-identifier">title</span><span class="hl-code">-></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">-></span><span class="hl-identifier">rightMark</span><span class="hl-code">-></span><span class="hl-identifier">title</span><span class="hl-code">-></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">?></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"><?php</span><span class="hl-code">
|
|||
|
|
</span><span class="hl-var">$activity</span><span class="hl-code">-></span><span class="hl-identifier">caption</span><span class="hl-code">-></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">-></span><span class="hl-identifier">caption</span><span class="hl-code">-></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">?></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->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->progress->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->progress->SetPattern( BAND_RDIAG , "blue" );</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->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"><?php</span><span class="hl-code">
|
|||
|
|
</span><span class="hl-var">$groupbar</span><span class="hl-code">-></span><span class="hl-identifier">leftMark</span><span class="hl-code">-></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">-></span><span class="hl-identifier">leftMark</span><span class="hl-code">-></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">-></span><span class="hl-identifier">rightMark</span><span class="hl-code">-></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">-></span><span class="hl-identifier">rightMark</span><span class="hl-code">-></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">?></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( <act1_row>, <act1_type>, <act1_title>, <act1_start>, <act1_end>, <act1_caption>, <act1_csimtarget>, <act1_title_csimtarget> ),
|
|||
|
|
array( <act2_row>, <act2_type>, <act2_title>, <act2_start>, <act2_end>, <act2_caption>, <act2_csimtarget>, <act2_title_csimtarget> ),
|
|||
|
|
...
|
|||
|
|
array( <actN_row>, <actN_type>, <actN_title>, <actN_start>, <actN_end>, <actN_caption>, <actN_csimtarget>, <actN_title_csimtarget> ));</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"><act_row></code>, Which row in the gantt chart this activity
|
|||
|
|
shall be drawn on </p>
|
|||
|
|
</li><li class="listitem">
|
|||
|
|
<p><code class="code"><act_type></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"><act_title></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"><act_start></code>, <code class="code"><act_end></code>, Start and end date
|
|||
|
|
for the activity. For ACTYPE_MILESTONE only the <act_start> shall be
|
|||
|
|
specified.</p>
|
|||
|
|
</li><li class="listitem">
|
|||
|
|
<p><code class="code"><act_caption></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(<act1_row>, <act2_row>, <type>),
|
|||
|
|
array(<act1_row>, <act2_row>, <type>),
|
|||
|
|
...
|
|||
|
|
array(<act1_row>, <act2_row>, <type>));</span></pre></td></tr></table></div><p>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
|||
|
|
<p><act1_row>, <act2_row>, Start and end row for this constraint</p>
|
|||
|
|
</li><li class="listitem">
|
|||
|
|
<p><type>, 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( <act1_row>, <act1_progress> ),
|
|||
|
|
array( <act2_row>, <act2_progress> ),
|
|||
|
|
...
|
|||
|
|
array( <act2_row>, <act2_progress> ));</span></pre></td></tr></table></div><p>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
|||
|
|
<p><act_row>, The row that has the activity with the specified
|
|||
|
|
progress</p>
|
|||
|
|
</li><li class="listitem">
|
|||
|
|
<p><act_progress>, 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 , "Phase 1" , "2001-10-26" , "2001-11-23" , "" ),
|
|||
|
|
array( 1 , ACTYPE_NORMAL , " Label 2" , "2001-10-26" , "2001-11-13" , "[KJ]" ),
|
|||
|
|
array( 2 , ACTYPE_NORMAL , " Label 3" , "2001-11-20" , "2001-11-22" , "[EP]" ),
|
|||
|
|
array( 3 , ACTYPE_MILESTONE , " Phase 1 Done" , "2001-11-23" , "M2" ) );</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"><?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">-></span><span class="hl-identifier">title</span><span class="hl-code">-></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">Gantt Graph using CreateSimple()</span><span class="hl-quotes">"</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">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">week</span><span class="hl-code">-></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">-></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">-></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">?></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->scale->actinfo->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"><?php</span><span class="hl-code">
|
|||
|
|
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">actinfo</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">actinfo</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">actinfo</span><span class="hl-code">-></span><span class="hl-identifier">vgrid</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">actinfo</span><span class="hl-code">-></span><span class="hl-identifier">vgrid</span><span class="hl-code">-></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">?></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->scale->actinfo->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->scale->actinfo->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 ), "2003-11-23" , "2003-12-05" );</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 . "\t" . $title2, "2003-11-23" , "2003-12-05" );</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 >= 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"><?php</span><span class="hl-code">
|
|||
|
|
</span><span class="hl-var">$bar</span><span class="hl-code">-></span><span class="hl-identifier">title</span><span class="hl-code">-></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">-></span><span class="hl-identifier">title</span><span class="hl-code">-></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">?></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"><?php</span><span class="hl-code">
|
|||
|
|
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">tableTitle</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">tableTitle</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">tableTitle</span><span class="hl-code">-></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">?></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"><?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">?></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"><?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">?></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"><?php</span><span class="hl-code">
|
|||
|
|
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">tableTitle</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">tableTitle</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">tableTitle</span><span class="hl-code">-></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">?></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"><?php</span><span class="hl-code">
|
|||
|
|
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">divider</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">divider</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">dividerh</span><span class="hl-code">-></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">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">dividerh</span><span class="hl-code">-></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">?></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->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"><?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">-></span><span class="hl-identifier">hgrid</span><span class="hl-code">-></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">-></span><span class="hl-identifier">hgrid</span><span class="hl-code">-></span><span class="hl-identifier">line</span><span class="hl-code">-></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">-></span><span class="hl-identifier">hgrid</span><span class="hl-code">-></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">?></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"><?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">-></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">-></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">?></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->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->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->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"><?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">-></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">?></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->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"><?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">-></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">-></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">-></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">-></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">-></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->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">-></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"><?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">-></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">-></span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">"</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">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
|||
|
|
</span><span class="hl-var">$txt1</span><span class="hl-code">-></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">-></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">-></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">-></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">-></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">-></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">-></span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">Remember this!</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">-></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">-></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">?></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>$> 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->scale->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->SetCSIMTarget( "http://localhost/abc/", "Alt Text for the bar" );
|
|||
|
|
$bar->title->SetCSIMTarget( "http://localhost/abc", "Alt Text for the title" );</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->title->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>
|