createxml.jsp?account=12345678

<?xml version="1.0"?>
<!DOCTYPE pdf PUBLIC "-//big.faceless.org//report" "http://big.faceless.org/products/report/report-1.0.dtd">








<pdf>
<head>
<meta name="servlet-cache" value="15s"/>
<meta name="author" value="Mike Bremford"/>
<meta name="title" value="Sample Dynamic Report"/>
<meta name="subject" value="An example of a dynamic report created by the Big Faceless Report Library from a database"/>
<meta name="layout" value="one-column"/>

<style type="text/css">

/*
 * Some styles that are used throughout most of the document
 * search for 'class="info"' to see where these are used.
 */

.info		{ font-style:italic; }
.heading	{ font-family:helvetica; font-weight:bold; font-size:12; }
.address	{ width:3in; corner-radius:10; margin:10; padding:10; border:1; }
.amounttable	{ padding-left:0.5in; margin-right:0.5in; align:right; }

/*
 * The table with class="breakdown" is the main table in the document,
 * listing the itemized calls.
 *
 * We make fairly heavy use of styles here so that we can swap a new
 * style in quickly if we change our mind. Plus it's neater to do
 * it here than scatter attributes about the XML
 */

.breakdown		{ width:100% }
.breakdown thead tr	{ background-color:gray(20%); color:white; border-top:1; border-bottom:1; margin-bottom:4; font-weight:bold; font-family:helvetica; }
.breakdown thead td td			{ border:0; }
.breakdown thead tr td:firstchild	{ border-left:1; }
.breakdown thead tr td:lastchild	{ border-right:1; }
.breakdown tbody 	{ border:1; }

/*
 * These are the two graphs - numcalls the piegraph, callcost the bargraph
 */
#numcalls	{ xrotation:20; zrotation:20; display-key:rotated-inner-flat-outer; }
#callcost	{ xrotation:30; yrotation:20; xaxis-align:right; xaxis-valign:top;
		  yaxis-formatter:currency(); zwall-border-color:gray(70%); bar-width:80%;
		  bar-depth:80%; ywall-border-color:gray(70%); floor-border-color:gray(70%); }

/*
 * For both graphs, set some B+W printer friendly default colors.
 */
#callcost, #numcalls { default-colors:'#D0D0D0, pattern(stripes,#C0C0C0,#E0E0E0,4,2,30), pattern(spots,#C0C0C0,#E0E0E0,3), #A0A0A0, pattern(stripes,#E0E0E0,#C0C0C0,4,1.5,90)'; }

/*
 * The first page will always be given an ID of "page1". We can then
 * reference this in a stylesheet to create a custom footer - a "giro"
 * payment slip.
 */
#page1			{ footer:girofooter; footer-height:240; }

/*
 * The following styles all apply to the "Giro" payment slip
 * at the end of the first page.
 */
#giroslip 		{ width:100%; font-size:9; font-family:Times; font-style:normal; }
#giroslip .smallprint	{ font-size:6; font-family:Times; margin-top:2em; }
#giroslip .info		{ font-size:9; font-family:Times; font-style:italic; }
#giroslip .total	{ font-size:14; font-family:Times; font-weight:bold; margin-top:6; }
#giroslip .giro		{ font-size:16; font-family:Helvetica; font-weight:normal; }
#giroslip .sortcode	{ border:1; padding:1em; font-size:10; font-family:Helvetica; }
#giroslip td.poundbox	{ border:1; height:0.4in; width:0.9in; }
#giroslip td.pennybox	{ border:1; height:0.4in; width:0.4in; }
</style>

