Since I’ve started my hunt for a proper place to live downtown, another activity I’ve proactively started is to be a lot more careful about where and how I spend my money, in an effort to be able to afford rent and have enough money to continue to save.

Bob Newhart, why am I so broke?!

As a way of making myself accountable, I have created an expenses page that tracks my month to month expenses, which I track through Quicken Essentials.

I create the chart using Google Chart Tools, which is a pretty nifty way to display all your data using JavaScript. Though it’s a bit difficult to integrate it into WordPress posts, I took the simplest solution (NOT having to pull and parse data from custom fields) and just passed the data into the header manually.

Here’s the code I used:

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

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart"]});
	google.setOnLoadCallback(drawChart);
	function drawChart() {
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Month');
		data.addColumn('number', '2011');
		data.addRows(12);
		data.setValue(0, 0, 'Jan');
		data.setValue(0, 1, 2610.62);
		data.setValue(1, 0, 'Feb');
		data.setValue(1, 1, 1973.72);
		data.setValue(2, 0, 'Mar');
		data.setValue(2, 1, 3303.36);
		data.setValue(3, 0, 'Apr');
		data.setValue(3, 1, 2836.86);
		data.setValue(4, 0, 'May');
		//data.setValue(4, 1, 882.64);
		data.setValue(5, 0, 'Jun');
		//data.setValue(5, 1, 882.64);
		data.setValue(6, 0, 'Jul');
		//data.setValue(6, 1, 882.64);
		data.setValue(7, 0, 'Aug');
		//data.setValue(7, 1, 882.64);
		data.setValue(8, 0, 'Sep');
		//data.setValue(8, 1, 882.64);
		data.setValue(9, 0, 'Oct');
		//data.setValue(9, 1, 882.64);
		data.setValue(10, 0, 'Nov');
		//data.setValue(10, 1, 882.64);
		data.setValue(11, 0, 'Dec');
		//data.setValue(11, 1, 882.64);
 
		var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
		chart.draw(data, {width: 920, height: 240, title: 'Monthly Expenses',
		                  vAxis: {format:'$#,###', minValue: 0, maxValue: 5000}
		                 });
	}
</script>

Just drop that into your header file (copy and paste the header from header.php and drop it into your template file to isolate it to particular pages) and create a div with the id that matches whatever you put into this line:

35

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

And if we used that, you would use this to place your chart anywhere on the page like so:

1

<div id="chart_div"></div>

Ta daaa!

My eventual goal is to be spending less than $1500 a month, before rent, which ensures that I am saving at least SOME money. Well, here goes nothing.

Enjoy watching me waste my money, thanks for reading!