diff --git a/ennstatus/static/js/yearbar.js b/ennstatus/static/js/yearbar.js
new file mode 100644
--- /dev/null
+++ b/ennstatus/static/js/yearbar.js
@@ -0,0 +1,90 @@
+d3.select(window).on("resize", throttle);
+var width = document.getElementById('yearchart').offsetWidth - 40 -30;
+var height = (width / 2) - 20 - 30;
+
+var svg, tip;
+
+setup(width, height);
+
+function setup(width, height) {
+	svg = d3.select("#yearchart").append("svg")
+		.attr("width", width)
+		.attr("height", height + 20 + 30)
+		.append("g")
+		.attr("transform", "translate(" + 40 + "," + 20 + ")");
+	tip = d3.tip()
+		.attr('class', 'd3-tip')
+		.offset([-10, 0])
+		.html(function(d) {
+			return "<strong>" + d.key + ":</strong> <span style='color:#00ae18'>" + d.value + "</span>";
+		});
+	svg.call(tip);
+	draw(width, height)
+}
+
+function draw(width, height) {
+	d3.json("/donate/data/year", function(err, data) {
+		var xscale = d3.scale.ordinal().rangeRoundBands([0, width], .1);
+		xscale.domain(data.map(function(d) { return d.key; }));
+                var yscale = d3.scale.linear().range([height, 0]);
+		yscale.domain([0, d3.max(data, function(d) { return d.value; })]);
+		var key = function(d) { return d.key; };
+
+		var xaxis = d3.svg.axis()
+			.scale(xscale)
+			.orient("bottom");
+		var yaxis = d3.svg.axis()
+			.scale(yscale)
+			.orient("left");
+
+		svg.append("g")
+			.attr("class", "x axis")
+			.attr("transform", "translate(0, " + height + ")")
+			.call(xaxis);
+		svg.append("g")
+			.attr("class", "y axis")
+			.call(yaxis)
+			.append("text")
+			.attr("transform", "rotate(-90)")
+			.attr("y", 6)
+			.attr("dy", ".71em")
+			.style("text-anchor", "end");
+
+		svg.selectAll("rect")
+			.data(data, key)
+			.enter()
+			.append("rect")
+			.attr("class", "bar")
+			.attr("x", function(d) {
+				return xscale(d.key);
+			})
+			.attr("width", xscale.rangeBand())
+			.attr("y", function(d) {
+				return yscale(d.value);
+			})
+			.attr("height", function(d) {
+				return height - yscale(d.value);
+			})
+			.attr("fill", function(d) {
+				return "#00ae18";
+			})
+			.on("mouseover", tip.show)
+			.on("mouseout", tip.hide)
+			
+	});	
+};
+
+function redraw() {
+	width = document.getElementById('yearchart').offsetWidth - 40 -30;
+	height = (width / 2) - 20 - 30;
+	d3.select('#yearchart').select('svg').remove();
+	setup(width, height);
+}
+
+var throttleTimer;
+function throttle() {
+	  window.clearTimeout(throttleTimer);
+	      throttleTimer = window.setTimeout(function() {
+		            redraw();
+			        }, 200);
+}