How to select time on my chart js graph on Django? - django

Question

I'm trying to do a selection on what only will be displayed on my chart, but I don't know what it's called hehe. please help
my views.py look like this.
class ResView(LoginRequiredMixin, ListView):
model = Rainfall
template_name = 'home.html'
context_object_name = 'res'
paginate_by = 8
queryset = Rainfall.objects.all().order_by('-id')
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["qs"] = Rainfall.objects.all()
return context
my chart look like this.
<script>
(function () {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [{% for i in qs %}'{{i.timestamp}}',{% endfor %}],
datasets: [{
label: 'Rainfall Graph',
data: [{% for i in qs %}'{{i.amount}}',{% endfor %}],
lineTension: 0,
backgroundColor: 'transparent',
borderColor: '#c9c5c5',
borderWidth: 2,
pointRadius: 1,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false
}
}
})
}());
Now I want to select what to display on my chart. something like a dropdown like this. That I have an option.
<select>
<option value="hour">Hour</option>
<option value="day">Day</option>
<option value="month">Month</option>
</select>