grouille / IMA3_P10

ch19s06.html 21.1 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Case study: Adding a table to a bar 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="ch19.html" title="Chapter 19. Graphical tables"></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">Case study: Adding a table to a bar graph</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 19. Graphical tables</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Case study: Adding a table to a bar graph"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="sec.table-case-study"></a>Case study: Adding a table to a bar graph</h2></div></div></div>
        
        <p>The goal of this example is to explain in detail how to achieve the graphs shown in
                <a class="xref" href="ch19s06.html#fig.tablebarex1" title="Figure 19.20. Combining a bar graph and a table (tablebarex1.php)">Figure 19.20. Combining a bar graph and a table <code class="uri"><a class="uri" href="example_src/tablebarex1.html" target="_top">(<code class="filename">tablebarex1.php</code>)</a></code> </a></p>
        <p>
            </p><div class="figure"><a name="fig.tablebarex1"></a><p class="title"><b>Figure 19.20. Combining a bar graph and a table <code class="uri"><a class="uri" href="example_src/tablebarex1.html" target="_top">(<code class="filename">tablebarex1.php</code>)</a></code> </b></p><div class="figure-contents">  <span class="inlinemediaobject"><img src="images/tablebarex1.png" alt="Combining a bar graph and a table (tablebarex1.php)"></span> </div></div><p><br class="figure-break">
        </p>
        <p>The graph in <a class="xref" href="ch19s06.html#fig.tablebarex1" title="Figure 19.20. Combining a bar graph and a table (tablebarex1.php)">Figure 19.20. Combining a bar graph and a table <code class="uri"><a class="uri" href="example_src/tablebarex1.html" target="_top">(<code class="filename">tablebarex1.php</code>)</a></code> </a> consists of a standard accumulated
            bar graph combined with a table just below the X-axis. The way to create such a graph is
            very basic. First create a standard bar graph with some extra bottom margin (to make
            room for the table) and then create and position the table below the graph. The only
            challenge here is to make sure that the width of the table and graph matches to line up
            each column under each bar. </p>
        <p>Lets walk through the steps to do this. </p>
        <p>The data to be plotted in the bar and in the table is created in a table as follows </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
</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">$datay</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-code">
    </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">Jan</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">Feb</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">Mar</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">Apr</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">May</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">Jun</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">,
    </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-number">12</span><span class="hl-code">,</span><span class="hl-number">18</span><span class="hl-code">,</span><span class="hl-number">19</span><span class="hl-code">,</span><span class="hl-number">7</span><span class="hl-code">,</span><span class="hl-number">17</span><span class="hl-code">,</span><span class="hl-number">6</span><span class="hl-brackets">)</span><span class="hl-code">,
    </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-number">3</span><span class="hl-code">,</span><span class="hl-number">5</span><span class="hl-code">,</span><span class="hl-number">2</span><span class="hl-code">,</span><span class="hl-number">7</span><span class="hl-code">,</span><span class="hl-number">5</span><span class="hl-code">,</span><span class="hl-number">25</span><span class="hl-brackets">)</span><span class="hl-code">,
    </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-number">6</span><span class="hl-code">,</span><span class="hl-number">1</span><span class="hl-number">.5</span><span class="hl-code">,</span><span class="hl-number">2</span><span class="hl-number">.4</span><span class="hl-code">,</span><span class="hl-number">2</span><span class="hl-number">.1</span><span class="hl-code">,</span><span class="hl-number">6</span><span class="hl-number">.9</span><span class="hl-code">,</span><span class="hl-number">12</span><span class="hl-number">.3</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>each line in this matrix corresponds to one row in the table and one set of bars that
            will make up the accumulated bar plot. </p>
        <p>First let's define some constants that will control the size and position of the graph
            and table. </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
