archive
/
moneyanalyser


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
							<!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.selection.js" type="text/javascript"></script>
  <script src="data.php" type="text/javascript"></script>
  <script type="text/javascript">
   var previousPoint = null;
   var plots = {};
   var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

   function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css( {
     position: 'absolute',
     display: 'none',
     top: y + 5,
     left: x + 5,
     border: '1px solid #fdd',
     padding: '2px',
     'background-color': '#fee',
    }).appendTo("body").fadeIn(200);
   }

   function getDateKey(date) {
    return date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1);
   }

   function showSelectedMonths(start, end, incoming, outgoing) {
    $('#historytable tr.data').remove();
    $('#historytable').show();

    var startDate = new Date(start), endDate = new Date(end);

    if (startDate.getDate() > 1) {
     startDate.setDate(1);
     startDate.getMonth() == 11 && startDate.setYear(startDate.getFullYear() + 1);
     startDate.setMonth(startDate.getMonth() == 11 ? 0 : startDate.getMonth() + 1);
    }

    var startKey = getDateKey(startDate), endKey = getDateKey(endDate);

    if (startKey == endKey) {
     $('#historytable h3').text('Transactions for ' + months[startDate.getMonth()] + ' ' + startDate.getFullYear());
    } else if (startDate.getFullYear() == endDate.getFullYear()) {
     $('#historytable h3').text('Transactions for ' + months[startDate.getMonth()] + '-' + months[endDate.getMonth()] + ' ' + startDate.getFullYear());
    } else {
     $('#historytable h3').text('Transactions for ' + months[startDate.getMonth()] + ' ' + startDate.getFullYear() + ' - ' +  months[endDate.getMonth()] + ' ' + endDate.getFullYear());
    }

    var pieData = {};
    var table = $('#historytable table');
    var include = false;
    $.each(data, function(month, monthData) {
     if (month == startKey) { include = true; }

     if (include) {
      $.each(monthData, function(index, trans) {
       if (incoming != trans.Amount > 0) { return; }

       var category = trans.Category ? trans.Category : 'Unsorted';

       var tr = $('<tr/>').addClass('data').addClass('category' + category.replace(/[^a-zA-Z]*/g, '')).appendTo(table);
 
       $('<td/>').text(trans.Date.date.split(' ')[0]).appendTo(tr);
       $('<td/>').text(trans.Type ? trans.Type : 'Other').appendTo(tr);
       $('<td/>').text(trans.Category ? trans.Category : '').appendTo(tr);
       $('<td/>').text(trans.Description).appendTo(tr);
       $('<td/>').text(trans.Amount).appendTo(tr);
 
       if (category != '(Ignored)') {
        if (!pieData[category]) { pieData[category] = 0; }
        pieData[category] += Math.abs(trans.Amount);
       }
      });
     }

     if (month == endKey) { include = false; }
    });

    var seriesData = [];
    $.each(pieData, function(category, amount) {
     seriesData.push({ label: category + ' (' + Math.round(amount) + ')', data: amount });
    });

    seriesData.sort(function(a, b) { return b.data - a.data; });

    plots.expense = $.plot($('#expense'), seriesData, {
      series: { pie: { show: true, innerRadius: 0.5, highlight: { opacity: 0.5 } } },
      grid: { clickable: true }
    });
   }

   $(function() {
    var transData = [{label: 'Income', data: []}, {label: 'Expense', data: []}];

    $.each(data, function(month, entries) {
     var split = month.split('-');
     var timestamp = new Date(split[0], split[1] - 1).getTime();
     var sum = [0, 0];

     $.each(entries, function() {
      if (this.Category == '(Ignored)') { return; }

      sum[this.Amount < 0 ? 1 : 0] += this.Amount;
     });

     transData[0].data.push([timestamp, sum[0]]);
     transData[1].data.push([timestamp, sum[1]]);
    }); 

    plots.history = $.plot($('#history'), transData, {
      xaxis: { mode: 'time', timeformat: '%y/%m'},
      series: {
        lines: { show: true },
        points: { show: true }
      },
      grid: { hoverable: true, clickable: true },
      selection: { mode : "x" }
    });

    $("#history").bind("plothover", function (event, pos, item) {
     if (item) {
      var id = {dataIndex: item.dataIndex, seriesIndex: item.seriesIndex};

      if (previousPoint == null || previousPoint.dataIndex != id.dataIndex || previousPoint.seriesIndex != id.seriesIndex) {
       previousPoint = id;
                
       $("#tooltip").remove();
       var x = item.datapoint[0],
           y = item.datapoint[1].toFixed(2);
                    
       var date = new Date(x);

       showTooltip(item.pageX, item.pageY,
                   (item.seriesIndex == 0 ? "Money in" : "Money out") + " during " + months[date.getMonth()] + " " + date.getFullYear() + " = " + y);
      }
     } else {
      $("#tooltip").remove();
      previousPoint = null;            
     }
    });

    $('#history').bind('plotselected', function(event, ranges) {
     var startDate = parseInt(ranges.xaxis.from.toFixed());
     var endDate = parseInt(ranges.xaxis.to.toFixed());
    
     showSelectedMonths(startDate, endDate, 0); 
    });

    $('#history').bind('plotclick', function(event, pos, item) {
     if (item) {
      showSelectedMonths(item.datapoint[0], item.datapoint[0], item.seriesIndex == 0, item.seriesIndex == 1);
     }
    });

    $('#expense').bind('plotclick', function(event, pos, item) {
     $('#historytable .data').hide();
     $('#historytable .category' + item.series.label.replace(/[^a-zA-Z]*/g, '')).show();
    });
   });
  </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: 0; }
  </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: 600px; height: 300px;"></div>
   <div id="historytable" style="display: none;"><h3>Transactions for ??</h3><table><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: 600px; height: 300px;"></div>
  </div>
 </body>
</html>