| 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="43UsingPHPdirectly.html">
|
|
|
8 |
<LINK REL="Next" HREF="45ChoosingtheimageformatforJpGraph.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="43UsingPHPdirectly.html">Previous</A>
|
|
|
26 |
<A HREF="45ChoosingtheimageformatforJpGraph.html">Next</A>
|
|
|
27 |
<HR NOSHADE>
|
|
|
28 |
<H2><A NAME="4_4">4.4 The basic principle of JpGraph and the creation of
|
|
|
29 |
images</A></H2>
|
|
|
30 |
<P> The common pattern for creating graphs is</P>
|
|
|
31 |
<OL>
|
|
|
32 |
<LI> Create a script that constructs the image, type, colors size and so
|
|
|
33 |
on.</LI>
|
|
|
34 |
<LI> A wrapper script which contains one or more <IMG> tags to position
|
|
|
35 |
the graphs on the proper HTML page.</LI>
|
|
|
36 |
</OL>
|
|
|
37 |
<P> Of course it is of perfectly possible to call the image script
|
|
|
38 |
directly in the browser to just display the generated image in the
|
|
|
39 |
browser.</P>
|
|
|
40 |
<P> You should remember that it is also possible to pass arguments to
|
|
|
41 |
the image script via the normal HTTP GET/POST arguments. For example<DIV
|
|
|
42 |
class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB"> </FONT><FONT
|
|
|
43 |
color="#007700"><</FONT><FONT color="#0000BB">img src</FONT><FONT color="#007700">
|
|
|
44 |
=</FONT><FONT color="#DD0000">"showgraph.php?a=1&b=2"</FONT><FONT color="#007700">
|
|
|
45 |
></FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
|
|
|
46 |
<P> This could for example be used to control the appearance of the
|
|
|
47 |
image or perhaps send data to the image which will be displayed. Note
|
|
|
48 |
that this is probably not the best way to send large amount of data to
|
|
|
49 |
plot. Instead the only practical way, for large data sizes, is to get
|
|
|
50 |
all the data in the image script, perhaps from a DB. Another
|
|
|
51 |
alternative for large amount of data to be sent to the image script is
|
|
|
52 |
by creating a POST request to the image script.<DIV class="note"><B>
|
|
|
53 |
Note:</B><B> Forcing the browser to update your image</B> Some browser
|
|
|
54 |
may not send back a request to the web browser unless the user presses
|
|
|
55 |
"Refresh" (F5 - in most browsers). This can lead to problems that the
|
|
|
56 |
user is seeing old data. A simple trick is to add a dummy time argument
|
|
|
57 |
which is not used in the script. For example
|
|
|
58 |
<PRE>
|
|
|
59 |
echo '<img src="myimagescript.php?dummy='.now().'">';
|
|
|
60 |
</PRE>
|
|
|
61 |
It is also important to be aware of any internal caching the browser
|
|
|
62 |
might do. The general problem with dynamically generated images is that
|
|
|
63 |
the image generating script (file) remains the same. This makes the
|
|
|
64 |
browser believe that the data hasn't changed and if the browser already
|
|
|
65 |
has issues a previous GET request and has the data cached it will not
|
|
|
66 |
send a new GET if the timestamp on the file is the same since it then
|
|
|
67 |
believes it my use the old cached version.</DIV></P>
|
|
|
68 |
<P> When it comes to the structure of your imaging script they will
|
|
|
69 |
generally have the structure<DIV class="phpscript"><CODE><FONT color="#000000">
|
|
|
70 |
<FONT color="#0000BB"> </FONT><FONT color="#FF8000">
|
|
|
71 |
// ... Include necessary headers
|
|
|
72 |
<BR>
|
|
|
73 |
<BR></FONT><FONT color="#0000BB">$graph </FONT><FONT color="#007700">
|
|
|
74 |
= new </FONT><FONT color="#0000BB">Graph</FONT><FONT color="#007700">(</FONT><FONT
|
|
|
75 |
color="#0000BB">$width</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
|
|
|
76 |
$height</FONT><FONT color="#007700">, ...);
|
|
|
77 |
<BR>
|
|
|
78 |
<BR></FONT><FONT color="#FF8000">
|
|
|
79 |
// ... code to construct the graph details
|
|
|
80 |
<BR>
|
|
|
81 |
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT
|
|
|
82 |
color="#0000BB">Stroke</FONT><FONT color="#007700">();
|
|
|
83 |
<BR></FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
|
|
|
84 |
<P> JpGraph is completely Object oriented so all calls will be action on
|
|
|
85 |
specific instances of classes. One of the fundamental classes is the
|
|
|
86 |
Graph() class which represents the entire graph.</P>
|
|
|
87 |
<P> After the creation of the Graph() object all the code lines to
|
|
|
88 |
construct the details of the graph are added.</P>
|
|
|
89 |
<P> The final method called in an image script will most likely be the<I>
|
|
|
90 |
Graph::Stroke()</I> method. This will send the constructed image back
|
|
|
91 |
to the browser. A variation of this is used if the graph are supposed
|
|
|
92 |
to have image maps. In that case the final method will be<I>
|
|
|
93 |
Graph::StrokeCSIM()</I></P>
|
|
|
94 |
<P> In addition to this standard usage pattern you can also choose to</P>
|
|
|
95 |
<UL>
|
|
|
96 |
<LI> ... send the graph directly to a file</LI>
|
|
|
97 |
<LI> ... access the GD image handler for further image processing (also
|
|
|
98 |
needed to include the image in an PDF file)</LI>
|
|
|
99 |
<LI> ... make use of the builtin cache system to send back a previously
|
|
|
100 |
generated image</LI>
|
|
|
101 |
</UL>
|
|
|
102 |
<P> The cache system, which lessens the burden of the PHP server, works
|
|
|
103 |
by avoiding o run all the code that follows the initial Graph() call by
|
|
|
104 |
checking if the image has already been created and in that case
|
|
|
105 |
directly send back the previously created (and stored in a file) image
|
|
|
106 |
to the browser. When using the cache system a filename must be
|
|
|
107 |
specified in the initial Graph() call which is used to store the image
|
|
|
108 |
in the cache system and possibly also a timeout value to indicate how
|
|
|
109 |
long the image in the cache directory should be valid.</P>
|
|
|
110 |
<P> In many of the examples in this manual the following pattern will be
|
|
|
111 |
used<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
|
|
|
112 |
$graph </FONT><FONT color="#007700">= new </FONT><FONT color="#0000BB">
|
|
|
113 |
Graph</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">300</FONT><FONT
|
|
|
114 |
color="#007700">,</FONT><FONT color="#0000BB">200</FONT><FONT color="#007700">
|
|
|
115 |
,</FONT><FONT color="#DD0000">"auto"</FONT><FONT color="#007700">);</FONT><FONT
|
|
|
116 |
color="#0000BB"></FONT></FONT></CODE></DIV></P>
|
|
|
117 |
<P> The two first parameters specify the width and height of the graph
|
|
|
118 |
and the third parameter the name of the image file in the cache
|
|
|
119 |
directory. The special name<I> 'auto'</I> indicates that the image file
|
|
|
120 |
will be given the same name as the image script but with the extension
|
|
|
121 |
changed to indicate the graphic format used, i.e '.jpg', '.png' and so
|
|
|
122 |
on.</P>
|
|
|
123 |
<P> Please note that the cache system by default is disabled and must be
|
|
|
124 |
enabled by setting the proper define in the file "jpg-config.inc.php"</P>
|
|
|
125 |
<HR NOSHADE>
|
|
|
126 |
<A HREF="toc.html">Contents</A>
|
|
|
127 |
<A HREF="43UsingPHPdirectly.html">Previous</A>
|
|
|
128 |
<A HREF="45ChoosingtheimageformatforJpGraph.html">Next</A>
|
|
|
129 |
</BODY>
|
|
|
130 |
</HTML>
|