d72ac078
 Guillaume
Ajout graphe V1.1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Creating several graphs in the same image</title><link rel="stylesheet" type="text/css" href="manual.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.0"><link rel="home" href="index.html" title="JpGraph Manual"><link rel="up" href="ch15.html" title="Chapter 15. Different types of linear (cartesian) graph types"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Creating several graphs in the same image</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 15. Different types of linear (cartesian) graph types</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Creating several graphs in the same image"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2563880"></a>Creating several graphs in the same image</h2></div></div></div>
<p>There are at least two reasons why one or several graphs should be combined into
the same image.</p>
<div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>To be able to create overall graphs that are strongly connected and
cannot be separated</p>
</li><li class="listitem">
<p>To reduce the download time by only have to download one image for
several graphs</p>
</li><li class="listitem">
<p>By convention, some types of graphs are always combined</p>
</li></ul></div><p>The library provides a convenience class , <code class="code">class MGraph</code>
(for Multi Graph) that assists with this. In order to use this class the module file
"<code class="filename">jpgraph_mgraph.php</code>" must be included.</p>
<p><a class="xref" href="ch15s08.html#fig.combgraphex1" title="Figure 15.88. A combination of a line graph at top and a bar graph in the bottom (combgraphex1.php)">Figure 15.88. A combination of a line graph at top and a bar graph in the bottom <code class="uri"><a class="uri" href="example_src/combgraphex1.html" target="_top">(<code class="filename">combgraphex1.php</code>)</a></code> </a> shows an example of how this can be
used.</p>
<p>
</p><div class="figure"><a name="fig.combgraphex1"></a><p class="title"><b>Figure 15.88. A combination of a line graph at top and a bar graph in the bottom <code class="uri"><a class="uri" href="example_src/combgraphex1.html" target="_top">(<code class="filename">combgraphex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/combgraphex1.png" alt="A combination of a line graph at top and a bar graph in the bottom (combgraphex1.php)"></span> </div></div><p><br class="figure-break">
</p>
<div class="sect2" title="Creating a combined graph"><div class="titlepage"><div><div><h3 class="title"><a name="id2563975"></a>Creating a combined graph</h3></div></div></div>
<p>In order to better understand what is involved in creating a combined graph we
will first show how this is done manually.</p>
<p>This is done by creating some PHP/GD code that creates a big enough empty
image with plain GD commands and then get the image handles from the graphs that
should be combined. The image handel can be returned from the
<code class="code">Graph::Stroke()</code> methods in the graphs that should be included.
It is then possible to use these handles together with the GD image copy command
and copy the individual graph images onto the previously created empty large GD
image.</p>
<p>The following (almost complete) code shows how this can be done</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags"><?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Assume we would like to combine graph1,2 and 3</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> ...... create graph 1 here.......</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$handle1</span><span class="hl-code"> = </span><span class="hl-var">$graph1</span><span class="hl-code">-></span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">_IMG_HANDLER</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> ...... create graph 2 here.......</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$handle2</span><span class="hl-code"> = </span><span class="hl-var">$graph2</span><span class="hl-code">-></span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">_IMG_HANDLER</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> ...... create graph 3 here.......</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$handle3</span><span class="hl-code"> = </span><span class="hl-var">$graph3</span><span class="hl-code">-></span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">_IMG_HANDLER</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Now create the "melting graph" which should contain all three graphs</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> $WIDTH1 and $HEIGHT1 are width and height of graph 1 ($handle1)</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> $WIDTH2 and $HEIGHT2 are width and height of graph 2 ($handle2)</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> $WIDTH3 and $HEIGHT3 are width and height of graph 3 ($handle3)</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> $x2,$x3 and $y2,$y3 shift from top left of global graph (ie position of </span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> graph2 and graph3 in global graph)</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$image</span><span class="hl-code"> = </span><span class="hl-identifier">imagecreatetruecolor</span><span class="hl-brackets">(</span><span class="hl-var">$WIDTH1</span><span class="hl-code">,</span><span class="hl-var">$HEIGHT1</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-identifier">imagecopy</span><span class="hl-brackets">(</span><span class="hl-var">$image</span><span class="hl-code">, </span><span class="hl-var">$handle1</span><span class="hl-code">,</span><span class="hl-number">0</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-code">, </span><span class="hl-var">$WIDTH1</span><span class="hl-code">,</span><span class="hl-var">$HEIGHT1</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-identifier">imagecopy</span><span class="hl-brackets">(</span><span class="hl-var">$image</span><span class="hl-code">, </span><span class="hl-var">$handle2</span><span class="hl-code">,</span><span class="hl-var">$x1</span><span class="hl-code">,</span><span class="hl-var">$y1</span><span class="hl-code">,</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-var">$WIDTH2</span><span class="hl-code">,</span><span class="hl-var">$HEIGHT2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-identifier">imagecopy</span><span class="hl-brackets">(</span><span class="hl-var">$image</span><span class="hl-code">, </span><span class="hl-var">$handle3</span><span class="hl-code">,</span><span class="hl-var">$x2</span><span class="hl-code">,</span><span class="hl-var">$y2</span><span class="hl-code">,</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-var">$WIDTH3</span><span class="hl-code">,</span><span class="hl-var">$HEIGHT3</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Stream the result back as a PNG image</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-identifier">header</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">Content-type: image/png</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-identifier">imagepng</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-var">$image</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span></pre></td></tr></table></div><p>
</p>
<p>The advantages with this fully manual method are </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>Absolute full control on a pixel level how the graphs are
combined</p>
</li><li class="listitem">
<p>Full transparency on how the combination is done</p>
</li></ul></div><p>
</p>
<p>but on the other hand the disadvantages are</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>Requires knowledge of the GD library</p>
</li><li class="listitem">
<p>Requires re-inventing the wheel (since a lot of functionality to
manipulate the GD library is already available in the JpGraph
library)</p>
</li></ul></div><p>
</p>
<p>It is here the <code class="code">class MGraph</code> comes in. It will allow you to very
easily create a combination of several graphs without knowing all the details on
the GD library or calculating pixel positions.</p>
<p>This helper class abstracts away all the details about copying images as well
as offering consistent interface (almost identical with the standard Graph
class). A basic example will quickly reveal the elegance of using this helper
class. </p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags"><?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment">--------------------------------------</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Graph 1</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment">--------------------------------------</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph1</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Graph</span><span class="hl-brackets">(</span><span class="hl-code">...</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment">... [Code to create graph1] ...</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment">--------------------------------------</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Graph 2</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment">--------------------------------------</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph2</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Graph</span><span class="hl-brackets">(</span><span class="hl-code">...</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment">... [Code to create graph2] ...</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment">--------------------------------------</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Create a combined graph</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment">--------------------------------------</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$mgraph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">MGraph</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$xpos1</span><span class="hl-code">=</span><span class="hl-number">3</span><span class="hl-code">;</span><span class="hl-var">$ypos1</span><span class="hl-code">=</span><span class="hl-number">3</span><span class="hl-code">;
</span><span class="hl-var">$xpos2</span><span class="hl-code">=</span><span class="hl-number">3</span><span class="hl-code">;</span><span class="hl-var">$ypos2</span><span class="hl-code">=</span><span class="hl-number">200</span><span class="hl-code">;
</span><span class="hl-var">$mgraph</span><span class="hl-code">-></span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$graph1</span><span class="hl-code">,</span><span class="hl-var">$xpos1</span><span class="hl-code">,</span><span class="hl-var">$ypos1</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$mgraph</span><span class="hl-code">-></span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$graph2</span><span class="hl-code">,</span><span class="hl-var">$xpos2</span><span class="hl-code">,</span><span class="hl-var">$ypos2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$mgraph</span><span class="hl-code">-></span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span></pre></td></tr></table></div><p>
</p>
<p>The above example illustrates the most basic usage of the <code class="code">MGraph</code>
class. </p>
<p>Each graph is added to the combined graph with a call to
<code class="code">MGraph::Add()</code> which in addition to the graph argument also
takes the target X and Y coordinates where the graph will be placed in the
combined image. The target X and Y coordinates are relative to any optional
specified left and top margin. </p>
<p>In addition to adding graphs there are some basic formatting option for the
combined graph that are listed below. The core methods provided by the
<code class="code">MGraph</code> class are </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">MGraph::MGraph($aWidth,$aHeight)</code>. </p>
<p>Create a new instance of the <code class="code">MGraph</code> class. If the
width and height are supplied as arguments they will override the
automatically determined width and height. </p>
</li><li class="listitem">
<p><code class="code">MGraph::Add($aGraph,$aToX,$aToY,$aFromX,$aFromY,$aWidth,$aHeight).
</code></p>
<p>Add a new subgraph with destination position
(<code class="code">$aToX,$aToY</code>). By default the whole graph image is
used. It is also possible to only specify that part of the graph
should be used. The source rectangle is specified by <code class="code">($aFromX,
$aFromY, $aWidth, $aHeight)</code>. </p>
</li><li class="listitem">
<p><code class="code">MGraph::SetFillColor($aColor)</code>. </p>
<p>Background color of the combined graphs. </p>
<p>Example: Setting an Orange background </p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$mgraph->SetFillColor('orange');</span></pre></td></tr></table></div><p>
</p>
</li><li class="listitem">
<p><code class="code">MGraph::SetFrame($aShow,$aColor,$aWeight)</code></p>
<p>Adding a frame to the combined graph. </p>
<p>Example: To add a blue frame with a 2 pixel width </p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$mgraph->SetFrame(true,'blue ',2);</span></pre></td></tr></table></div><p>
</p>
</li><li class="listitem">
<p><code class="code">MGraph::SetMargin($aLeft,$aRight,$aTop,$aBottom)</code></p>
<p>Adding a margin to the image. By default the minimum necessary
size for the combined graph to hold all the added subgraphs is used.
Use this method to add some space to the edges around the combined
image. When the individual graphs are positioned (in the
<code class="code">Add()</code> method) the position is counted relative to
the left and top margin. </p>
<p>Example: Use 10 pixel left and right margin, 5 pixel top and
bottom margin </p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$mgraph->SetMargin(10,10,5,5);</span></pre></td></tr></table></div><p>
</p>
</li><li class="listitem">
<p><code class="code">MGraph::SetShadow($aShowShadow=true,$aShadowWidth=4,$aShadowColor='gray@0.3')</code></p>
<p>This adds a drop shadow to the MGraph in the same way as for the
usual graph class</p>
</li></ul></div><p>
</p>
<p>In the same way as the ordinary Graph class the <code class="code">MGraph</code> class also
have a property $footer which allows the setting of a left, center and right
footer (see <a class="xref" href="ch14s02.html#sec.adding-footer" title="Adding a footer to the graph">Adding a footer to the graph</a>).</p>
<p>In addition the <code class="code">MGraph::Stroke()</code> accepts a filename in the same
way as the normal <code class="code">Graph::Stroke()</code></p>
</div>
<div class="sect2" title="Adding background images"><div class="titlepage"><div><div><h3 class="title"><a name="id2564308"></a>Adding background images </h3></div></div></div>
<p>In addition to the basic usage as shown above it is also possible to add a
background image in the combined graph. What is important to remember then is
that all the subgraphs are copied onto the combined graph so normally they will
be on top of the background image and hide it. </p>
<p>There are two ways of handling a background image </p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>Do nothing and the background image will only "shine through" for
those areas of the combined graph that is not covered by any
subgraph. </p>
</li><li class="listitem">
<p>Specify a "blend" factor for the subgraphs that specifies how much
of the background image will be mixed with the subgraph. The blend
factor is as usual specified as an integer in the interval 0-100.
(Note: This is the same functionality as the standard
<code class="code">Graph::SetBackgroundImageMix()</code> for ordinary
graphs.) A value of 0 means that 100% of the background is visible
and a value of 100 means that 0% of the background is visible. </p>
<p>To add a subgraphs with a blend factor the method
<code class="code">MGrahp::AddMix()</code> is used. This behaves exactly as
the standard <code class="code">MGraph::Add()</code> apart from the fact that the
3:rd argument is the blend factor (after the two x and y
coordinates).</p>
<p>Example: Add a graph with 50% mix of the background </p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$mgraph->AddMix($graph,0,0,50);</span></pre></td></tr></table></div><p>
</p>
</li></ol></div><p>
</p>
<p>The background image itself is added with the method </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">MGraph::SetBackgroundImage($aFile,$aCenter_aX=TRUE,$aY=NULL)
</code></p>
</li></ul></div><p>
</p>
<p>The filename specifies the full name of the background image (including
extension). Please note that the extension must be a valid image extension in
order for the library to determine the format of the image file.</p>
<p>The second argument can be either numeric or a boolean in which case it
specifies if the background image should be centered or if it should just be
copied from the top left position. If it is numerical it is interpretated as the
X-position for the optional X and Y coordinates specifying the position of the
top left corner of the background image. </p>
<p><a class="xref" href="ch15s08.html#fig.combgraphex2" title="Figure 15.89. Mixing a background image with two subgraphs. In this case the mixing factor was 85 for both subgraphs. (Note: To reduce load time the image is quite hard compressed in JPEG so there are some artifacts in high-frequency areas.) (combgraphex2.php)">Figure 15.89. Mixing a background image with two subgraphs. In this case the mixing factor was 85 for both subgraphs. (Note: To reduce load time the image is quite hard compressed in JPEG so there are some artifacts in high-frequency areas.) <code class="uri"><a class="uri" href="example_src/combgraphex2.html" target="_top">(<code class="filename">combgraphex2.php</code>)</a></code> </a> shows a variant of <a class="xref" href="ch15s08.html#fig.combgraphex1" title="Figure 15.88. A combination of a line graph at top and a bar graph in the bottom (combgraphex1.php)">Figure 15.88. A combination of a line graph at top and a bar graph in the bottom <code class="uri"><a class="uri" href="example_src/combgraphex1.html" target="_top">(<code class="filename">combgraphex1.php</code>)</a></code> </a> where a centered background image is mixed
in with two subgraphs. </p>
<p>
</p><div class="figure"><a name="fig.combgraphex2"></a><p class="title"><b>Figure 15.89. Mixing a background image with two subgraphs. In this case the mixing factor was 85 for both subgraphs. (Note: To reduce load time the image is quite hard compressed in JPEG so there are some artifacts in high-frequency areas.) <code class="uri"><a class="uri" href="example_src/combgraphex2.html" target="_top">(<code class="filename">combgraphex2.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/combgraphex2.png" alt="Mixing a background image with two subgraphs. In this case the mixing factor was 85 for both subgraphs. (Note: To reduce load time the image is quite hard compressed in JPEG so there are some artifacts in high-frequency areas.) (combgraphex2.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Creating rotated combined graphs"><div class="titlepage"><div><div><h3 class="title"><a name="id2564429"></a>Creating rotated combined graphs</h3></div></div></div>
<p>There are in principle no difference when combing graphs top/bottom or
left/right. ?? shows an example of creating a graph that illustrates the
changing weather conditions measure by Wind direction, speed and temperature in
one graph with a detailed vertical scale showing the time. </p>
<p>Since this follows exactly the same principle laid out above the script should
be fairly self explanatory. Note that we have suppressed the x-scale on two of
the graphs to make better use of the available image size and also to create a
stronger sense of "belonging" between the individual graphs.</p>
<p>
</p><div class="figure"><a name="fig.comb90dategraphex03"></a><p class="title"><b>Figure 15.90. Combining three graphs in one image <code class="uri"><a class="uri" href="example_src/comb90dategraphex03.html" target="_top">(<code class="filename">comb90dategraphex03.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/comb90dategraphex03.png" alt="Combining three graphs in one image (comb90dategraphex03.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Some caveats when using MGraph"><div class="titlepage"><div><div><h3 class="title"><a name="id2564532"></a>Some caveats when using MGraph</h3></div></div></div>
<p>There are some drawbacks using combined graphs</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>CSIM Image maps can not be used with combined graphs. </p>
</li><li class="listitem">
<p>Creating multiple graphs in the same script will require some
additional memory. Make sure that the memory limit in
"<code class="filename">php.ini</code>" is sufficient. </p>
</li><li class="listitem">
<p>Adding background images can significantly increase the final size
of the image. Using the JPEG image format when photo like background
images are used gives better compressing than PNG (since JPEG is a
lossy format). For example setting the JPEG quality parameter to 60
(default is 75). </p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$mgraph->SetImgFormat('jpeg',60);</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
<p>This setting can be used for ordinary Graphs as well.
</p>
</div><p>
</p>
</li><li class="listitem">
<p>Compared with background images for ordinary graphs there is
currently no possibility for automatic re-sizing of the background
images. </p>
</li></ul></div><p>
</p>
</div>
</div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"><a accesskey="u" href="ch15.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>
|