<macrolist>
  <macro id="girofooter">
    <!--

    This section creates a Giro payment slip (a Giro is a method of
    paying bills at the local post office, used in the UK). The author
    has never actually paid a bill at the post office with one of these,
    but believes it's possible.

    Rather than make this up, we copied it from an old British Telecom
    bill (a dreaded sight for computer people until flat-rate internet
    finally made it to England).

    Notice the nice dotted line at the top of the following <div>. Power
    users could place an absolutely positioned layer over this with one
    of the "pairs of scissors" characters in the predefined ZapfDingbats
    font, for added effect.

    -->

    <div id="giroslip" border-style="dotted" border-top="1" padding-top="10" margin-top="20">
      <table width="100%">
	<tr>

	  <!-- The left column. Logo, little boxes for the cashier to write in -->

	  <td margin-right="0.25in" valign="bottom">
	    <table cellpadding="0">
	      <tr>
		<td valign="top" margin-bottom="10">
		  <img src="resources/bwlogo.jpg" dpi="300"/>
		  <p class="info" align="right"><big>Payment slip</big></p> 
		</td>
	      </tr>
	      <tr>
		<td>
		  <p class="smallprint">Cashier stamp and initials</p>

		  <!-- Create the corners-only box. -->

		  <shape border="1" width="80" height="80">
		    <shapepath>
		    <lineto x="10%" y="0%"/>
		    <moveto x="90%" y="0%"/>
		    <lineto x="100%" y="0%"/>
		    <lineto x="100%" y="10%"/>
		    <moveto x="100%" y="90%"/>
		    <lineto x="100%" y="100%"/>
		    <lineto x="90%" y="100%"/>
		    <moveto x="10%" y="100%"/>
		    <lineto x="0%" y="100%"/>
		    <lineto x="0%" y="90%"/>
		    <moveto x="0%" y="10%"/>
		    <lineto x="0%" y="0%"/>
		    </shapepath>
		  </shape>
		</td>
	      </tr>
	      <tr>
		<td> 
		  <table cellpadding="0">
		    <tr>
		      <td margin-right="20">
			<p class="smallprint"><nobr>No. cheques</nobr></p>
			<div border="1" width="30" height="30"/>
		      </td>
		      <td>
			<p class="smallprint">Fee</p>
			<div border="1" width="30" height="30"/>
		      </td>
		    </tr>
		  </table>
		</td>
	      </tr>
	    </table>
	  </td>

	  <!-- The right column. The main part of the Giro -->

	  <td>

	    <!-- First part of the right column. The amount, customer number
		 and Giro logo
	     -->

	    <table width="100%">
	      <tr>
		<td valign="bottom">
		  <p class="info" margin-right="0.5in"><nobr>Your Customer No.</nobr></p>
		</td>
		<td valign="bottom">
		  <p margin-right="1in"><nobr>12345678</nobr></p>
		</td>
		<td padding="0" colspan="2" valign="bottom" align="right">

		  <!-- The "Bank Giro Credit" bit. On our bill the Giro symbol of
		       three circles doesn't fit inside the row the way normal HTML
		       table data would. This isn't a problem. We simply offset the
		       <div> containing the logo by 5 points vertically and create
		       the logo normally. Even though it's too big for the row,
		       it will display in full, overlapping the edge of its
		       containing box due to the default overflow attribute value
		       of "visible".

		       Note the position="absolute" attributes on the various
		       elements.
		   -->

		  <table cellpadding="0"><tr>
		    <td>
		      <p class="giro"><nobr>Bank Giro Credit</nobr></p>
		    </td>
		    <td padding-bottom="0">
		      <div padding-left="10" width="30" height="0" y="-5">
			<circle position="absolute" x="14" y="6" radius="7" border="0.5"/>
			<circle position="absolute" x="7" y="18" radius="7" border="0.5"/>
			<circle position="absolute" x="21" y="18" radius="7" border="0.5"/>
			<shape position="absolute" width="100%" height="100%" border="2">
			  <shapepath>
			  <moveto x="21" y="6"/>
			  <lineto x="14" y="6"/>
			  <lineto x="7" y="18"/>
			  <moveto x="2.1" y="13.1"/>
			  <lineto x="7" y="18"/>
			  <lineto x="21" y="18"/>
			  <moveto x="16.1" y="22.9"/>
			  <lineto x="21" y="18"/>
			  <lineto x="14" y="6"/>
			  </shapepath>
			</shape>
		      </div>
		    </td>
		  </tr></table>
		</td>
	      </tr>
	      <tr>
		<td colspan="2" border-top="2" border-bottom="1">
		  <p class="total">Total amount due</p>
	        </td>
		<td border-top="2" border-bottom="1">
		  <p class="total">£700.18</p>
		</td>
		<td></td>
	      </tr>
	    </table>

	    <!-- Second part of the right column. The "Dear Customer" bit
		 and the barcode.
	     -->

	    <table width="100%" margin-top="8">
	      <tr>
		<td margin-right="1in">
		  <p class="info">Dear Customer</p>
		  <ul>
		    <li><p>Please fill in parts 1 to 3 and insert a total next to the &#163; sign below.</p></li>
		    <li>Details of how to pay are shown overleaf.</li>
		    <li>Please do not send cash by post.</li>
		  </ul>
		</td>
		<td align="right" valign="middle">
		  <barcode codetype="code128" showtext="true" value="12345678"/>
		</td>
	      </tr>
	    </table>

	    <!-- Third part of the right column. A 6 column table.
		 1st column = "Bank Details" text and the sort code box
		 2nd column = "Signature" and "Date" text
		 3rd column = blank, but has a bottom border to creat the underlines
		 4th column = "Cash" and "Cheques" text and the pound sign
		 5th column = the pounds box (would be the dollars box in the US)
		 6th column = the pennies box (would be the cents box in the US)
	     -->

	    <table width="100%" margin-top="10">
	      <tr>
		<td rowspan="3" valign="bottom">
		  <p>
		    Bank Details<br/>
		    Big Faceless Banking Corp.<br/>
		    Head Office Collection Acct.
		  </p>
		  <p class="sortcode">12-34-56</p>
		</td>
		<td valign="middle">1 Signature</td>
		<td border-bottom="1" width="1.5in" margin-right="0.2in"></td>
		<td valign="middle">3 Cash</td>
		<td class="poundbox"></td>
		<td class="pennybox"></td>
	      </tr>
	      <tr>
		<td valign="middle">2 Date</td>
		<td border-bottom="1" width="1.5in" margin-right="0.2in"></td>
		<td valign="middle">or cheques</td>
		<td class="poundbox"></td>
		<td class="pennybox"></td>
	      </tr>
	      <tr>
		<td colspan="3" valign="middle"><p align="right" class="giro">&#163;</p></td>
		<td colspan="2" class="poundbox"></td>
	      </tr>
	    </table>

	    <!-- Fourth part of the right side - the footnote -->

	    <p margin-top="2" class="smallprint">
	      Please do not fold, pin or staple this slip or write below this line
	    </p>
	  </td>
	</tr>
      </table>

      <!-- Create a black line at the bottom. Ideally we'd do this by setting a
	   the bottom border for the surrounding div, but we've already set the
	   top border to "dotted", and currently we can only set one border-style
	   for all the borders. We'll probably fix this in a later release
      -->
      <div width="100%" height="12" margin-top="2" margin-bottom="8" background-color="black"/>

    </div>
  </macro>

  <macro id="header">
    <!--
         This header is used on every page, and contains the
	 logo, address (ours and theres) and so on.
    -->

    <div>
      <table width="100%">
	<tr>
	  <!-- First the logo and its accompanying text  -->

	  <td>
	    <table>
	      <tr>
		<td>
		  <img src="resources/bwlogo.jpg" dpi="300"/>
		</td>
		<td valign="middle">
		  <p class="heading">Big Faceless Telecommunications Ltd.</p>
		</td>
	      </tr>
	    </table>
	  </td>

	  <!-- Next the customer number and our address -->

	  <td rowspan="2" align="right">
	    <table>
	      <tr>
		<td>
		  <p class="info" padding-right="0.5in">Your Customer No.</p>
		</td>
		<td>
		  <p>12345678</p>
		</td>
	      </tr>
	      <tr border-bottom="1">
		<td>
		  <p class="info">Date</p>
		</td>
		<td>
		  <p>24 April 2024</p>
		</td>
	      </tr>
	      <tr border-bottom="2">
		<td colspan="2">
		  Big Faceless Telecommunications Ltd.<br/>
		  A fictitious company<br/>
		  Invented to demonstrate<br/>
		  The Report Generator<br/>
		  <br/>
		  http://big.faceless.org/products/report
		</td>
	      </tr>
	    </table>
	  </td>

	</tr>
	<tr>

	  <!-- On the next row, the customers address -->

	  <td valign="bottom"><pre class="address">
