deon/phptsmadmin
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
This repository has been archived on 2024-04-08. You can view files and clone it, but cannot push or open issues or pull requests.
d7822a03e8
phptsmadmin/includes/jpgraph/docs/chunkhtml/ch35s02.html

230 lines
24 KiB
HTML
Raw Normal View History

Added JPGraph v3.5.0b1
2011-05-28 09:51:52 +00:00
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Creating a utility class to construct CC BP charts</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="ch35.html" title="Chapter 35. Creating Critical chain buffer penetration charts"></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 a utility class to construct CC BP charts</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 35. Creating Critical chain buffer penetration charts</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Creating a utility class to construct CC BP charts"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2621713"></a>Creating a utility class to construct CC BP charts</h2></div></div></div>
<p>We will start from a high level and think about how we would like to be able to
use such a utility class. Ideally it would be similar to other types of graphs
classes. To keep things simple we want the following parameter to be
adjustable</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>The min and max x- and y-axis scale values to be displayed in the
graph</p>
</li><li class="listitem">
<p>The limits for the color indications, i.e. exactly what is the green,
yellow, red and brown areas should be customizable. In oder to keep the
interface simple we assume that the areas are bounded by straight lines
and that we want to be able to specify the areas by stating the value at
x=0 and the value at x=maximum x-scale </p>
<p>So for example the standard green area is limited by the specification
(5,75) meaning that the green line crosses y=5 at x=0 and y=75 at
x=100</p>
</li><li class="listitem">
<p>We would also like to be ale to adjust the colors used as
indicators</p>
</li><li class="listitem">
<p>We want to be able to add both scatter marks and lines (to show
history)</p>
</li><li class="listitem">
<p>We also need to be able to specify the title and the sub title</p>
</li><li class="listitem">
<p>The rest of the graph options and setting we would like the utility
class to handle for us. As a bonus it would be nice if the class
adjusted the size of the fonts to the overall size we have specified for
the graph automatically to make it look visually proportional.</p>
</li></ul></div><p>
</p>
<p>When doing designs like this it is always good to first write a small test driver
without having to think about how to actually implement it. This keeps an end user
perspective on things. Later on we can do changes if it turns out that a particular
simplification for the user is simply too complex to implement.</p>
<p>So, lets think about how we (ideally) would like to be able to create the chart
shown in <a class="xref" href="ch35.html#fig.ccbp-historic-chart" title='Figure 35.3. Buffer penetration chart with "historic" tail'>Figure 35.3. Buffer penetration chart with "historic" tail</a></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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</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">CCBPGraph</span><span class="hl-brackets">(</span><span class="hl-number">300</span><span class="hl-code">,</span><span class="hl-number">250</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetTitle</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">Buffer penetration</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">(history)</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$datax</span><span class="hl-code">=</span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-number">83</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-var">$datay</span><span class="hl-code">=</span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-number">60</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$datax_history</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-number">17</span><span class="hl-code">,</span><span class="hl-number">17</span><span class="hl-code">,</span><span class="hl-number">17</span><span class="hl-code">,</span><span class="hl-number">33</span><span class="hl-code">,</span><span class="hl-number">50</span><span class="hl-code">,</span><span class="hl-number">67</span><span class="hl-code">,</span><span class="hl-number">83</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$datay_history</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-number">20</span><span class="hl-code">,</span><span class="hl-number">40</span><span class="hl-code">,</span><span class="hl-number">60</span><span class="hl-code">,</span><span class="hl-number">60</span><span class="hl-code">,</span><span class="hl-number">60</span><span class="hl-code">,</span><span class="hl-number">60</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">$sp</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">ScatterPlot</span><span class="hl-brackets">(</span><span class="hl-var">$datay</span><span class="hl-code">,</span><span class="hl-var">$datax</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$sp</span><span class="hl-code">-&gt;</span><span class="hl-identifier">mark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetType</span><span class="hl-brackets">(</span><span class="hl-identifier">MARK_DIAMOND</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$sp</span><span class="hl-code">-&gt;</span><span class="hl-identifier">mark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFillColor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">white</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$sp</span><span class="hl-code">-&gt;</span><span class="hl-identifier">mark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetSize</span><span class="hl-brackets">(</span><span class="hl-number">10</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$sp_hist</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">LinePlot</span><span class="hl-brackets">(</span><span class="hl-var">$datay2</span><span class="hl-code">,</span><span class="hl-var">$datax2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$sp_hist</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetWeight</span><span class="hl-brackets">(</span><span class="hl-number">2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$sp_hist</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">black</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">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$sp_hist</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$sp</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</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">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>We cannot hope to have the class make it any simpler than this. This is as close
to a "normal" line graph we can get (apart from the color indications in the
background). So now its just a matter on designing this class.</p>
<p>Since the utility class will be a rather restricted graph class it with a very
specific usage it doesn't make sense to implement it as an extension to the normal
graph. Instead we will create contain class that contains a graph that we can modify
and setup. (In UML language a <span class="italic">has-a</span>
relation.)</p>
<p>We will name our utility class <code class="code">CCBPGraph</code> (Short for <span class="italic">Critical chain Buffer Penetration Graph</span>). The class
should have the following 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-reserved">class</span><span class="hl-code"> </span><span class="hl-identifier">CCBPGraph</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">private</span><span class="hl-code"> </span><span class="hl-var">$graph</span><span class="hl-code"> = </span><span class="hl-reserved">null</span><span class="hl-code"> ; </span><span class="hl-comment">//</span><span class="hl-comment"> The real graph instance</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> The &quot;normal&quot; constructor</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">__construct</span><span class="hl-brackets">(</span><span class="hl-var">$aWidth</span><span class="hl-code">,</span><span class="hl-var">$aHeight</span><span class="hl-brackets">)</span><span class="hl-code"> </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"> Methods that will control the appearance</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">SetTitle</span><span class="hl-brackets">(</span><span class="hl-var">$aTitle</span><span class="hl-code">,</span><span class="hl-var">$aSubTitle</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">SetXMinMax</span><span class="hl-brackets">(</span><span class="hl-var">$aMin</span><span class="hl-code">,</span><span class="hl-var">$aMax</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">SetYMinMax</span><span class="hl-brackets">(</span><span class="hl-var">$aMin</span><span class="hl-code">,</span><span class="hl-var">$aMax</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">SetColorIndication</span><span class="hl-brackets">(</span><span class="hl-var">$aSpec</span><span class="hl-code">,</span><span class="hl-var">$aColors</span><span class="hl-code">=</span><span class="hl-reserved">null</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">SetColorMap</span><span class="hl-brackets">(</span><span class="hl-var">$aMap</span><span class="hl-brackets">)</span><span class="hl-code"> </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"> Internal function to create and setup the graph</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">private</span><span class="hl-code"> </span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">Init</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </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"> Mimix the standard graph functions Add() and Stroke()</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$aPlots</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-var">$aFile</span><span class="hl-code">=</span><span class="hl-quotes">'</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>In addition the class must have a number of instance variables that are used to
store the settings until we need them when we create the graph. However to keep
things simple here we do not list them above. Lets now walk through the four groups
of methods.</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>The constructor</p>
<p>
</p><pre class="screen">public function __construct($aWidth,$aHeight) {}</pre><p>
</p>
<p>The constructor doesn't need to do very much. It just needs to store
the user specified width and height so we get them back when we create
the actual graph. We could also make use of the constructor to create an
instance of the real graph class but we prefer to do as late as possible
instantiation.</p>
</li><li class="listitem">
<p>Controlling the appearance of the graph. </p>
<p>Again these methods will be very basic "setter" methods that will just
store the user specified options until we need them when we construct
the graph</p>
<p>
</p><pre class="screen">public function SetTitle($aTitle,$aSubTitle) {}
public function SetXMinMax($aMin,$aMax) {}
public function SetYMinMax($aMin,$aMax) {}
public function SetColorIndication($aSpec,$aColors=null) {}
public function SetColorMap($aMap) {}</pre><p>
</p>
<p>For the color setter we should also add some basic error checking so
that the parameter makes sense.</p>
</li><li class="listitem">
<p>The real worker method</p>
<p>
</p><pre class="screen">private function Init() {}</pre><p>
</p>
<p>Since this is the method is where we will do the actual work and will
be fairly large we will spend the entire next section on this
method.</p>
</li><li class="listitem">
<p>The "fake" standard methods. Add() and Stroke(). Since these are
fairly short we will show them here in there entirety</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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$aPlots</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">if</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-identifier">is_array</span><span class="hl-brackets">(</span><span class="hl-var">$aPlots</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-var">$this</span><span class="hl-code">-&gt;</span><span class="hl-identifier">iPlots</span><span class="hl-code"> = </span><span class="hl-identifier">array_merge</span><span class="hl-brackets">(</span><span class="hl-var">$this</span><span class="hl-code">-&gt;</span><span class="hl-identifier">iPlots</span><span class="hl-code">,</span><span class="hl-var">$aPlots</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-reserved">else</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-var">$this</span><span class="hl-code">-&gt;</span><span class="hl-identifier">iPlots</span><span class="hl-brackets">[</span><span class="hl-brackets">]</span><span class="hl-code"> = </span><span class="hl-var">$aPlots</span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-var">$aFile</span><span class="hl-code">=</span><span class="hl-quotes">'</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-var">$this</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Init</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$this</span><span class="hl-code">-&gt;</span><span class="hl-identifier">graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$this</span><span class="hl-code">-&gt;</span><span class="hl-identifier">iPlots</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$this</span><span class="hl-code">-&gt;</span><span class="hl-identifier">graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-var">$aFile</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>When adding plots (with the <code class="code">Add()</code> method) we have to take
into account that the parameter can be either a single object or an
array of plot objects (line and scatter plots) and we must handle that
accordingly as is done above.</p>
<p>For the <code class="code">Stroke()</code> method we use this to call the
initialization method (to actually create the graph) and then add the
user specified plots and finally call the real
<code class="code">Graph::Stroke()</code> of the graph.</p>
<p>These methods are very simple but from the outside it will look like a
"real" graph class with a clean and simple interface. </p>
</li></ol></div><p>
</p>
</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="ch35.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>
Reference in New Issue Copy Permalink