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