| [ Index ] |
|
Code source de jpGraph 2.2 |
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="92CapabilitiesinJpGraphGanttmodule.html"> 8 <LINK REL="Next" HREF="94ThestructureofaGanttchart.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="92CapabilitiesinJpGraphGanttmodule.html">Previous</A> 26 <A HREF="94ThestructureofaGanttchart.html">Next</A> 27 <HR NOSHADE> 28 <H2><A NAME="9_3">9.3 A simple Gantt chart</A></H2> 29 <P> Time to show you an example of a Gantt chart and how easy it is to 30 make one. Lets make it the simplest possible Gantt chart. One activity, 31 named "Project", which lasts from "2001-11-01" to "2002-02-20".</P> 32 <P> All it takes to do this (using default values for everything) is the 33 following code.<DIV class="phpscript">(File: ganttex00.php) 34 <BR><CODE><FONT color="#000000"> <FONT color="#0000BB"><?php 35 <BR></FONT><FONT color="#007700">include (</FONT><FONT color="#DD0000"> 36 "../jpgraph.php"</FONT><FONT color="#007700">); 37 <BR>include (</FONT><FONT color="#DD0000">"../jpgraph_gantt.php"</FONT><FONT 38 color="#007700">); 39 <BR> 40 <BR></FONT><FONT color="#FF8000">// A new graph with automatic size 41 <BR></FONT><FONT color="#0000BB">$graph </FONT><FONT color="#007700"> 42 = new </FONT><FONT color="#0000BB">GanttGraph</FONT><FONT color="#007700"> 43 (</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT 44 color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000"> 45 "auto"</FONT><FONT color="#007700">); 46 <BR> 47 <BR></FONT><FONT color="#FF8000">// A new activity on row '0' 48 <BR></FONT><FONT color="#0000BB">$activity </FONT><FONT color="#007700"> 49 = new </FONT><FONT color="#0000BB">GanttBar</FONT><FONT color="#007700"> 50 (</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT 51 color="#DD0000">"Project"</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000"> 52 "2001-12-21"</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000"> 53 "2002-01-20"</FONT><FONT color="#007700">); 54 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 55 color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 56 $activity</FONT><FONT color="#007700">); 57 <BR> 58 <BR></FONT><FONT color="#FF8000">// Display the Gantt chart 59 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 60 color="#0000BB">Stroke</FONT><FONT color="#007700">(); 61 <BR></FONT><FONT color="#0000BB">?> 62 <BR></FONT></FONT></CODE></DIV></P> 63 <P> The resulting image is shown in Figure 147 below.<DIV style="margin-left:-120px;"> 64 <DIV class="example"> 65 <BR> <A href="exframes/frame_ganttex00.html" target="blank"><IMG border="0" 66 HEIGHT="112" src="img/img/img/img/img/img/ganttex00.png" WIDTH="486"></A> 67 <BR><B>Figure 147:</B> Your first simple Gantt chart. <A href="exframes/frame_ganttex00.html" 68 target="blank">[src]</A> 69 <P></P> 70 </DIV> 71 <P></P> 72 </DIV></P> 73 <P> Let's note a few things with the above image and code:</P> 74 <UL> 75 <LI> You always need to include both jpgraph.php and jpgraph_gantt.php</LI> 76 <LI> A bar is specified a minimum of four parameters, vertical position 77 (more about that in a second), a title, start and end date.</LI> 78 <LI> If you don't specify a size for the image it will be automatically 79 decided based on the min and max dates for the bars rounded to a full 80 week.</LI> 81 <LI> By default the week and day scale are displayed.</LI> 82 <LI> Weekend background are displayed default in a slightly gray color</LI> 83 <LI> Sundays are written in red.</LI> 84 <LI> Weeks are numbered according to ISO 8601</LI> 85 <LI> Activity bars are rendered as blue stripes on a white background by 86 default.</LI> 87 </UL> 88 <P> So, lets start making this graph a little bit more interesting. 89 First we are going to add a title, then we will add a month scale and 90 finally we will change the color of the bar.</P> 91 <P> All that is taken care of in the code below.<DIV class="phpscript"> 92 (File: ganttex01.php) 93 <BR><CODE><FONT color="#000000"> <FONT color="#0000BB"><?php 94 <BR></FONT><FONT color="#007700">include (</FONT><FONT color="#DD0000"> 95 "../jpgraph.php"</FONT><FONT color="#007700">); 96 <BR>include (</FONT><FONT color="#DD0000">"../jpgraph_gantt.php"</FONT><FONT 97 color="#007700">); 98 <BR> 99 <BR></FONT><FONT color="#0000BB">$graph </FONT><FONT color="#007700"> 100 = new </FONT><FONT color="#0000BB">GanttGraph</FONT><FONT color="#007700"> 101 (</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT 102 color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000"> 103 "auto"</FONT><FONT color="#007700">); 104 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 105 color="#0000BB">SetShadow</FONT><FONT color="#007700">(); 106 <BR> 107 <BR></FONT><FONT color="#FF8000">// Add title and subtitle 108 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 109 color="#0000BB">title</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 110 Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 111 "A nice main title"</FONT><FONT color="#007700">); 112 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 113 color="#0000BB">title</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 114 SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 115 FF_ARIAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB"> 116 FS_BOLD</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">12</FONT><FONT 117 color="#007700">); 118 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 119 color="#0000BB">subtitle</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 120 Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 121 "(Draft version)"</FONT><FONT color="#007700">); 122 <BR> 123 <BR></FONT><FONT color="#FF8000">// Show day, week and month scale 124 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 125 color="#0000BB">ShowHeaders</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 126 GANTT_HDAY </FONT><FONT color="#007700">| </FONT><FONT color="#0000BB"> 127 GANTT_HWEEK </FONT><FONT color="#007700">| </FONT><FONT color="#0000BB"> 128 GANTT_HMONTH</FONT><FONT color="#007700">); 129 <BR> 130 <BR></FONT><FONT color="#FF8000"> 131 // Instead of week number show the date for the first day in the week 132 <BR>// on the week scale 133 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 134 color="#0000BB">scale</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 135 week</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">SetStyle</FONT><FONT 136 color="#007700">(</FONT><FONT color="#0000BB">WEEKSTYLE_FIRSTDAY</FONT><FONT 137 color="#007700">); 138 <BR> 139 <BR></FONT><FONT color="#FF8000"> 140 // Make the week scale font smaller than the default 141 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 142 color="#0000BB">scale</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 143 week</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">SetFont</FONT><FONT 144 color="#007700">(</FONT><FONT color="#0000BB">FF_FONT0</FONT><FONT color="#007700"> 145 ); 146 <BR> 147 <BR></FONT><FONT color="#FF8000"> 148 // Use the short name of the month together with a 2 digit year 149 <BR>// on the month scale 150 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 151 color="#0000BB">scale</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 152 month</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 153 SetStyle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 154 MONTHSTYLE_SHORTNAMEYEAR2</FONT><FONT color="#007700">); 155 <BR> 156 <BR></FONT><FONT color="#FF8000"> 157 // Format the bar for the first activity 158 <BR>// ($row,$title,$startdate,$enddate) 159 <BR></FONT><FONT color="#0000BB">$activity </FONT><FONT color="#007700"> 160 = new </FONT><FONT color="#0000BB">GanttBar</FONT><FONT color="#007700"> 161 (</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT 162 color="#DD0000">"Project"</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000"> 163 "2001-12-21"</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000"> 164 "2002-01-20"</FONT><FONT color="#007700">); 165 <BR> 166 <BR></FONT><FONT color="#FF8000"> 167 // Yellow diagonal line pattern on a red background 168 <BR></FONT><FONT color="#0000BB">$activity</FONT><FONT color="#007700"> 169 -></FONT><FONT color="#0000BB">SetPattern</FONT><FONT color="#007700">(</FONT><FONT 170 color="#0000BB">BAND_RDIAG</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000"> 171 "yellow"</FONT><FONT color="#007700">); 172 <BR></FONT><FONT color="#0000BB">$activity</FONT><FONT color="#007700"> 173 -></FONT><FONT color="#0000BB">SetFillColor</FONT><FONT color="#007700"> 174 (</FONT><FONT color="#DD0000">"red"</FONT><FONT color="#007700">); 175 <BR> 176 <BR></FONT><FONT color="#FF8000">// Finally add the bar to the graph 177 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 178 color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 179 $activity</FONT><FONT color="#007700">); 180 <BR> 181 <BR></FONT><FONT color="#FF8000">// ... and display it 182 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 183 color="#0000BB">Stroke</FONT><FONT color="#007700">(); 184 <BR></FONT><FONT color="#0000BB">?> 185 <BR></FONT></FONT></CODE></DIV> The resulting image is shown in Figure 186 148 below.<DIV class="example"> 187 <BR> <A href="exframes/frame_ganttex01.html" target="blank"><IMG border="0" 188 HEIGHT="152" src="img/img/img/img/img/img/ganttex01.png" WIDTH="486"></A> 189 <BR><B>Figure 148:</B> Making the Gantt chart a little bit more 190 interesting with title and more colors. <A href="exframes/frame_ganttex01.html" 191 target="blank">[src]</A> 192 <P></P> 193 </DIV></P> 194 <P> From the above example you might note a few things</P> 195 <UL> 196 <LI> The margins adjust automatically to the added title and subtitle</LI> 197 <LI> The height of the scale headers adjust automatically when you 198 change the font.</LI> 199 <LI> You have great flexibility in choosing what format the scale labels 200 will have. If you for example wanted the full 4 digit year in the month 201 header all you have to change is use the constant 202 MONTHSTYLE_SHORTNAMEYEAR2 in the code above to 203 MONTHSTYLE_SHORTNAMEYEAR4</LI> 204 <LI> You have full freedom of manipulating headers in terms of font, 205 color, background and size.</LI> 206 </UL> 207 <P> To show that this is really simple let's show the full year in the 208 month, and set the header style to be white text on a dark blue 209 background by adding the lines<DIV class="phpscript"><CODE><FONT color="#000000"> 210 <FONT color="#0000BB"> </FONT><FONT color="#FF8000"> 211 // Use the short name of the month together with a 4 digit year 212 <BR>// on the month scale 213 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 214 color="#0000BB">scale</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 215 month</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 216 SetStyle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 217 MONTHSTYLE_SHORTNAMEYEAR4</FONT><FONT color="#007700">); 218 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 219 color="#0000BB">scale</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 220 month</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 221 SetTextColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 222 "white"</FONT><FONT color="#007700">); 223 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 224 color="#0000BB">scale</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 225 month</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 226 SetBackgroundColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 227 "blue"</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT> 228 </FONT></CODE></DIV></P> 229 <P>to the code above. The resulting image is shown in Figure 149<DIV class="example"> 230 <BR> <A href="exframes/frame_ganttex02.html" target="blank"><IMG border="0" 231 HEIGHT="112" src="img/img/img/img/img/img/ganttex02.png" WIDTH="381"></A> 232 <BR><B>Figure 149:</B> Enhancing the scale headers. <A href="exframes/frame_ganttex02.html" 233 target="blank">[src]</A> 234 <P></P> 235 </DIV></P> 236 <P></P> 237 <HR NOSHADE> 238 <A HREF="toc.html">Contents</A> 239 <A HREF="92CapabilitiesinJpGraphGanttmodule.html">Previous</A> 240 <A HREF="94ThestructureofaGanttchart.html">Next</A> 241 </BODY> 242 </HTML>
titre
Description
Corps
titre
Description
Corps
titre
Description
Corps
titre
Corps
| Généré le : Sat Nov 24 09:27:55 2007 | par Balluche grâce à PHPXref 0.7 |
|
|