John Tester
21 Test Street
Testville
Testland
	    </pre></td>
	</tr>
      </table>

      <!-- Last of all, the title and pagenumber of the document -->

      <table width="100%" border-bottom="2" margin-bottom="8" class="heading">
	<tr>
	  <td>
	    Phone Bill for John Tester
	  </td>
	  <td>
	    <p align="right">Page <currentpage/> of <totalpages/></p>
	  </td>
	</tr>
      </table>
    </div>
  </macro>
</macrolist>

</head>

<!--

Now we begin the actual body of the document. In this example most
of the work is done in the headers and footers, so this bit is
fairly simple

Notice how we use the header="header" attribute. The quoted value is
just the ID of the appropriate macro to include - it could be called
anything, there's nothing special about it being called "header"

We also set the language for the whole document here - this is taken
from the locale, and is done in the form "en-US" or "de-DE". The
country part is used to format the currency values.

-->


<body size="A4" header="header" header-height="180" padding="0.25in" font-size="10" lang="en-GB">


<!-- First the heading table, giving the total amount of the bill -->

<table font-size="11" margin-bottom="10" >
  <tr>
    <td class="amounttable" border-bottom="1" padding-bottom="5">
      <p>£595.90</p>
    </td>
    <td>Call Charges</td>
  </tr>
  <tr>
    <td class="amounttable" padding-bottom="5">
      <p>£595.90</p>
    </td>
    <td>Subtotal excluding VAT</td>
  </tr>
  <tr>
    <td class="amounttable" padding-bottom="5" border-bottom="2">
      <p>£104.28</p>
    </td>
    <td>Tax at 17.5%</td>
  </tr>
  <tr font-weight="bold">
    <td class="amounttable">
      <p>£700.18</p>
    </td>
    <td>Total due</td>
  </tr>
