{% extends "bigbrother/index.html" %}

{% block content %}
<div id="graphcontainer">
	<h1>{{ modulename }}</h1>
	<h2>Last Week</h2>
	<div id="week" class="graph">No Data</div>
	<h2>Last Month</h2>
	<div id="month" class="graph">No Data</div>
	<h2>Last Year</h2>
	<div id="year" class="graph">No Data</div>
</div>
{% endblock %}


{% block extrajs %}
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  	<script src="{{ STATIC_URL }}js/jquery.flot.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.flot.time.js"></script>
	<script type="text/javascript">
	$(function () {
        {% if week %}
		var weekdata = [{% for dt, val in week %}[(new Date("{{ dt.isoformat }}")).getTime(), {{ val|stringformat:"f" }}],{% endfor %}]
        $.plot($("#week"), [weekdata], {
            points: {show:true},
            lines: {show:true},
            yaxis: {min: 0},
            xaxis: {mode: "time",
                min: (new Date("{{ firstdow.isoformat }}")).getTime(),
                max: (new Date("{{ lastdow.isoformat }}")).getTime()
            }
        });
        {% endif %}
        {% if month %}
		var monthdata = [{% for dt, val in month %}[(new Date("{{ dt.isoformat }}")).getTime(), {{ val|stringformat:"f" }}],{% endfor %}]
        $.plot($("#month"), [monthdata], {
            points: {show:true},
            lines: {show:true},
            yaxis: {min: 0},
            xaxis: {mode: "time",
                min: (new Date("{{ firstdom.isoformat }}")).getTime(),
                max: (new Date("{{ lastdom.isoformat }}")).getTime()
            }
        });
        {% endif %}
        {% if year %}
		var yeardata = [{% for dt, val in year %}[(new Date("{{ dt.isoformat }}")).getTime(), {{ val|stringformat:"f" }}],{% endfor %}]
        $.plot($("#year"), [yeardata], {
            points: {show:true},
            lines: {show:true},
            yaxis: {min: 0},
            xaxis: {mode: "time",
                min: (new Date("{{ firstdoy.isoformat }}")).getTime(),
                max: (new Date("{{ lastdoy.isoformat }}")).getTime()
            }
        });
        {% endif %}

	});
	</script>
{% endblock %}