| 1 |
lars |
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="8WorkingwithorthogonalXYplots.html">
|
|
|
8 |
<LINK REL="Next" HREF="811AddingplotmarkstolineplotsXXX.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="8WorkingwithorthogonalXYplots.html">Previous</A>
|
|
|
26 |
<A HREF="811AddingplotmarkstolineplotsXXX.html">Next</A>
|
|
|
27 |
<HR NOSHADE>
|
|
|
28 |
<H2><A NAME="8_1">8.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/example0.png" WIDTH="350"></A>
|
|
|
82 |
<BR><B>Figure 3:</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/example2.png" WIDTH="300"></A>
|
|
|
119 |
<BR><B>Figure 4:</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/example3.png" WIDTH="300"></A>
|
|
|
209 |
<BR><B>Figure 5:</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="8WorkingwithorthogonalXYplots.html">Previous</A>
|
|
|
218 |
<A HREF="811AddingplotmarkstolineplotsXXX.html">Next</A>
|
|
|
219 |
</BODY>
|
|
|
220 |
</HTML>
|