| [ 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="7WorkingwithorthogonalXYplots.html"> 8 <LINK REL="Next" HREF="711AddingplotmarkstolineplotsXXX.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="7WorkingwithorthogonalXYplots.html">Previous</A> 26 <A HREF="711AddingplotmarkstolineplotsXXX.html">Next</A> 27 <HR NOSHADE> 28 <H2><A NAME="7_1">7.1 Line plots</A></H2> 29 <P> The first example draws a line graph consisting of 10 Y-values. In 30 this first example we show the full code. In the following examples we 31 will only show interesting piece of the code.<DIV class="phpscript"> 32 (File: example0.php) 33 <BR><CODE><FONT color="#000000"> <FONT color="#0000BB"><?php 34 <BR></FONT><FONT color="#007700">include (</FONT><FONT color="#DD0000"> 35 "../jpgraph.php"</FONT><FONT color="#007700">); 36 <BR>include (</FONT><FONT color="#DD0000">"../jpgraph_line.php"</FONT><FONT 37 color="#007700">); 38 <BR> 39 <BR></FONT><FONT color="#FF8000">// Some data 40 <BR></FONT><FONT color="#0000BB">$ydata </FONT><FONT color="#007700"> 41 = array(</FONT><FONT color="#0000BB">11</FONT><FONT color="#007700">,</FONT><FONT 42 color="#0000BB">3</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB"> 43 8</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">12</FONT><FONT 44 color="#007700">,</FONT><FONT color="#0000BB">5</FONT><FONT color="#007700"> 45 ,</FONT><FONT color="#0000BB">1</FONT><FONT color="#007700">,</FONT><FONT 46 color="#0000BB">9</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB"> 47 13</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">5</FONT><FONT 48 color="#007700">,</FONT><FONT color="#0000BB">7</FONT><FONT color="#007700"> 49 ); 50 <BR> 51 <BR></FONT><FONT color="#FF8000"> 52 // Create the graph. These two calls are always required 53 <BR></FONT><FONT color="#0000BB">$graph </FONT><FONT color="#007700"> 54 = new </FONT><FONT color="#0000BB">Graph</FONT><FONT color="#007700">(</FONT><FONT 55 color="#0000BB">350</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB"> 56 250</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">"auto"</FONT><FONT 57 color="#007700">); 58 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 59 color="#0000BB">SetScale</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 60 "textlin"</FONT><FONT color="#007700">); 61 <BR> 62 <BR></FONT><FONT color="#FF8000">// Create the linear plot 63 <BR></FONT><FONT color="#0000BB">$lineplot</FONT><FONT color="#007700"> 64 =new </FONT><FONT color="#0000BB">LinePlot</FONT><FONT color="#007700">(</FONT><FONT 65 color="#0000BB">$ydata</FONT><FONT color="#007700">); 66 <BR></FONT><FONT color="#0000BB">$lineplot</FONT><FONT color="#007700"> 67 -></FONT><FONT color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT 68 color="#DD0000">"blue"</FONT><FONT color="#007700">); 69 <BR> 70 <BR></FONT><FONT color="#FF8000">// Add the plot to the graph 71 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 72 color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 73 $lineplot</FONT><FONT color="#007700">); 74 <BR> 75 <BR></FONT><FONT color="#FF8000">// Display the graph 76 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 77 color="#0000BB">Stroke</FONT><FONT color="#007700">(); 78 <BR></FONT><FONT color="#0000BB">?> 79 <BR></FONT></FONT></CODE></DIV><DIV class="example"> 80 <BR> <A href="exframes/frame_example0.html" target="blank"><IMG border="0" 81 HEIGHT="250" src="img/img/img/img/img/img/example0.png" WIDTH="350"></A> 82 <BR><B>Figure 4:</B> A simple line graph <A href="exframes/frame_example0.html" 83 target="blank">[src]</A> 84 <P></P> 85 </DIV></P> 86 <P></P> 87 <P> You might note a few things</P> 88 <UL> 89 <LI>Both the X and Y axis have been automatically scaled. We will later 90 on show how you might control the auto scaling how it determines the 91 number of ticks which is displayed.</LI> 92 <LI>By default the Y-grid is displayed in a "soft" color</LI> 93 <LI>By default the image is bordered and the margins are slightly gray.</LI> 94 <LI>By default the 0 label on the Y-axis is not displayed</LI> 95 </UL> 96 <P> This is a perfect fine graph but looks a little bit "sparse". To 97 make it more interesting we might want to add a few things like</P> 98 <UL> 99 <LI>A title for the graph</LI> 100 <LI> Title for the axis</LI> 101 <LI>Increase the margins to account for the title of the axis</LI> 102 </UL> 103 <P> From looking at the previous example you can see that you access all 104 properties of JpGraph through the objects you create. Graph(), 105 LinePlot() and so on. In general all objects you can see in the graph 106 is accessed through a named instance.</P> 107 <P> For example the title of the graph is accessed through the 108 'Graph::title' property. So to specify a title string you make a call 109 to the 'Set()' method on the title property as in:</P> 110 <P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB"> 111 $graph</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">title</FONT><FONT 112 color="#007700">-></FONT><FONT color="#0000BB">Set</FONT><FONT color="#007700"> 113 (</FONT><FONT color="#DD0000">'Example 2'</FONT><FONT color="#007700">);</FONT><FONT 114 color="#0000BB"></FONT></FONT></CODE></DIV></P> 115 <P> So by adding just a few more lines to the previous code we get a 116 graph as shown below.<DIV class="example"> 117 <BR> <A href="exframes/frame_example2.html" target="blank"><IMG border="0" 118 HEIGHT="200" src="img/img/img/img/img/img/example2.png" WIDTH="300"></A> 119 <BR><B>Figure 5:</B> Same basic graph as in previous figure but with a 120 titles for graph and axis. <A href="exframes/frame_example2.html" target="blank"> 121 [src]</A> 122 <P></P> 123 </DIV></P> 124 <P>To achieve this we just needed to add a few more lines. (We only show 125 the part of example 1 we changed, to look at the full source just click 126 the [src] link in the caption. )<DIV class="phpscript"><CODE><FONT color="#000000"> 127 <FONT color="#0000BB"> </FONT><FONT color="#FF8000"> 128 // Setup margin and titles 129 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 130 color="#0000BB">img</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 131 SetMargin</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">40</FONT><FONT 132 color="#007700">,</FONT><FONT color="#0000BB">20</FONT><FONT color="#007700"> 133 ,</FONT><FONT color="#0000BB">20</FONT><FONT color="#007700">,</FONT><FONT 134 color="#0000BB">40</FONT><FONT color="#007700">); 135 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 136 color="#0000BB">title</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 137 Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 138 "Example 2"</FONT><FONT color="#007700">); 139 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 140 color="#0000BB">xaxis</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 141 title</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">Set</FONT><FONT 142 color="#007700">(</FONT><FONT color="#DD0000">"X-title"</FONT><FONT color="#007700"> 143 ); 144 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 145 color="#0000BB">yaxis</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 146 title</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">Set</FONT><FONT 147 color="#007700">(</FONT><FONT color="#DD0000">"Y-title"</FONT><FONT color="#007700"> 148 ); 149 <BR></FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P> 150 <P></P> 151 <P> Again there are a couple of things you should note here</P> 152 <UL> 153 <LI>A default font and size is used for the text</LI> 154 <LI>The default position for the title of the graph is to be centered at 155 the top</LI> 156 <LI>The default position for the title of the x-axis is the far right 157 and for the y-axis centered and rotated in a 900 angle.</LI> 158 </UL> 159 <P></P> 160 <P> A nice change would now be to have all the titles in a bold font and 161 the line plot a little bit thicker and in blue color. Let's do that by 162 adding the lines<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT 163 color="#0000BB"> $graph</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 164 title</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">SetFont</FONT><FONT 165 color="#007700">(</FONT><FONT color="#0000BB">FF_FONT1</FONT><FONT color="#007700"> 166 ,</FONT><FONT color="#0000BB">FS_BOLD</FONT><FONT color="#007700">); 167 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 168 color="#0000BB">yaxis</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 169 title</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">SetFont</FONT><FONT 170 color="#007700">(</FONT><FONT color="#0000BB">FF_FONT1</FONT><FONT color="#007700"> 171 ,</FONT><FONT color="#0000BB">FS_BOLD</FONT><FONT color="#007700">); 172 <BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT 173 color="#0000BB">xaxis</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 174 title</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">SetFont</FONT><FONT 175 color="#007700">(</FONT><FONT color="#0000BB">FF_FONT1</FONT><FONT color="#007700"> 176 ,</FONT><FONT color="#0000BB">FS_BOLD</FONT><FONT color="#007700">); 177 <BR></FONT><FONT color="#0000BB">$lineplot</FONT><FONT color="#007700"> 178 -></FONT><FONT color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT 179 color="#DD0000">"blue"</FONT><FONT color="#007700">); 180 <BR></FONT><FONT color="#0000BB">$lineplot</FONT><FONT color="#007700"> 181 -></FONT><FONT color="#0000BB">SetWeight</FONT><FONT color="#007700">(</FONT><FONT 182 color="#0000BB">2</FONT><FONT color="#007700">); </FONT><FONT color="#FF8000"> 183 // Two pixel wide</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV> 184 </P> 185 <P> Again please note the consistent interface. To change font you just 186 have to invoke the SetFont() method on the appropriate object. This 187 principle is true for most methods you will learn. The methods may be 188 applied to a variety of objects in JpGraph. So for example it might not 189 come as a big surprise that to have the Y-axis in red you have to say:<DIV 190 class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB"> 191 $graph</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">yaxis</FONT><FONT 192 color="#007700">-></FONT><FONT color="#0000BB">SetColor</FONT><FONT color="#007700"> 193 (</FONT><FONT color="#DD0000">"red"</FONT><FONT color="#007700">)</FONT><FONT 194 color="#0000BB"></FONT></FONT></CODE></DIV></P> 195 <P> or perhaps we also want to make the Y-axis a bit wider by<DIV class="phpscript"> 196 <CODE><FONT color="#000000"> <FONT color="#0000BB"> $graph</FONT><FONT color="#007700"> 197 -></FONT><FONT color="#0000BB">yaxis</FONT><FONT color="#007700">-></FONT><FONT 198 color="#0000BB">SetWidth</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 199 2</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT></FONT> 200 </CODE></DIV></P> 201 <P> As a final touch let's add a frame and a drop shadow around the 202 image since this is by default turned off. This is done with<DIV class="phpscript"> 203 <CODE><FONT color="#000000"> <FONT color="#0000BB"> $graph</FONT><FONT color="#007700"> 204 -></FONT><FONT color="#0000BB">SetShadow</FONT><FONT color="#007700">()</FONT><FONT 205 color="#0000BB"></FONT></FONT></CODE></DIV></P> 206 <P> The result of all these modifications are shown below.<DIV class="example"> 207 <BR> <A href="exframes/frame_example3.html" target="blank"><IMG border="0" 208 HEIGHT="200" src="img/img/img/img/img/img/example3.png" WIDTH="300"></A> 209 <BR><B>Figure 6:</B> Making the image a little bit more interesting by 210 adding som colors and changing the fonts <A href="exframes/frame_example3.html" 211 target="blank">[src]</A> 212 <P></P> 213 </DIV></P> 214 <P></P> 215 <HR NOSHADE> 216 <A HREF="toc.html">Contents</A> 217 <A HREF="7WorkingwithorthogonalXYplots.html">Previous</A> 218 <A HREF="711AddingplotmarkstolineplotsXXX.html">Next</A> 219 </BODY> 220 </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 |
|
|