</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">$nbrbar</span><span class="hl-code"> = </span><span class="hl-number">6</span><span class="hl-code">; </span><span class="hl-comment">//</span><span class="hl-comment"> number of bars and hence number of columns in table</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$cellwidth</span><span class="hl-code"> = </span><span class="hl-number">50</span><span class="hl-code">;  </span><span class="hl-comment">//</span><span class="hl-comment"> width of each column in the table</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$tableypos</span><span class="hl-code"> = </span><span class="hl-number">200</span><span class="hl-code">; </span><span class="hl-comment">//</span><span class="hl-comment"> top left Y-coordinate for table</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$tablexpos</span><span class="hl-code"> = </span><span class="hl-number">60</span><span class="hl-code">;  </span><span class="hl-comment">//</span><span class="hl-comment"> top left X-coordinate for table</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$tablewidth</span><span class="hl-code"> = </span><span class="hl-var">$nbrbar</span><span class="hl-code">*</span><span class="hl-var">$cellwidth</span><span class="hl-code">; </span><span class="hl-comment">//</span><span class="hl-comment"> overall table width</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$rightmargin</span><span class="hl-code"> = </span><span class="hl-number">30</span><span class="hl-code">;  </span><span class="hl-comment">//</span><span class="hl-comment"> right margin in the graph</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$topmargin</span><span class="hl-code"> = </span><span class="hl-number">30</span><span class="hl-code">  </span><span class="hl-comment">//</span><span class="hl-comment"> top margin of graph</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
        </p>
        <p>The next step is to calculate a suitable size for the entire graph, i.e. the entire
            image. </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
</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">$height</span><span class="hl-code"> = </span><span class="hl-number">320</span><span class="hl-code">;  </span><span class="hl-comment">//</span><span class="hl-comment"> a suitable height for the image</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$width</span><span class="hl-code"> = </span><span class="hl-var">$tablexpos</span><span class="hl-code">+</span><span class="hl-var">$tablewidth</span><span class="hl-code">+</span><span class="hl-var">$rightmargin</span><span class="hl-code">; </span><span class="hl-comment">//</span><span class="hl-comment"> the width of the image</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
        </p>
        <p>Finally its time ot make use of these constants to rceate the basic graph. Note that
            we calculate the bottom margin to just fit the tables selected Y-coordinate position. </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
</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">Graph</span><span class="hl-brackets">(</span><span class="hl-var">$width</span><span class="hl-code">,</span><span class="hl-var">$height</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">img</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMargin</span><span class="hl-brackets">(</span><span class="hl-var">$tablexpos</span><span class="hl-code">,</span><span class="hl-var">$rightmargin</span><span class="hl-code">,</span><span class="hl-var">$topmargin</span><span class="hl-code">,</span><span class="hl-var">$height</span><span class="hl-code">-</span><span class="hl-var">$tableypos</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">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-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMarginColor</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-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
        </p>
        <p>The rest of the code to create the accumulated bar plot is pretty mundane and we just
            show the code here without further comment. </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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Create the bars and the accbar plot</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$bplot</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">BarPlot</span><span class="hl-brackets">(</span><span class="hl-var">$datay</span><span class="hl-brackets">[</span><span class="hl-number">3</span><span class="hl-brackets">]</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$bplot</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">orange</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$bplot2</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">BarPlot</span><span class="hl-brackets">(</span><span class="hl-var">$datay</span><span class="hl-brackets">[</span><span class="hl-number">2</span><span class="hl-brackets">]</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$bplot2</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">red</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$bplot3</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">BarPlot</span><span class="hl-brackets">(</span><span class="hl-var">$datay</span><span class="hl-brackets">[</span><span class="hl-number">1</span><span class="hl-brackets">]</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$bplot3</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">darkgreen</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$accbplot</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">AccBarPlot</span><span class="hl-brackets">(</span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-var">$bplot</span><span class="hl-code">,</span><span class="hl-var">$bplot2</span><span class="hl-code">,</span><span class="hl-var">$bplot3</span><span class="hl-brackets">)</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$accbplot</span><span class="hl-code">-&gt;</span><span class="hl-identifier">value</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Show</span><span class="hl-brackets">(</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">$accbplot</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>It's now time to setup the table. The position of the table is determined by the
            previous set constants and the original data as specified above. </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
</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">$table</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">GTextTable</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$table</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-var">$datay</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$table</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetPos</span><span class="hl-brackets">(</span><span class="hl-var">$tablexpos</span><span class="hl-code">,</span><span class="hl-var">$tableypos</span><span class="hl-code">+</span><span class="hl-number">1</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>The rest of the table formatting is fairly basic and again we just show the necessary
            script without further comment. </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
</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">$table</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_NORMAL</span><span class="hl-code">,</span><span class="hl-number">10</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$table</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetAlign</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">right</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$table</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMinColWidth</span><span class="hl-brackets">(</span><span class="hl-var">$cellwidth</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$table</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetNumberFormat</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">%0.1f</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"> Format table header row</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$table</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetRowFillColor</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">teal@0.7</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$table</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetRowFont</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_BOLD</span><span class="hl-code">,</span><span class="hl-number">11</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$table</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetRowAlign</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">center</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"> .. and add it to the graph</span><span class="hl-comment"></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">$table</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></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="ch19.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>