</table>


<!-- Now the main table with the itemized calls. Because most of the
     styling information is done in the stylesheet back in the document
     head, this is surprisingly simple.

     We use the database again to get the call information.
-->

<table class="breakdown">
  <thead>
    <tr>
      <td>Date</td>
      <td>Number</td>
      <td>Destination</td>
      <td>Duration (seconds)</td>
      <td>Cost</td>
    </tr>
  </thead>
  <tbody>

<tr>
<td>7 Sep 2001, 10:10</td>
<td>7391228</td>
<td>Local</td>
<td>20</td>
<td>£0.20</td>
</tr>

<tr>
<td>7 Sep 2001, 18:31</td>
<td>07092 872256</td>
<td>Mobile</td>
<td>55</td>
<td>£4.40</td>
</tr>

<tr>
<td>8 Sep 2001, 05:13</td>
<td>5882994</td>
<td>Local</td>
<td>45</td>
<td>£0.45</td>
</tr>

<tr>
<td>9 Sep 2001, 01:34</td>
<td>+49 1 7755539</td>
<td>Germany</td>
<td>145</td>
<td>£17.40</td>
</tr>

<tr>
<td>9 Sep 2001, 03:40</td>
<td>5714543</td>
<td>Local</td>
<td>30</td>
<td>£0.30</td>
</tr>

<tr>
<td>9 Sep 2001, 18:32</td>
<td>+64 4 4473439</td>
<td>New Zealand</td>
<td>160</td>
<td>£27.20</td>
</tr>

<tr>
<td>10 Sep 2001, 13:29</td>
<td>+64 4 4164573</td>
<td>New Zealand</td>
<td>50</td>
<td>£8.50</td>
</tr>

<tr>
<td>11 Sep 2001, 04:23</td>
<td>6116135</td>
<td>Local</td>
<td>160</td>
<td>£1.60</td>
</tr>

<tr>
<td>11 Sep 2001, 07:35</td>
<td>+49 1 8394678</td>
<td>Germany</td>
<td>90</td>
<td>£10.80</td>
</tr>

<tr>
<td>11 Sep 2001, 22:36</td>
<td>+49 1 8135090</td>
<td>Germany</td>
<td>25</td>
<td>£3.00</td>
</tr>

<tr>
<td>12 Sep 2001, 11:58</td>
<td>9474497</td>
<td>Local</td>
<td>80</td>
<td>£0.80</td>
</tr>

<tr>
<td>13 Sep 2001, 06:54</td>
<td>+49 1 9143114</td>
<td>Germany</td>
<td>55</td>
<td>£6.60</td>
</tr>

<tr>
<td>13 Sep 2001, 15:05</td>
<td>07771 790326</td>
<td>Mobile</td>
<td>55</td>
<td>£4.40</td>
</tr>

