[Sommaire] [Imprimer]

   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
   2  <HTML>
   3  <HEAD>
   4  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-iso-8859-1">
   5  <LINK REL="Start" HREF="index.html">
   6  <LINK REL="Contents" HREF="toc.html">
   7  <LINK REL="Prev" HREF="1010Groupingactivities.html">
   8  <LINK REL="Next" HREF="10111Addingatitleforthecolumns.html">
   9  <STYLE TYPE="text/css"><!--
  10  BODY { font-family: serif }
  11  H1 { font-family: sans-serif }
  12  H2 { font-family: sans-serif }
  13  H3 { font-family: sans-serif }
  14  H4 { font-family: sans-serif }
  15  H5 { font-family: sans-serif }
  16  H6 { font-family: sans-serif }
  17  SUB { font-size: smaller }
  18  SUP { font-size: smaller }
  19  PRE { font-family: monospace }
  20  A { text-decoration: none }
  21  --></STYLE>
  22  </HEAD>
  23  <BODY>
  24  <A HREF="toc.html">Contents</A>
  25  <A HREF="1010Groupingactivities.html">Previous</A>
  26  <A HREF="10111Addingatitleforthecolumns.html">Next</A>
  27  <HR NOSHADE>
  28  <H2><A NAME="10_11">10.11 Using multiple columns as titles</A></H2>
  29  <P> It is often of interest not only to show one title for a gantt bar
  30   but often one wants to show, title, start date, end date, duration or
  31   effort and so on. Up until now we have, to keep things simple only
  32   shown a single title for each activity. We will now show you how you
  33   can specify an arbitrary number of columns as titles for a Gantt chart
  34   as well as adding icons in the graph columns.</P>
  35  <P> First out is an example to help visualize what we will achieve<DIV class="example">
  36  <BR> <A href="exframes/frame_gantticonex1.html" target="blank"><IMG border="0"
  37  HEIGHT="197"  src="img/gantticonex1.png" WIDTH="590"></A>
  38  <BR><B>Figure 160:</B> A Gantt chart with multiple columns <A href="exframes/frame_gantticonex1.html"
  39  target="blank">[src]</A>&nbsp;
  40  <P></P>
  41  </DIV></P>
  42  <P> To use multiple columns there is two steps. First you need to set
  43   the titles (name, color, fonts etc). Thereafter you need to add the
  44   title columns for each individual bar.</P>
  45  <P> To set the columns you will have to work with the<I> Activity
  46   information</I> property of the scale. The following code excerpt show
  47   this<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
  48  &nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT
  49  color="#007700">-&gt;</FONT><FONT color="#0000BB">actinfo</FONT><FONT color="#007700">
  50  -&gt;</FONT><FONT color="#0000BB">SetColTitles</FONT><FONT color="#007700">
  51  (
  52  <BR>&nbsp;&nbsp;&nbsp;&nbsp;array(</FONT><FONT color="#DD0000">'Note'</FONT><FONT color="#007700">
  53  ,</FONT><FONT color="#DD0000">'Task'</FONT><FONT color="#007700">,</FONT><FONT
  54  color="#DD0000">'Duration'</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
  55  'Start'</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
  56  'Finish'</FONT><FONT color="#007700">),array(</FONT><FONT color="#0000BB">
  57  30</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">100</FONT><FONT
  58  color="#007700">));</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
  59  </P>
  60  <P>You will notice two things. We fist specify the titles using an
  61   array. We have also specified a second array with the numbers 30 and
  62   100. This is an optional array that specifies the minimum width of, in
  63   this case, the first two columns. By default the columns will be wide
  64   enough to hold the widest text string in the column. However for
  65   esthetic reasons you might sometimes want to increase the minium width.
  66   This is what we have done here for the first two columns.</P>
  67  <P> Furthermore you can also adjust the background colors and the style
  68   and colors of the vertical dividing grid lines. In the previous image
  69   we used the lines<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT
  70  color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
  71  scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">actinfo</FONT><FONT
  72  color="#007700">-&gt;</FONT><FONT color="#0000BB">SetBackgroundColor</FONT><FONT
  73  color="#007700">(</FONT><FONT color="#DD0000">'green:0.5@0.5'</FONT><FONT
  74  color="#007700">);
  75  <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
  76  color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
  77  actinfo</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
  78  SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
  79  FF_ARIAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
  80  FS_NORMAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">10</FONT><FONT
  81  color="#007700">);
  82  <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
  83  color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
  84  actinfo</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">vgrid</FONT><FONT
  85  color="#007700">-&gt;</FONT><FONT color="#0000BB">SetStyle</FONT><FONT color="#007700">
  86  (</FONT><FONT color="#DD0000">'solid'</FONT><FONT color="#007700">);
  87  <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
  88  color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
  89  actinfo</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">vgrid</FONT><FONT
  90  color="#007700">-&gt;</FONT><FONT color="#0000BB">SetColor</FONT><FONT color="#007700">
  91  (</FONT><FONT color="#DD0000">'gray'</FONT><FONT color="#007700">);</FONT><FONT
  92  color="#0000BB"></FONT></FONT></CODE></DIV></P>
  93  <P> The style for the grid lines can also be &quot;dashed&quot;, &quot;dotted&quot; or
  94   &quot;longdashed&quot; as in other line formatting contexts within the library.
  95   You can also adjust if you would like the small &quot;3D&quot; effect in the
  96   titles. By default this is enabled. You can easily turn this of with a
  97   call to<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
  98  &nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT
  99  color="#007700">-&gt;</FONT><FONT color="#0000BB">actinfo</FONT><FONT color="#007700">
 100  -&gt;</FONT><FONT color="#0000BB">SetStyle</FONT><FONT color="#007700">(</FONT><FONT
 101  color="#0000BB">ACTINFO_2D</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
 102  </FONT></FONT></CODE></DIV></P>
 103  <P> To adjust the colors of the vertical dividing lines in the title the
 104   method SetColor() is used as in
 105   &quot;$graph-&gt;scale-&gt;actinfo-&gt;SetColor('navy');&quot;.</P>
 106  <P> The second thins is to actually populate the columns. This is done
 107   (of course) as you add the activity bars to the graph. Previous we just
 108   used a string as the title when we wasn't using columns. By simply
 109   replacing this string with an array we specify the content of the
 110   columns.</P>
 111  <P> For example to specify two column titles we just create a
 112   hypothetical Gantt bar as In the full example above we put all this in
 113   arrays to make for better coding practice since we create several bars.</P>
 114  <P> In addition to ordinary text you can also add an image or any of the
 115   predefined icons available. In order to add that in a column you first
 116   create an instance of<I> IconImage()</I> and then specify that instance
 117   instead of the text. So in the previous code snippet if we wanted a
 118   &quot;open folder&quot; image in the first column we would change the lines to<DIV
 119  class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
 120  &nbsp;$iconopen&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
 121  IconImage</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
 122  GICON_FOLDEROPEN</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
 123  0.6</FONT><FONT color="#007700">);
 124  <BR></FONT><FONT color="#0000BB">$title2</FONT><FONT color="#007700">=</FONT><FONT
 125  color="#DD0000">&quot;&quot;</FONT><FONT color="#007700">;
 126  <BR></FONT><FONT color="#0000BB">$bar&nbsp;</FONT><FONT color="#007700">
 127  =&nbsp;new&nbsp;</FONT><FONT color="#0000BB">GanttBar</FONT><FONT color="#007700">
 128  (</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,array(</FONT><FONT
 129  color="#0000BB">$iconopen</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
 130  $title2</FONT><FONT color="#007700">),</FONT><FONT color="#DD0000">
 131  &quot;2003-11-23&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
 132  &quot;2003-12-05&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
 133  </FONT></CODE></DIV></P>
 134  <P> The available builtin icons are</P>
 135  <UL>
 136  <LI>GICON_WARNINGRED</LI>
 137  <LI>GICON_TEXT</LI>
 138  <LI>GICON_ENDCONS</LI>
 139  <LI>GICON_MAIL</LI>
 140  <LI>GICON_STARTCONS</LI>
 141  <LI>GICON_CALC</LI>
 142  <LI>GICON_MAGNIFIER</LI>
 143  <LI>GICON_LOCK</LI>
 144  <LI>GICON_STOP</LI>
 145  <LI>GICON_WARNINGYELLOW</LI>
 146  <LI>GICON_FOLDEROPEN</LI>
 147  <LI>GICON_FOLDER</LI>
 148  <LI>GICON_TEXTIMPORTANT</LI>
 149  </UL>
 150  <P> In addition you can also use any of you own images if you specify
 151   the argument as a string, for example<DIV class="phpscript"><CODE><FONT color="#000000">
 152   <FONT color="#0000BB">&nbsp;$myicon&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
 153  color="#0000BB">IconImage</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
 154  'myicon.png'</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
 155  </FONT></CODE></DIV></P>
 156  <P> If you wonder, the second argument in the<I> IconImage()</I> call is
 157   an optional scaling factor which you can use to adjust the size of the
 158   image.</P>
 159  <HR NOSHADE>
 160  <A HREF="toc.html">Contents</A>
 161  <A HREF="1010Groupingactivities.html">Previous</A>
 162  <A HREF="10111Addingatitleforthecolumns.html">Next</A>
 163  </BODY>
 164  </HTML>