{% extends "generic-report.html" %}
{% block title %}Income vs. Cost Report | Bean Counter {% endblock %}
{% block content %}
<div id="content-main">
<form action="./" method="get">
	Month/Year: <select name="month">
		{{ monthOptions }}
	</select>/<select name="year">
		{{ yearOptions }}</select> 
	<input type="submit" value="Generate Report" />
</form>
<br />
<div class="stat-block">
<h2>Income Vs. Costs</h2>
<table id="incomevscost-values" class="data">
    <thead>
        <tr><td class="hide">id</td><td>category</td><td>income</td><td>cost</td><td>net</td></tr>
    </thead>
    <tbody>
	{% for cogs in cogsList %}
		<tr><td class="hide">{{cogs.0}}</td><td>{{cogs.1.name}}</td><td>{{cogs.2|floatformat:"2"}}</td><td>{{cogs.3|floatformat:"2"}}</td><td>{{cogs.4|floatformat:"2"}}</td></tr>
	{% endfor %}
</tbody></table>
</div>
<div class="graph"><canvas id="incomevscost" width="500" height="300"></canvas></div>






<script type="text/javascript">
	
	var incomevscostLabels = [{{ cogsLabels }}]
    var incomevscost = new Layout("bar", {"xTicks" : incomevscostLabels});
incomevscost.addDatasetFromTable("dataset1", $("incomevscost-values"), xcol = 0, ycol = 2);
    incomevscost.addDatasetFromTable("dataset2", $("incomevscost-values"), xcol = 0, ycol = 3);
    incomevscost.evaluate();

	var incomevscostGraph = new SweetCanvasRenderer($("incomevscost"), incomevscost);
    incomevscostGraph.render();

</script>
</div>
{% endblock %}