<tr>
<td>14 Sep 2001, 10:51</td>
<td>07092 513723</td>
<td>Mobile</td>
<td>125</td>
<td>£10.00</td>
</tr>

<tr>
<td>14 Sep 2001, 18:41</td>
<td>6393857</td>
<td>Local</td>
<td>105</td>
<td>£1.05</td>
</tr>

<tr>
<td>15 Sep 2001, 04:58</td>
<td>3150902</td>
<td>Local</td>
<td>160</td>
<td>£1.60</td>
</tr>

<tr>
<td>15 Sep 2001, 16:15</td>
<td>9832865</td>
<td>Local</td>
<td>70</td>
<td>£0.70</td>
</tr>

<tr>
<td>16 Sep 2001, 08:25</td>
<td>5248614</td>
<td>Local</td>
<td>65</td>
<td>£0.65</td>
</tr>

<tr>
<td>16 Sep 2001, 09:16</td>
<td>07771 944645</td>
<td>Mobile</td>
<td>130</td>
<td>£10.40</td>
</tr>

<tr>
<td>17 Sep 2001, 01:11</td>
<td>+64 4 5001559</td>
<td>New Zealand</td>
<td>140</td>
<td>£23.80</td>
</tr>

<tr>
<td>17 Sep 2001, 08:20</td>
<td>7286736</td>
<td>Local</td>
<td>115</td>
<td>£1.15</td>
</tr>

<tr>
<td>17 Sep 2001, 15:55</td>
<td>9277289</td>
<td>Local</td>
<td>140</td>
<td>£1.40</td>
</tr>

<tr>
<td>17 Sep 2001, 20:59</td>
<td>+49 1 8207041</td>
<td>Germany</td>
<td>25</td>
<td>£3.00</td>
</tr>

<tr>
<td>18 Sep 2001, 18:15</td>
<td>07092 433947</td>
<td>Mobile</td>
<td>140</td>
<td>£11.20</td>
</tr>

<tr>
<td>19 Sep 2001, 05:26</td>
<td>3517051</td>
<td>Local</td>
<td>40</td>
<td>£0.40</td>
</tr>

<tr>
<td>19 Sep 2001, 12:28</td>
<td>+64 4 4885611</td>
<td>New Zealand</td>
<td>25</td>
<td>£4.25</td>
</tr>

<tr>
<td>20 Sep 2001, 06:41</td>
<td>07771 649980</td>
<td>Mobile</td>
<td>65</td>
<td>£5.20</td>
</tr>

<tr>
<td>20 Sep 2001, 08:44</td>
<td>+49 1 3751255</td>
<td>Germany</td>
<td>65</td>
<td>£7.80</td>
</tr>

<tr>
<td>20 Sep 2001, 11:41</td>
<td>6932697</td>
<td>Local</td>
<td>90</td>
<td>£0.90</td>
</tr>

<tr>
<td>20 Sep 2001, 13:07</td>
<td>+61 2 53578467</td>
<td>Australia</td>
<td>100</td>
<td>£17.00</td>
</tr>

<tr>
<td>20 Sep 2001, 13:16</td>
<td>3683238</td>
<td>Local</td>
<td>40</td>
<td>£0.40</td>
</tr>

<tr>
<td>20 Sep 2001, 23:40</td>
<td>8784498</td>
<td>Local</td>
<td>130</td>
<td>£1.30</td>
</tr>

<tr>
<td>21 Sep 2001, 14:29</td>
<td>8347740</td>
<td>Local</td>
<td>50</td>
<td>£0.50</td>
</tr>

<tr>
<td>22 Sep 2001, 12:31</td>
<td>07771 667340</td>
<td>Mobile</td>
<td>85</td>
<td>£6.80</td>
</tr>

<tr>
<td>23 Sep 2001, 01:57</td>
<td>5767478</td>
<td>Local</td>
<td>105</td>
<td>£1.05</td>
</tr>

<tr>
<td>23 Sep 2001, 10:45</td>
<td>07771 350891</td>
<td>Mobile</td>
<td>45</td>
<td>£3.60</td>
</tr>

<tr>
<td>24 Sep 2001, 02:49</td>
<td>8091627</td>
<td>Local</td>
<td>105</td>
<td>£1.05</td>
</tr>

