<h1 class="page-header">Overview</h1>

<div class="row placeholders">
    <H1>Last 24 hours (kWh/5min)</H1>
    <div id="min-power-chart" style="height:450px;"></div>
</div>
<div class="row placeholders">
    <H1>Last Week (kWh/h)</H1>
    <div id="hour-power-chart" style="height:450px;"></div>
</div>
<div class="row placeholders">
    <H1>All History (kWh/day)</H1>
    <div id="day-power-chart" style="height:450px;"></div>
</div>


<script src="js/raphael-min.js"></script>
<script src="js/morris.min.js"></script>

<script>
    $(function(){
		chartData("min-power-chart", 
				[
				{ y: (Date.now()-24*60*60*1000) },
				{{#minData}}  
					{ y: {{.timestamp}}, {{.username}}: {{.data}} },
				{{/minData}}
				{ y: Date.now() }
				]
		);
		chartData("hour-power-chart", 
				[
				{ y: (Date.now()-7*24*60*60*1000) },
				{{#hourData}}  
					{ y: {{.timestamp}}, {{.username}}: {{.data}} },  
				{{/hourData}}
				{ y: Date.now() }
				]
		);
		chartData("day-power-chart", 
				[{{#dayData}}  
					{ y: {{.timestamp}}, {{.username}}: {{.data}} },
				{{/dayData}}
				{ y: Date.now() }
				]
		);
	});
    var userArray = [ {{#username}} '{{.}}', {{/username}} ];
    function chartData(elementId, data){
        Morris.Line({
              element: elementId,
              data: data,
              xkey: 'y',
              ykeys: userArray,
              labels: userArray,
              continuousLine: false,
              pointSize: 1,
              postUnits: 'kWh',
              resize: true
            });
    }
</script>

