CKEditor_4.6.1
Date
backup
bibelpopup
classes
config
fetch_bibel
fetch_chorbuch
html2pdf-master
images
jpgraph
docs
chunkhtml
example_src
images
admon-bug.png
admon-bug2.png
admon-bug2_small.png
admon-caution.png
admon-note.png
admon-tip.png
admon-warning.png
apa.html
apb.html
apbs02.html
apc.html
apd.html
ape.html
apes02.html
apf.html
apg.html
aph.html
aphs02.html
aphs03.html
api.html
apis02.html
apj.html
apjs02.html
apjs03.html
apjs04.html
apjs05.html
apjs06.html
apjs07.html
apjs08.html
apk.html
apks02.html
apks03.html
apl.html
apm.html
apms02.html
ch01.html
ch01s02.html
ch01s03.html
ch01s04.html
ch01s05.html
ch01s06.html
ch01s07.html
ch01s08.html
ch01s09.html
ch01s10.html
ch02.html
ch02s02.html
ch02s03.html
ch03.html
ch03s02.html
ch03s03.html
ch03s04.html
ch03s05.html
ch03s06.html
ch03s07.html
ch04.html
ch04s02.html
ch05.html
ch05s02.html
ch05s03.html
ch05s04.html
ch05s05.html
ch05s06.html
ch06.html
ch06s02.html
ch06s03.html
ch06s04.html
ch07.html
ch07s02.html
ch07s03.html
ch07s04.html
ch07s05.html
ch08.html
ch08s02.html
ch08s03.html
ch08s04.html
ch08s05.html
ch08s06.html
ch08s07.html
ch08s08.html
ch09.html
ch09s02.html
ch09s03.html
ch09s04.html
ch10.html
ch10s02.html
ch10s03.html
ch10s04.html
ch10s05.html
ch10s06.html
ch12.html
ch12s02.html
ch13.html
ch13s02.html
ch13s03.html
ch13s04.html
ch13s05.html
ch13s06.html
ch13s07.html
ch14.html
ch14s02.html
ch14s03.html
ch14s04.html
ch14s05.html
ch14s06.html
ch14s07.html
ch14s08.html
ch14s09.html
ch14s10.html
ch14s11.html
ch14s12.html
ch14s13.html
ch14s14.html
ch14s15.html
ch14s16.html
ch14s17.html
ch15.html
ch15s02.html
ch15s03.html
ch15s04.html
ch15s05.html
ch15s06.html
ch15s07.html
ch15s08.html
ch16.html
ch16s02.html
ch16s03.html
ch16s04.html
ch17.html
ch17s02.html
ch17s03.html
ch18.html
ch19.html
ch19s02.html
ch19s03.html
ch19s04.html
ch19s05.html
ch19s06.html
ch20.html
ch20s02.html
ch20s03.html
ch20s04.html
ch20s05.html
ch21.html
ch21s02.html
ch21s03.html
ch21s04.html
ch21s05.html
ch21s06.html
ch21s07.html
ch22.html
ch22s02.html
ch22s03.html
ch22s04.html
ch22s05.html
ch22s06.html
ch22s07.html
ch22s08.html
ch22s09.html
ch22s10.html
ch23.html
ch24.html
ch24s02.html
ch24s03.html
ch24s04.html
ch24s05.html
ch24s06.html
ch24s07.html
ch24s08.html
ch24s09.html
ch25.html
ch25s02.html
ch25s03.html
ch25s04.html
ch25s05.html
ch25s06.html
ch25s07.html
ch25s08.html
ch26.html
ch26s02.html
ch26s03.html
ch27.html
ch27s02.html
ch27s03.html
ch28.html
ch29.html
ch29s02.html
ch30.html
ch31.html
ch32.html
ch33.html
ch34.html
ch34s02.html
ch34s03.html
ch34s04.html
ch34s05.html
ch35.html
ch35s02.html
ch35s03.html
ch35s03s02.html
ch35s03s03.html
ch35s03s04.html
ch35s04.html
ch35s05.html
ch35s06.html
checkmark-plain.gif
checkmark.png
index.html
manual.css
phphl.css
pr01.html
pt01.html
pt02.html
pt03.html
pt04.html
pt05.html
pt06.html
pt07.html
pt08.html
pt09.html
text-document.png
classref
index.html
jpgraph_logo.jpg
manual.png
reference.png
src
VERSION
kalender
language
lib
lieder
livesearch
msd
overlib
pma
templates
templates_c
test
validation
vendor
++ Umstellung Luther 2017.sql
.gitattributes
.htaccess
MyOOS-Dumper-master.zip
Version8_bugs.txt
ansicht.php
ansicht2.php
ausgabe.php
bes_gd.php
bibellookup_1984.php
bibellookup_2017.php
changelog.php
composer.json
composer.lock
config.inc.php
copy.js
faq_text.php
faq_text_ber.php
favicon.ico
fetch_data.php
ftp_ansicht.php
func_agent.php
func_ansicht.php
func_genUser.php
func_highlight.php
func_htmlclean.php
func_make_knk.php
func_make_knk_fa.php
func_make_reference_fa.php
func_rollenrechte.php
func_write_lue_kat.php
further_publication.php
getSubCat.php
graph.php
graph_einzel.php
graph_hauptframe.php
graph_user.php
graph_user_hauptframe.php
hauptframe.php
hello.cgi
hello.pl
hilfe.php
historie.php
index.php
index2.php
indexframe.php
info.php
job_mail_delete_neue_user.php
job_mail_inaktiv.php
job_user_delete_neue_user.php
job_user_inaktiv.php
jquery.min.js
kat_cont.php
kat_cont_fa.php
kat_main.php
kat_main_fa.php
katechismus.php
katechismus_fa.php
lesung.php
lieder.php
livesearch.php
livestat.js
livestat.php
livestat2.php
login_log.php
logininfo.php
logout_admin.php
lue_ansicht.php
lue_bearbeiten.php
lue_erfassen.php
lue_inhalt.php
lue_notizen.php
lue_suche.php
lue_wahl.php
mail.php
make_ical.php
menuframe.php
nachsenden.php
notizen.php
outlook.php
outlook.php_20200212
outlook_ics.php
outlook_vcs.php
passwort_switch.php
pdf_gen.php
preview.php
profil.php
rollen.php
search_note.php
stichworte.php
suche.php
suche_change.php
suche_simp.php
systemmail.php
test.php
test2.php
testmail.php
testmail2.php
topframe.php
upload.php
user_anlegen.php
user_bearbeiten.php
useronline.php
verweise.php
wort_bearbeiten.php
wort_erfassen.php
wort_exegese.php
wort_wahl.php
336 lines
32 KiB
HTML
336 lines
32 KiB
HTML
<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>
|