<tr>
<td>24 Sep 2001, 19:14</td>
<td>6811222</td>
<td>Local</td>
<td>25</td>
<td>£0.25</td>
</tr>

<tr>
<td>24 Sep 2001, 22:53</td>
<td>+61 2 58860163</td>
<td>Australia</td>
<td>40</td>
<td>£6.80</td>
</tr>

<tr>
<td>25 Sep 2001, 15:50</td>
<td>5053500</td>
<td>Local</td>
<td>155</td>
<td>£1.55</td>
</tr>

<tr>
<td>25 Sep 2001, 19:20</td>
<td>8352256</td>
<td>Local</td>
<td>40</td>
<td>£0.40</td>
</tr>

<tr>
<td>25 Sep 2001, 21:07</td>
<td>07092 731561</td>
<td>Mobile</td>
<td>70</td>
<td>£5.60</td>
</tr>

<tr>
<td>26 Sep 2001, 07:19</td>
<td>+49 1 4186966</td>
<td>Germany</td>
<td>105</td>
<td>£12.60</td>
</tr>

<tr>
<td>26 Sep 2001, 16:29</td>
<td>+61 2 55303343</td>
<td>Australia</td>
<td>145</td>
<td>£24.65</td>
</tr>

<tr>
<td>26 Sep 2001, 20:51</td>
<td>6872979</td>
<td>Local</td>
<td>35</td>
<td>£0.35</td>
</tr>

<tr>
<td>27 Sep 2001, 03:08</td>
<td>07771 846048</td>
<td>Mobile</td>
<td>40</td>
<td>£3.20</td>
</tr>

<tr>
<td>27 Sep 2001, 08:48</td>
<td>+64 4 6682848</td>
<td>New Zealand</td>
<td>20</td>
<td>£3.40</td>
</tr>

<tr>
<td>27 Sep 2001, 14:23</td>
<td>8689565</td>
<td>Local</td>
<td>75</td>
<td>£0.75</td>
</tr>

<tr>
<td>28 Sep 2001, 04:09</td>
<td>8874643</td>
<td>Local</td>
<td>65</td>
<td>£0.65</td>
</tr>

<tr>
<td>29 Sep 2001, 02:14</td>
<td>9453474</td>
<td>Local</td>
<td>90</td>
<td>£0.90</td>
</tr>

<tr>
<td>29 Sep 2001, 12:49</td>
<td>5900162</td>
<td>Local</td>
<td>95</td>
<td>£0.95</td>
</tr>

<tr>
<td>29 Sep 2001, 18:27</td>
<td>+61 2 55756113</td>
<td>Australia</td>
<td>90</td>
<td>£15.30</td>
</tr>

<tr>
<td>30 Sep 2001, 00:01</td>
<td>07771 582376</td>
<td>Mobile</td>
<td>40</td>
<td>£3.20</td>
</tr>

<tr>
<td>30 Sep 2001, 21:57</td>
<td>07092 669437</td>
<td>Mobile</td>
<td>95</td>
<td>£7.60</td>
</tr>

<tr>
<td>1 Oct 2001, 01:16</td>
<td>5729671</td>
<td>Local</td>
<td>105</td>
<td>£1.05</td>
</tr>

<tr>
<td>1 Oct 2001, 19:38</td>
<td>3936912</td>
<td>Local</td>
<td>65</td>
<td>£0.65</td>
</tr>

<tr>
<td>2 Oct 2001, 01:33</td>
<td>07092 441792</td>
<td>Mobile</td>
<td>85</td>
<td>£6.80</td>
</tr>

<tr>
<td>2 Oct 2001, 08:28</td>
<td>07092 561694</td>
<td>Mobile</td>
<td>115</td>
<td>£9.20</td>
</tr>

<tr>
<td>3 Oct 2001, 01:11</td>
<td>+64 4 6180591</td>
<td>New Zealand</td>
<td>105</td>
<td>£17.85</td>
</tr>

<tr>
<td>3 Oct 2001, 05:53</td>
<td>7727006</td>
<td>Local</td>
<td>85</td>
<td>£0.85</td>
</tr>

<tr>
<td>3 Oct 2001, 07:18</td>
<td>07771 890948</td>
<td>Mobile</td>
<td>30</td>
<td>£2.40</td>
</tr>

