archive
/
moneyanalyser
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Add expense categories graph

master
Chris Smith 13 years ago
parent
e98ef971e0
commit
d9190e7679
2 changed files with 44 additions and 4 deletions
Unified View Show Diff Stats
  1. 37
    1
      analyser.js
  2. 7
    3
      index.html

+ 37
- 1
analyser.js View File

91
91
92 
 $(function() {
 92 
 $(function() {
93 
  var transData = [{label: 'Income', data: []}, {label: 'Expense', data: []}, {label: 'Difference', data: []}];
 93 
  var transData = [{label: 'Income', data: []}, {label: 'Expense', data: []}, {label: 'Difference', data: []}];
94 
+ var categories = {};
94 
  var min = new Date().getTime(), max = 0;
 95 
  var min = new Date().getTime(), max = 0;
95
96
96 
  $.each(data, function(month, entries) {
 97 
  $.each(data, function(month, entries) {
101 
   $.each(entries, function() {
 102 
   $.each(entries, function() {
102 
    if (this.Category == '(Ignored)') { return; }
 103 
    if (this.Category == '(Ignored)') { return; }
103
104
105 
+   if (this.Amount < 0) {
106 
+    var category = this.Category ? this.Category : 'Unsorted';
107 
+    if (!categories[category]) { categories[category] = {}; }
108 
+    if (!categories[category][timestamp]) { categories[category][timestamp] = 0; }
109 
+    categories[category][timestamp] -= this.Amount;
110 
+   }
111 
+
104 
    sum[this.Amount < 0 ? 1 : 0] += this.Amount;
 112 
    sum[this.Amount < 0 ? 1 : 0] += this.Amount;
105 
   });
 113 
   });
106
114
111 
   max = Math.max(max, timestamp);
 119 
   max = Math.max(max, timestamp);
112 
  });
120 
  });
113
121
122 
+ var catData = [];
123 
+ $.each(categories, function(category, entries) {
124 
+  var series = {label: category, data: []};
125 
+  var total = 0;
126 
+
127 
+  $.each(transData[0].data, function() {
128 
+   var timestamp = this[0];
129 
+   var val = entries[timestamp] ? entries[timestamp] : 0;
130 
+   total += val;
131 
+   series.data.push([timestamp, val]);
132 
+  });
133 
+
134 
+  series.total = total;
135 
+
136 
+  catData.push(series);
137 
+ });
138 
+
139 
+ catData.sort(function(a, b) { return a.total - b.total; });
140 
+
114 
  plots.history = $.plot($('#history'), transData, {
 141 
  plots.history = $.plot($('#history'), transData, {
115 
-   xaxis: { mode: 'time', timeformat: '%y/%m'},
142 
+   xaxis: { mode: 'time', timeformat: '%y/%m' },
116 
    series: {
 143 
    series: {
117 
      lines: { show: true, fill: true },
 144 
      lines: { show: true, fill: true },
118 
      points: { show: true }
 145 
      points: { show: true }
125 
    selection: { mode : "x" }
 152 
    selection: { mode : "x" }
126 
  });
 153 
  });
127
154
155 
+ plots.cathistory = $.plot($('#cathistory'), catData, {
156 
+   xaxis: { mode: 'time', timeformat: '%y/%m' },
157 
+   legend: { noColumns: 2 },
158 
+   series: {
159 
+     stack: true,
160 
+     lines: { show: true, fill: true }
161 
+   },
162 
+ });
163 
+
128 
  $("#history").bind("plothover", function (event, pos, item) {
 164 
  $("#history").bind("plothover", function (event, pos, item) {
129 
   if (item) {
 165 
   if (item) {
130 
    var id = {dataIndex: item.dataIndex, seriesIndex: item.seriesIndex};
 166 
    var id = {dataIndex: item.dataIndex, seriesIndex: item.seriesIndex};

+ 7
- 3
index.html View File

6 
   <script src="externals/flot/jquery.flot.js" type="text/javascript"></script>
 6 
   <script src="externals/flot/jquery.flot.js" type="text/javascript"></script>
7 
   <script src="externals/flot/jquery.flot.pie.js" type="text/javascript"></script>
 7 
   <script src="externals/flot/jquery.flot.pie.js" type="text/javascript"></script>
8 
   <script src="externals/flot/jquery.flot.selection.js" type="text/javascript"></script>
 8 
   <script src="externals/flot/jquery.flot.selection.js" type="text/javascript"></script>
9 
+  <script src="externals/flot/jquery.flot.stack.js" type="text/javascript"></script>
9 
   <script src="externals/jquery.history/jquery.history.js" type="text/javascript"></script>
 10 
   <script src="externals/jquery.history/jquery.history.js" type="text/javascript"></script>
10 
   <script src="data.php" type="text/javascript"></script>
 11 
   <script src="data.php" type="text/javascript"></script>
11 
   <script src="analyser.js" type="text/javascript"></script>
 12 
   <script src="analyser.js" type="text/javascript"></script>
17 
    #header { background: url('res/gradient.png') repeat-x; height: 100px; margin: 0 0 10px 0; overflow: hidden; z-index: 0; }
 18 
    #header { background: url('res/gradient.png') repeat-x; height: 100px; margin: 0 0 10px 0; overflow: hidden; z-index: 0; }
18 
    #header h1 { color: white; margin: 0; font-size: 60px; position: absolute; top: 42px; left: 20px; z-index: 2; }
 19 
    #header h1 { color: white; margin: 0; font-size: 60px; position: absolute; top: 42px; left: 20px; z-index: 2; }
19 
    #headershadow { font-size: 60px; position: absolute; top: 42px; left: 25px; font-weight: bold; z-index: 1; }
 20 
    #headershadow { font-size: 60px; position: absolute; top: 42px; left: 25px; font-weight: bold; z-index: 1; }
20 
-   h2 { margin-top: 0; }
21 
+   h2 { margin-top: 10; }
21 
    table { border-collapse: collapse; }
 22 
    table { border-collapse: collapse; }
22 
    tr.alt td { background-color: #ddd; }
 23 
    tr.alt td { background-color: #ddd; }
23 
    td { padding: 3px; }
 24 
    td { padding: 3px; }
24 
    th { text-align: left; }
 25 
    th { text-align: left; }
26 
+   .graph { margin-bottom: 40px; }
25 
   </style>
 27 
   </style>
26 
  </head>
 28 
  </head>
27 
  <body>
 29 
  <body>
32
34
33 
   <div class="left">
 35 
   <div class="left">
34 
    <h2>Transaction History</h2>
 36 
    <h2>Transaction History</h2>
35 
-   <div id="history" style="width: 600px; height: 300px;"></div>
37 
+   <div id="history" style="width: 600px; height: 300px;" class="graph"></div>
36 
    <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>
 38 
    <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>
37 
   </div>
 39 
   </div>
38 
   <div class="right">
 40 
   <div class="right">
39 
    <h2>Categories</h2>
 41 
    <h2>Categories</h2>
40 
-   <div id="expense" style="width: 600px; height: 300px;"></div>
42 
+   <div id="expense" style="width: 600px; height: 300px;" class="graph"></div>
43 
+   <h2>Expense Categories</h2>
44 
+   <div id="cathistory" style="width: 600px; height: 600px;" class="graph"></div>
41 
   </div>
 45 
   </div>
42 
  </body>
 46 
  </body>
43 
 </html>
 47 
 </html>

Write Preview
Loading…
Cancel
Save