{{template "header.html" .S}}

<script src="/js/Chart.min.js"></script>

<div class="row">
	<div id="visits" class="span6">
	    <h2>Visits</h2>
		<h4>Hourly:</h4>
		<canvas id="hvisits" height="400" width="500"></canvas>
		<h4>Daily:</h4>
		<canvas id="dvisits" height="400" width="500"></canvas>
		<h4>Monthly:</h4>
		<canvas id="mvisits" height="400" width="500"></canvas>
	</div>
	<div id="downloads" class="span6">
	    <h2>Downloads</h2>
		<h4>Hourly:</h4>
		<canvas id="hdownloads" height="400" width="500"></canvas>
		<h4>Daily:</h4>
		<canvas id="ddownloads" height="400" width="500"></canvas>
		<h4>Monthly:</h4>
		<canvas id="mdownlodas" height="400" width="500"></canvas>
	</div>
</div>

<script type="text/javascript">
	function chart(id, labels, counts) {
		var data = {
			labels : labels,
			datasets : [
				{
					fillColor : "rgba(151,187,205,0.5)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					data : counts
				}
			]
		}

		var ctx = $(id).get(0).getContext("2d");
		new Chart(ctx).Line(data);
	}

	$(document).ready(function() {
		chart("#hvisits", [{{range .HVisits}}"{{.Label}}",{{end}}],
			[{{range .HVisits}}{{.Count}},{{end}}])
		chart("#dvisits", [{{range .DVisits}}"{{.Label}}",{{end}}],
			[{{range .DVisits}}{{.Count}},{{end}}])
		chart("#mvisits", [{{range .MVisits}}"{{.Label}}",{{end}}],
			[{{range .MVisits}}{{.Count}},{{end}}])

		chart("#hdownloads", [{{range .HDownloads}}"{{.Label}}",{{end}}],
			[{{range .HDownloads}}{{.Count}},{{end}}])
		chart("#ddownloads", [{{range .DDownloads}}"{{.Label}}",{{end}}],
			[{{range .DDownloads}}{{.Count}},{{end}}])
		chart("#mdownlodas", [{{range .MDownloads}}"{{.Label}}",{{end}}],
			[{{range .MDownloads}}{{.Count}},{{end}}])
	})
</script>

{{template "footer.html"}}