{% extends "generic-report.html" %}
{% load mytags %}
{% block title %}History Report | Bean Counter {% endblock %}
{% block content %}
<div id="content-main">




<div class="stat-block">
<h2>Income &amp; Expenses</h2>
<table id="expense-values" class="data">
    <thead>
        <tr><td class="hide">id</td><td>month</td><td>expenses</td><td>income</td></tr>
    </thead>
    <tbody>
		{% for m in months %}
			<tr><td class="hide">{{m}}</td> <td>{% dictionary_grab expense_list m 0 %}</td> <td>{% dictionary_grab expense_list m 1 %}</td><td>{% dictionary_grab expense_list m 2 %}</td></tr>
		{% endfor %}
</tbody></table>
</div>
<div class="graph"><canvas id="expense" width="500" height="300"></canvas></div>






<script type="text/javascript">

	var historyLabels = [{{history_labels}}];
	var expense = new Layout("line", {"xTicks" : historyLabels,xOriginIsZero:false});
    expense.addDatasetFromTable("expense", $("expense-values"), xcol = 0, ycol = 2);
    expense.addDatasetFromTable("income", $("expense-values"), xcol = 0, ycol = 3);
    expense.evaluate();


    
  
	var expenseGraph = new CanvasRenderer($("expense"), expense,{"shouldFill":false,colorScheme:
	PlotKit.Base.baseDarkPrimaryColors(),"strokeColor":null,"backgroundColor":Color.fromHexString('#e8eef6'),"strokeWidth":4});
    expenseGraph.render();


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