<tr>
<td>3 Oct 2001, 22:22</td>
<td>9172766</td>
<td>Local</td>
<td>100</td>
<td>£1.00</td>
</tr>

<tr>
<td>4 Oct 2001, 17:33</td>
<td>6215751</td>
<td>Local</td>
<td>50</td>
<td>£0.50</td>
</tr>

<tr>
<td>5 Oct 2001, 12:49</td>
<td>+61 2 53181281</td>
<td>Australia</td>
<td>35</td>
<td>£5.95</td>
</tr>

<tr>
<td>6 Oct 2001, 04:20</td>
<td>8638710</td>
<td>Local</td>
<td>55</td>
<td>£0.55</td>
</tr>

<tr>
<td>6 Oct 2001, 07:39</td>
<td>3765724</td>
<td>Local</td>
<td>130</td>
<td>£1.30</td>
</tr>

<tr>
<td>6 Oct 2001, 12:07</td>
<td>3387962</td>
<td>Local</td>
<td>165</td>
<td>£1.65</td>
</tr>

<tr>
<td>6 Oct 2001, 12:52</td>
<td>+61 2 53424347</td>
<td>Australia</td>
<td>165</td>
<td>£28.05</td>
</tr>

<tr>
<td>6 Oct 2001, 16:16</td>
<td>07771 339739</td>
<td>Mobile</td>
<td>140</td>
<td>£11.20</td>
</tr>

<tr>
<td>7 Oct 2001, 01:42</td>
<td>+64 4 7195694</td>
<td>New Zealand</td>
<td>165</td>
<td>£28.05</td>
</tr>

<tr>
<td>7 Oct 2001, 12:33</td>
<td>+49 1 9773679</td>
<td>Germany</td>
<td>160</td>
<td>£19.20</td>
</tr>

<tr>
<td>8 Oct 2001, 08:39</td>
<td>3605188</td>
<td>Local</td>
<td>80</td>
<td>£0.80</td>
</tr>

<tr>
<td>9 Oct 2001, 05:13</td>
<td>9994113</td>
<td>Local</td>
<td>20</td>
<td>£0.20</td>
</tr>

<tr>
<td>9 Oct 2001, 12:28</td>
<td>+49 1 6920059</td>
<td>Germany</td>
<td>100</td>
<td>£12.00</td>
</tr>

<tr>
<td>10 Oct 2001, 04:22</td>
<td>7450076</td>
<td>Local</td>
<td>140</td>
<td>£1.40</td>
</tr>

<tr>
<td>10 Oct 2001, 06:47</td>
<td>+64 4 3480171</td>
<td>New Zealand</td>
<td>105</td>
<td>£17.85</td>
</tr>

<tr>
<td>10 Oct 2001, 22:25</td>
<td>9142118</td>
<td>Local</td>
<td>140</td>
<td>£1.40</td>
</tr>

<tr>
<td>11 Oct 2001, 04:25</td>
<td>+61 2 53691606</td>
<td>Australia</td>
<td>140</td>
<td>£23.80</td>
</tr>

<tr>
<td>11 Oct 2001, 20:25</td>
<td>+61 2 56511591</td>
<td>Australia</td>
<td>165</td>
<td>£28.05</td>
</tr>

<tr>
<td>12 Oct 2001, 06:17</td>
<td>5558002</td>
<td>Local</td>
<td>90</td>
<td>£0.90</td>
</tr>

<tr>
<td>12 Oct 2001, 09:04</td>
<td>3541066</td>
<td>Local</td>
<td>65</td>
<td>£0.65</td>
</tr>

<tr>
<td>13 Oct 2001, 02:50</td>
<td>6381434</td>
<td>Local</td>
<td>95</td>
<td>£0.95</td>
</tr>

<tr>
<td>13 Oct 2001, 07:03</td>
<td>6372071</td>
<td>Local</td>
<td>115</td>
<td>£1.15</td>
</tr>

<tr>
<td>13 Oct 2001, 08:09</td>
<td>+64 4 3490229</td>
<td>New Zealand</td>
<td>115</td>
<td>£19.55</td>
</tr>

<tr>
<td>14 Oct 2001, 03:33</td>
<td>9773603</td>
<td>Local</td>
<td>150</td>
<td>£1.50</td>
</tr>

