{% extends 'base/layout.html' %}

{% block title %}{{ exercise.name }} Progress{% endblock %}

{% block content %}
<div class="container">
	<div class="columns is-centered">
		<div class="column">
			<div class="box">
				<canvas id="exercise_chart"></canvas>
			</div>
		</div>
	</div>
</div>

<script>
	new Chart(document.getElementById('exercise_chart'), {
		type: 'line',
		data: {
			cubicInterpolationMode: 'monotone',
			tension: 0.4,
			pointStyle: 'circle',
			pointRadius: 5,
			pointHoverRadius: 10,
		},
		option: {
			scales: {
				y: {
					beginAtZero: true
				}
			}
		}
	});
</script>

{% endblock %}