527 lines
48 KiB
HTML
527 lines
48 KiB
HTML
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Specifying and formatting the overall displayed graph</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="ch14.html" title="Chapter 14. Common features for all Cartesian (x,y) 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">Specifying and formatting the overall displayed graph</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 14. Common features for all Cartesian (x,y) graph types</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Specifying and formatting the overall displayed graph"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="sec.overall-graph-formatting"></a>Specifying and formatting the overall displayed graph</h2></div></div></div>
|
||
|
||
<p>The overall look and feel of the graph can be adjusted in a number of ways.</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p>color of the plot area</p>
|
||
</li><li class="listitem">
|
||
<p>color of the margin</p>
|
||
</li><li class="listitem">
|
||
<p>size of the margin (and hence the position of the plot area)</p>
|
||
</li><li class="listitem">
|
||
<p>title(s) of the graph, a graph can have both a "title", "subtitle" and
|
||
a "subsubtitle"</p>
|
||
</li><li class="listitem">
|
||
<p>drop shadow around the graph</p>
|
||
</li><li class="listitem">
|
||
<p>adding how long time it took to generate the graph</p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<div class="sect2" title="Adjusting size, margins and frame"><div class="titlepage"><div><div><h3 class="title"><a name="id2541423"></a>Adjusting size, margins and frame</h3></div></div></div>
|
||
|
||
<p>The overall size of the graph is specified in the initial creation of the
|
||
"<code class="code">$graph</code>" instance. This is mandatory. </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">$graph = new Graph($width,$height);</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<p>The margin determines the space between the edges of the plotarea and edge of
|
||
the graph. Please note that the edge does not include the frame around the
|
||
entire graph area, i.e. whatever weight the frame edge has it doesn't impact on
|
||
the margin area. The margin is specified in the order left,right,top and bottom
|
||
margin and the size is specified in pixels.</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">$graph->SetMargin(30,10,40,20);</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<p>The default margin will be as narrow as possible but still have enough space
|
||
to show the titles and labels. The final adjustments is wheter or not the graph
|
||
will have a frame or not. There are two distinctions to be made here. No frame
|
||
meaning that the margin area will not be colored (i.e. painted) and no frame as
|
||
in no edge around the graph area. The first case is achieved by calling the
|
||
<code class="code">SetFrame()</code> method on the Graph 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
|
||
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph->SetFrame(false);</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<p>and the second case is achieved by setting the frame edge to have weight zero.
|
||
Since the weight is given as the third argument we wtill have to put in valid
|
||
"dummy" argument for the on/off flag and the frame color parameter.</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">$graph->SetFrame(true,'black',0);</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<p>Refer to <a class="xref" href="ch12.html#fig.common-objects" title="Figure 12.1. Commonly used objects in a graph (common-obj-graph.php)">Figure 12.1. Commonly used objects in a graph (<code class="uri"><a class="uri" href="example_src/common-obj-graph.html" target="_top">common-obj-graph.php</a></code>)</a> for definitoin of plot aea
|
||
and margin.</p>
|
||
</div>
|
||
<div class="sect2" title="Adding drop shadow to the graph"><div class="titlepage"><div><div><h3 class="title"><a name="id2541500"></a>Adding drop shadow to the graph</h3></div></div></div>
|
||
|
||
<p>A graph can have a drop shadow specified with the method
|
||
<code class="code">SetShadow()</code> which has the signature</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">SetShadow($aShowShadow=true,$aShadowWidth=5,$aShadowColor=array(102,102,102))</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<p>by default there will be no dropshadow. Note that the drop shadow is a
|
||
straight simple shadow and has no Gaussian blur.</p>
|
||
</div>
|
||
<div class="sect2" title="Formatting and specifying the titles of the graph"><div class="titlepage"><div><div><h3 class="title"><a name="sec2.fomratting-graph-titles"></a>Formatting and specifying the titles of the graph</h3></div></div></div>
|
||
|
||
<p>There are three possible standard titles in the graph</p>
|
||
<p>
|
||
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
|
||
<p><code class="code">$graph->title</code></p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">$graph->subtitle</code></p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">$graph->subsubtitle</code></p>
|
||
</li></ol></div><p>
|
||
</p>
|
||
<p>Each title is an instance of the Text class which means it supports the
|
||
standard text adjusting methods <code class="code">SetFont()</code>, <code class="code">Set()</code>,
|
||
<code class="code">SetColor()</code> etc. The title s will be centered on the top of the
|
||
graph area with the title highest up, subtitle below and finally the subsubtitle
|
||
below that as shown in <a class="xref" href="ch14s02.html#fig.titleex1" title="Figure 14.6. The various titles in a graph (titleex1.php)">Figure 14.6. The various titles in a graph <code class="uri"><a class="uri" href="example_src/titleex1.html" target="_top">(<code class="filename">titleex1.php</code>)</a></code> </a></p>
|
||
<p>
|
||
</p><div class="figure"><a name="fig.titleex1"></a><p class="title"><b>Figure 14.6. The various titles in a graph <code class="uri"><a class="uri" href="example_src/titleex1.html" target="_top">(<code class="filename">titleex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/titleex1.png" alt="The various titles in a graph (titleex1.php)"></span> </div></div><p><br class="figure-break">
|
||
</p>
|
||
<p>In addition to the above standard titles there is also another type of graph
|
||
titles called the "Tabular title". This is a title that sits directly on the
|
||
plot area looking like a "tab" in a sorting cabinet. <a class="xref" href="ch14s02.html#fig.gradbkgex1" title="Figure 14.7. Tabtitle and gradient background (gradbkgex1.php)">Figure 14.7. Tabtitle and gradient background <code class="uri"><a class="uri" href="example_src/gradbkgex1.html" target="_top">(<code class="filename">gradbkgex1.php</code>)</a></code> </a> and <a class="xref" href="ch14s02.html#fig.imgmarkerex1" title="Figure 14.8. Tabtitle and image marker in a line plot (imgmarkerex1.php)">Figure 14.8. Tabtitle and image marker in a line plot <code class="uri"><a class="uri" href="example_src/imgmarkerex1.html" target="_top">(<code class="filename">imgmarkerex1.php</code>)</a></code> </a>
|
||
shows examples of this.</p>
|
||
<p>
|
||
</p><div class="informaltable">
|
||
<table border="0"><colgroup><col class="c1"><col class="newCol2"></colgroup><tbody><tr><td>
|
||
<div class="figure"><a name="fig.gradbkgex1"></a><p class="title"><b>Figure 14.7. Tabtitle and gradient background <code class="uri"><a class="uri" href="example_src/gradbkgex1.html" target="_top">(<code class="filename">gradbkgex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/gradbkgex1.png" alt="Tabtitle and gradient background (gradbkgex1.php)"></span> </div></div><br class="figure-break">
|
||
</td><td>
|
||
<div class="figure"><a name="fig.imgmarkerex1"></a><p class="title"><b>Figure 14.8. Tabtitle and image marker in a line plot <code class="uri"><a class="uri" href="example_src/imgmarkerex1.html" target="_top">(<code class="filename">imgmarkerex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/imgmarkerex1.png" alt="Tabtitle and image marker in a line plot (imgmarkerex1.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr></tbody></table>
|
||
</div><p>
|
||
</p>
|
||
<p>These type of titles are created by using the </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">$graph->tabtitle</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<p>property in the Graph class. For example the tabtitle in <a class="xref" href="ch07s04.html#fig.barlinealphaex1" title="Figure 7.2. Making use of transparency to combine two plots (barlinealphaex1.php)">Figure 7.2. Making use of transparency to combine two plots <code class="uri"><a class="uri" href="example_src/barlinealphaex1.html" target="_top">(<code class="filename">barlinealphaex1.php</code>)</a></code> </a> was generated by adding the lines</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
|
||
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph->tabtitle->Set('Year 2003');
|
||
$graph->tabtitle->SetFont(FF_ARIAL,FS_BOLD,10);</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<div class="sect3" title="Adding special background to the title"><div class="titlepage"><div><div><h4 class="title"><a name="id2541803"></a>Adding special background to the title</h4></div></div></div>
|
||
|
||
<p>There is one more way to make the graph title stand out that. This feature
|
||
is probably one of the least known ways to adjust the graph title and is
|
||
used to put a lot of emphasis on the title by having a separate color (and
|
||
style) for the background of the graph title.</p>
|
||
<p>
|
||
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
|
||
<p>This feature was added by the request of one of our users who had
|
||
a company design policy that demanded these type sof formatting
|
||
options for graphs.</p>
|
||
</div><p>
|
||
</p>
|
||
<p>The two methods used to control this style are</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">Graph::SetTitleBackground($aBackColor='gray',
|
||
$aStyle=TITLEBKG_STYLE1, $aFrameStyle=TITLEBKG_FRAME_NONE,
|
||
$aFrameColor='black', $aFrameWeight=1, $aBevelHeight=3,
|
||
$aEnable=true)</code></p>
|
||
<p>This method is the basic method to specify a solid color
|
||
background with the defined style and type of framing. The first
|
||
style paramatere specifies the extension of the background and
|
||
how it interacts with the frame around the image.</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem">
|
||
<p><code class="code">TITLEBKG_STYLE1</code>, The title frame will
|
||
be drawn inside the overall graph frame</p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">TITLEBKG_STYLE2</code>, The title frame will
|
||
extend all the way to the edge of the graph and
|
||
overwrite any graph frame</p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">TITLEBKG_STYLE3</code>, This is the same as
|
||
TITLEBKG_STYLE2 apart from when it is used together
|
||
with framestyle TITLEBKG_FRAME_BEVEL then the bevel
|
||
frame border is on top of the title frame
|
||
border</p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">Graph::SetTitleBackgroundFillStyle($aStyle,$aColor1='black',$aColor2='white')</code></p>
|
||
<p>The method determines adjusts the way the background of the
|
||
title is filled by allowing a simple pattern filling to be set.
|
||
This pattern filling is either horizontal or vertical stripes
|
||
(lines) with user selectable colors. The possible patterns
|
||
are</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem">
|
||
<p><code class="code">TITLEBKG_FILLSTYLE_HSTRIPED</code>, The
|
||
background will have horizontal stripes with
|
||
<code class="code">$aColor1</code> on a background with
|
||
<code class="code">$aColor2</code></p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">TITLEBKG_FILLSTYLE_HSTRIPED</code>, The
|
||
background will have vertical stripes with
|
||
<code class="code">$aColor1</code> on a background with
|
||
<code class="code">$aColor2</code></p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">TITLEBKG_FILLSTYLE_SOLID</code>, The
|
||
background will only have one color specified as
|
||
<code class="code">$aColor1</code></p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<p>To better show the effect of the possible combinations the table below
|
||
shows a matrix of the possible combinations and the resulting styles. To
|
||
keep the table small only the relevant top are of the graph with the title
|
||
is shown.In addition to keep the style simple we have only used shades of
|
||
gray.</p>
|
||
<p>
|
||
</p><div class="informaltable">
|
||
<table border="0"><colgroup><col class="c1"><col class="c2"><col class="c3"><col class="c4"></colgroup><tbody><tr><td><span class="bold"><strong>Frame/Fill
|
||
style</strong></span></td><td>
|
||
<p><code class="code">TITLEBKG_FILLSTYLE_HSTRIPED</code></p>
|
||
</td><td>
|
||
<p><code class="code">TITLEBKG_FILLSTYLE_VSTRIPED</code></p>
|
||
</td><td>
|
||
<p><code class="code">TITLEBKG_FILLSTYLE_SOLID</code></p>
|
||
</td></tr><tr><td>
|
||
<p>TITLEBKG_STYLE1,</p>
|
||
<p>TITLEBKG_FRAME_NONE</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground00.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground01.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground02.png"></span></p>
|
||
</td></tr><tr><td>
|
||
<p>TITLEBKG_STYLE2,</p>
|
||
<p>TITLEBKG_FRAME_NONE</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground10.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground11.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground12.png"></span></p>
|
||
</td></tr><tr><td>
|
||
<p>TITLEBKG_STYLE3,</p>
|
||
<p>TITLEBKG_FRAME_NONE</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground20.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground21.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground22.png"></span></p>
|
||
</td></tr><tr><td>
|
||
<p>TITLEBKG_STYLE1,</p>
|
||
<p>TITLEBKG_FRAME_FULL</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground30.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground31.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground32.png"></span></p>
|
||
</td></tr><tr><td>
|
||
<p>TITLEBKG_STYLE2,</p>
|
||
<p>TITLEBKG_FRAME_FULL</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground40.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground41.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground42.png"></span></p>
|
||
</td></tr><tr><td>
|
||
<p>TITLEBKG_STYLE3,</p>
|
||
<p>TITLEBKG_FRAME_FULL</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground50.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground51.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground52.png"></span></p>
|
||
</td></tr><tr><td>
|
||
<p>TITLEBKG_STYLE1,</p>
|
||
<p>TITLEBKG_FRAME_BOTTOM</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground60.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground61.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground62.png"></span></p>
|
||
</td></tr><tr><td>
|
||
<p>TITLEBKG_STYLE2,</p>
|
||
<p>TITLEBKG_FRAME_BOTTOM</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground70.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground71.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground72.png"></span></p>
|
||
</td></tr><tr><td>
|
||
<p>TITLEBKG_STYLE3,</p>
|
||
<p>TITLEBKG_FRAME_BOTTOM</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground80.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground81.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground82.png"></span></p>
|
||
</td></tr><tr><td>
|
||
<p>TITLEBKG_STYLE1,</p>
|
||
<p>TITLEBKG_FRAME_BEVEL</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground90.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground91.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground92.png"></span></p>
|
||
</td></tr><tr><td>
|
||
<p>TITLEBKG_STYLE2,</p>
|
||
<p>TITLEBKG_FRAME_BEVEL</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground100.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground101.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground102.png"></span></p>
|
||
</td></tr><tr><td>
|
||
<p>TITLEBKG_STYLE3,</p>
|
||
<p>TITLEBKG_FRAME_BEVEL</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground110.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground111.png"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/titlebackground112.png"></span></p>
|
||
</td></tr></tbody></table>
|
||
</div><p>
|
||
</p>
|
||
<div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
|
||
<p>There is a change in the behaviour of the latest GD library that
|
||
causes style 2 and style 3 in JpGraph 2.x to be more or less visually
|
||
identical as can be seen above. Using 1.x will more clearly show the
|
||
difference. The reason is that with JpGraph 2.x we rely more heavily on
|
||
the GD built in functions while in 1.x many of the functions where
|
||
instead implemented in the library (since they weren't earlier available
|
||
in GD 1.x). The change in JpGraph 2.x was made to increase the
|
||
performance, unfortunately some minor differences exist in the way GD
|
||
2.x handles border line cases as how to handle pixel-by-pixel accuracy
|
||
(or convention). Over time these changes will become less and less as
|
||
parts of the library will be adjusted to the new GD 2.x
|
||
behaviour.</p>
|
||
<p>A typical example of changed behaviour is how rectangles with
|
||
thickness > 1 are positioned. The library assumes that the top left
|
||
(0,0) corner is the very top left part of the rectangle. This is not so
|
||
with GD 2.x. Instead (0,0) is the center point on the line. If the line
|
||
has thickness=1 they are identical but not if the line has a thickness >
|
||
1</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sect2" title="Specifying the image format to use"><div class="titlepage"><div><div><h3 class="title"><a name="id2542819"></a>Specifying the image format to use</h3></div></div></div>
|
||
|
||
<p>As described in <a class="xref" href="ch03s02.html" title="Necessary system requirements for the library">Necessary system requirements for the library</a> the actual image compression
|
||
available depends on the system setup. Assuming the needed sewtup is done then
|
||
the image format can be specified by using the method
|
||
<code class="code">Graph::SetImgFormat()</code> and specifying the wanted format as a
|
||
string. For example as</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">$graph->SetImgFormat('jpg',80);</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<p>The method call above selects JPEG image compression algorithm and tells the
|
||
algorithm to set the quality parameter to 80%. This additional parameter is only
|
||
applicable together with JPG formatting.</p>
|
||
</div>
|
||
<div class="sect2" title="Generic line formatting"><div class="titlepage"><div><div><h3 class="title"><a name="id2542875"></a>Generic line formatting</h3></div></div></div>
|
||
|
||
<p>Any lines in the library can have a number of formatting option. Attributes
|
||
that can be adjusted are</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p>Lineweight (thickness). The weight is specified in pixels and can
|
||
be any integer values</p>
|
||
</li><li class="listitem">
|
||
<p>Linestyle , (dashed, dotted, solid etc). The style is specified as
|
||
a string using the line method <code class="code">SetLineStyle()</code>. </p>
|
||
<p>The available line styles are</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem">
|
||
<p>'solid', A solid line</p>
|
||
</li><li class="listitem">
|
||
<p>'dotted', A line with dots</p>
|
||
</li><li class="listitem">
|
||
<p>'dashed', A line with short hyphens</p>
|
||
</li><li class="listitem">
|
||
<p>'longdashed', A line with long hyphens</p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<p>For example to following method call set the y-grid to use the
|
||
"dotted" style</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">$graph->ygrid->SetLineStyle('dotted');</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<p>The image in <a class="xref" href="ch14s02.html#fig.different-line-styles" title="Figure 14.9. Different line formatting">Figure 14.9. Different line formatting</a> shows
|
||
example of different line formatting styles</p>
|
||
<p>
|
||
</p><div class="figure"><a name="fig.different-line-styles"></a><p class="title"><b>Figure 14.9. Different line formatting</b></p><div class="figure-contents">
|
||
|
||
<div class="informaltable">
|
||
<table border="0"><colgroup><col class="c1"><col class="c2"><col class="c3"></colgroup><tbody><tr><td>
|
||
<p><span class="inlinemediaobject"><img src="images/linestyle_standard.png" alt="Different line formatting"></span></p>
|
||
<p>Standard</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/linestyle_antialias.png" alt="Different line formatting"></span></p>
|
||
<p>Anti-aliased</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/linestyle_thick.png" alt="Different line formatting"></span></p>
|
||
<p>Thick (3 pixels)</p>
|
||
</td></tr><tr><td>
|
||
<p><span class="inlinemediaobject"><img src="images/linestyle_dashed.png" alt="Different line formatting"></span></p>
|
||
<p>Dashed</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/linestyle_longdash.png" alt="Different line formatting"></span></p>
|
||
<p>Long-dash</p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/linestyle_dotted.png" alt="Different line formatting"></span></p>
|
||
<p>Dotted</p>
|
||
</td></tr></tbody></table>
|
||
</div>
|
||
</div></div><p><br class="figure-break">
|
||
</p>
|
||
</li><li class="listitem">
|
||
<p>Color. The line color is (as usual) adjusted with the method
|
||
<code class="code">SetColor()</code>.</p>
|
||
<p>For example the following line sets the color of the x-grid to
|
||
lightblue.</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">$graph->xgrid->SetColor('lightblue');</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
|
||
<p>If anti-aliasing is enabled (see ??.) then all line weights will always be
|
||
interpreted as having weight 1 regardless.</p>
|
||
</div>
|
||
<p>
|
||
</p><div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
|
||
<p>To avoid drawing a line set the line weight to 0</p>
|
||
</div><p>
|
||
</p>
|
||
</div>
|
||
<div class="sect2" title="Adding a footer to the graph"><div class="titlepage"><div><div><h3 class="title"><a name="sec.adding-footer"></a>Adding a footer to the graph</h3></div></div></div>
|
||
|
||
<p>It is possible to add a footer to the graph as well. The footer can have a
|
||
left, center and right part. The footer is accessed trough the footer property
|
||
of the Graph class and its three parts "left", "right" and "center". These parts
|
||
are instances of the <code class="code">Text</code> class and hence all normal text
|
||
formatting c an be applied to each part of the footer. The following code
|
||
snippet shows how the footer parts can be set.</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
|
||
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph->footer->left->Set('Left footer');
|
||
$graph->footer->center->Set('Center footer');
|
||
$graph->footer->right->Set('Right footer');</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<p>An example of using a footer is shown in <a class="xref" href="ch14s02.html#fig.footerex1" title="Figure 14.11. Adding a left,right and center footer (footerex1.php)">Figure 14.11. Adding a left,right and center footer <code class="uri"><a class="uri" href="example_src/footerex1.html" target="_top">(<code class="filename">footerex1.php</code>)</a></code> </a></p>
|
||
<p>
|
||
</p><div class="figure"><a name="id2543242"></a><p class="title"><b>Figure 14.10. Using a footer in a graph</b></p><div class="figure-contents">
|
||
|
||
<div class="figure"><a name="fig.footerex1"></a><p class="title"><b>Figure 14.11. Adding a left,right and center footer <code class="uri"><a class="uri" href="example_src/footerex1.html" target="_top">(<code class="filename">footerex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/footerex1.png" alt="Using a footer in a graph"></span> </div></div><br class="figure-break">
|
||
</div></div><p><br class="figure-break">
|
||
</p>
|
||
</div>
|
||
<div class="sect2" title="Adding timing of graphs"><div class="titlepage"><div><div><h3 class="title"><a name="id2543252"></a>Adding timing of graphs</h3></div></div></div>
|
||
|
||
<p>The footer in the bottom of the graph can also be used to show an
|
||
approximative timing of the graph generation. This is done with the help of
|
||
<code class="code">class JpgTimer</code>. This timer class offers two methods</p>
|
||
<p>
|
||
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
|
||
<p><code class="code">JpgTimer::Push()</code>, Starts a new timer and puts it at
|
||
the top of the timer stack</p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">JpgTimer::Pop()</code>, Pops the timer at the top of the
|
||
stack and returns the time (in ms) since the timer was pushed</p>
|
||
</li></ol></div><p>
|
||
</p>
|
||
<p>(The stack based design makes it possible to have multiple timers running at
|
||
the same time without interfering each other.)</p>
|
||
<p>The footer class (<a class="xref" href="ch14s02.html#sec.adding-footer" title="Adding a footer to the graph">Adding a footer to the graph</a>) have a special
|
||
provision to handle an instance of the timer class</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">Footer::SetTimer($aTimer,$aSuffix='')</code></p>
|
||
<p><code class="code">$aTimer</code>, an instance of JpgTimer</p>
|
||
<p><code class="code">$aSuffix</code>, an optional suffix string that will be
|
||
added at the end of the timing value</p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<p>At the end of the graph generation the specified timer will be sent the sign
|
||
pop and the resulting timer value will be stored in the right footer of the
|
||
graph (appended to any previous value in the footer). For example the following
|
||
simple lines would time the graph generation.</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
|
||
</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"> Create a new timer instance</span><span class="hl-comment"></span><span class="hl-code">
|
||
</span><span class="hl-var">$timer</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">JpgTimer</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||
|
||
</span><span class="hl-comment">//</span><span class="hl-comment"> Start the timer</span><span class="hl-comment"></span><span class="hl-code">
|
||
</span><span class="hl-var">$timer</span><span class="hl-code">-></span><span class="hl-identifier">Push</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||
|
||
</span><span class="hl-comment">//</span><span class="hl-comment"> Create the graph. These two calls are always required</span><span class="hl-comment"></span><span class="hl-code">
|
||
</span><span class="hl-var">$graph</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-number">300</span><span class="hl-code">,</span><span class="hl-number">200</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">SetScale</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">textlin</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||
|
||
</span><span class="hl-comment">//</span><span class="hl-comment"> Make the bottom margin large enough to hold the timer value</span><span class="hl-comment"></span><span class="hl-code">
|
||
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">SetMargin</span><span class="hl-brackets">(</span><span class="hl-number">40</span><span class="hl-code">,</span><span class="hl-number">20</span><span class="hl-code">,</span><span class="hl-number">20</span><span class="hl-code">,</span><span class="hl-number">60</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||
|
||
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">title</span><span class="hl-code">-></span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">Timing a graph</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">footer</span><span class="hl-code">-></span><span class="hl-identifier">right</span><span class="hl-code">-></span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">Timer (ms): </span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">footer</span><span class="hl-code">-></span><span class="hl-identifier">right</span><span class="hl-code">-></span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_COURIER</span><span class="hl-code">,</span><span class="hl-identifier">FS_ITALIC</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">footer</span><span class="hl-code">-></span><span class="hl-identifier">SetTimer</span><span class="hl-brackets">(</span><span class="hl-var">$timer</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||
|
||
</span><span class="hl-comment">//</span><span class="hl-comment"> The rest of the script as normal ..</span><span class="hl-comment"></span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<p>
|
||
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
|
||
<p>Remember to make the bottom margin large enough.</p>
|
||
</div><p>
|
||
</p>
|
||
<p><a class="xref" href="ch14s02.html#fig.example11" title="Figure 14.12. Adding a timer to the graph (in the footer) (example11.php)">Figure 14.12. Adding a timer to the graph (in the footer) <code class="uri"><a class="uri" href="example_src/example11.html" target="_top">(<code class="filename">example11.php</code>)</a></code> </a> shows an example of using a timer to add
|
||
the time (in ms) it took to generate the graph</p>
|
||
<p>
|
||
</p><div class="figure"><a name="fig.example11"></a><p class="title"><b>Figure 14.12. Adding a timer to the graph (in the footer) <code class="uri"><a class="uri" href="example_src/example11.html" target="_top">(<code class="filename">example11.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/example11.png" alt="Adding a timer to the graph (in the footer) (example11.php)"></span> </div></div><p><br class="figure-break">
|
||
</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="ch14.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>
|