archive
/
moneyanalyser


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
							<!DOCTYPE html>
<html>
 <head>
  <title>Spending Analyser</title>
  <script src="externals/flot/jquery.js" type="text/javascript"></script>
  <script src="externals/flot/jquery.flot.js" type="text/javascript"></script>
  <script src="externals/flot/jquery.flot.pie.js" type="text/javascript"></script>
  <script src="externals/flot/jquery.flot.resize.js" type="text/javascript"></script>
  <script src="externals/flot/jquery.flot.selection.js" type="text/javascript"></script>
  <script src="externals/flot/jquery.flot.stack.js" type="text/javascript"></script>
  <script src="externals/jquery.history/jquery.history.js" type="text/javascript"></script>
  <script src="data.php" type="text/javascript"></script>
  <script src="analyser.js" type="text/javascript"></script>
  <style type="text/css">
   .categoryIgnored td { color: gray; }
   .left { width: 45%; padding: 20px; float: left; }
   .right { margin-left: 50%; padding: 20px; }
   body { margin: 0; font-family: sans-serif; }
   #header { background: url('res/gradient.png') repeat-x; height: 100px; margin: 0 0 10px 0; overflow: hidden; z-index: 0; }
   #header h1 { color: white; margin: 0; font-size: 60px; position: absolute; top: 42px; left: 20px; z-index: 2; }
   #headershadow { font-size: 60px; position: absolute; top: 42px; left: 25px; font-weight: bold; z-index: 1; }
   h2 { margin-top: 10px; }
   table { border-collapse: collapse; }
   tr.alt td { background-color: #ddd; }
   td { padding: 3px; }
   th { text-align: left; padding: 5px; }
   .graph { margin-bottom: 40px; }
   .link { color: blue; text-decoration: underline; cursor: pointer; }
   #historytable tr.collapsed { opacity: 0.6; }
   table tr.total td, table tr.total th { background-color: #666; color: #fff; }
   .amount { text-align: right; }
   .datatable { width: 100%; }
  </style>
 </head>
 <body>
  <div id="header">
   <h1>Money Analyser</h1>
  </div>
  <span id="headershadow">Money Analyser</span>

  <div class="left">
   <h2>Transaction History</h2>
   <div id="history" style="width: 100%; height: 300px;" class="graph"></div>
   <div id="historytable" style="display: none;">
    <h3>Transactions for ??</h3>
    <table class="datatable"><tr><th>Date</th><th>Type</th><th>Category</th><th>Description</th><th>Amount</th></tr></table>
   </div>
  </div>
  <div class="right">
   <h2>Categories</h2>
   <div id="expense" style="width: 100%; height: 300px;" class="graph"></div>
   <h2>Expense Categories</h2>
   <!-- The tick labels on the X-Axis extend a bit beyond the edge of the
        graph, so make the graph 50px smaller so the page doesn't scroll -->
   <div style="padding-right: 50px;">
    <div id="cathistory" style="width: 100%; height: 600px;" class="graph"></div>
   </div>
   <div id="repeats" style="display: none;">
    <h2>Repeat Transactions</h2>
    <table class="datatable">
     <tr><th rowspan="2">Transaction</th><th rowspan="2">Category</th><th rowspan="2">Frequency</th><th colspan="2">Average amount</th></tr>
     <tr><th>Per trans</th><th>Per month</th></tr>
    </table>
   </div>
  </div>
 </body>
</html>