<tr>
<td>14 Oct 2001, 14:50</td>
<td>+49 1 7545454</td>
<td>Germany</td>
<td>70</td>
<td>£8.40</td>
</tr>

<tr>
<td>15 Oct 2001, 01:31</td>
<td>5848586</td>
<td>Local</td>
<td>120</td>
<td>£1.20</td>
</tr>

<tr>
<td>15 Oct 2001, 11:35</td>
<td>5140880</td>
<td>Local</td>
<td>115</td>
<td>£1.15</td>
</tr>

<tr>
<td>16 Oct 2001, 01:22</td>
<td>4387930</td>
<td>Local</td>
<td>140</td>
<td>£1.40</td>
</tr>

<tr>
<td>16 Oct 2001, 21:14</td>
<td>07092 604307</td>
<td>Mobile</td>
<td>75</td>
<td>£6.00</td>
</tr>

<tr>
<td>17 Oct 2001, 16:37</td>
<td>6273014</td>
<td>Local</td>
<td>145</td>
<td>£1.45</td>
</tr>

<tr>
<td>17 Oct 2001, 21:07</td>
<td>+61 2 53518840</td>
<td>Australia</td>
<td>165</td>
<td>£28.05</td>
</tr>

<tr>
<td>18 Oct 2001, 09:43</td>
<td>7287431</td>
<td>Local</td>
<td>100</td>
<td>£1.00</td>
</tr>

<tr>
<td>19 Oct 2001, 07:43</td>
<td>07771 476663</td>
<td>Mobile</td>
<td>30</td>
<td>£2.40</td>
</tr>

<tr>
<td>19 Oct 2001, 10:50</td>
<td>9627491</td>
<td>Local</td>
<td>145</td>
<td>£1.45</td>
</tr>

<tr>
<td>19 Oct 2001, 10:54</td>
<td>6506541</td>
<td>Local</td>
<td>90</td>
<td>£0.90</td>
</tr>

<tr>
<td>19 Oct 2001, 23:45</td>
<td>+64 4 4298476</td>
<td>New Zealand</td>
<td>30</td>
<td>£5.10</td>
</tr>

<tr>
<td>20 Oct 2001, 17:51</td>
<td>4290301</td>
<td>Local</td>
<td>105</td>
<td>£1.05</td>
</tr>

<tr>
<td>21 Oct 2001, 06:42</td>
<td>8449829</td>
<td>Local</td>
<td>45</td>
<td>£0.45</td>
</tr>

<tr>
<td>21 Oct 2001, 19:07</td>
<td>7068587</td>
<td>Local</td>
<td>45</td>
<td>£0.45</td>
</tr>

  </tbody>
</table>

<!--

That's the call breakdown, now we place the final items on the statement,
the graphs analyzing the calls.

Again most of the styling for these graphs is done in the stylesheet in
the document head, so all we need to do here is put in the graph values

-->


<table width="100%" margin-top="20">
  <thead>
    <tr border-bottom="2" margin-bottom="8">
      <td colspan="2" class="heading">Call analysis</td>
    </tr>
  </thead>
  <tr>
    <td align="center">
      <p class="h4">Number of calls</p>

      <!-- First the Pie Graph -->

      <piegraph width="3.5in" height="3.5in" id="numcalls">
        <gdata name="Australia" value="9.0"/>
        <gdata name="Germany" value="10.0"/>
        <gdata name="Local" value="53.0"/>
        <gdata name="Mobile" value="18.0"/>
        <gdata name="New Zealand" value="10.0"/>
      </piegraph>
    </td>
    <td align="center">

      <p class="h4">Cost of calls</p>

      <!-- Then the Bar Graph -->

      <bargraph width="3.5in" height="3.5in" id="callcost">
        <gdata name="Australia" value="177.65"/>
        <gdata name="Germany" value="100.8"/>
        <gdata name="Local" value="48.3"/>
        <gdata name="Mobile" value="113.6"/>
        <gdata name="New Zealand" value="155.55"/>
      </bargraph>
    </td>
  </tr>
</table>

<!--

All done! Close the PDF. The final } brace matches the "if (account==null)"
test way back near the start of the document

-->
    

</body>
</pdf>