<script>
    {# bar graph for year #}
    var canvasP = document.getElementById("bar-chart-year");
    var ctxP = canvasP.getContext('2d');
    var bar_chart_year = new Chart(ctxP, {
        type: 'bar',
        data: {
            labels: [{% for data in dataset_list %}"{{ data.title }}",{% endfor %}],
            datasets: [{
                backgroundColor: [{% for data in dataset_list %}{{ data.color }},{% endfor %}],
                data: [{% for data in dataset_list %}{{ data.year }},{% endfor %}]
            }]
        },
        options: {
            plugins: {
                title: {
                    display: {% if chart_display_title %}true{% else %}false{% endif %},
                    text: 'Year',
                    position: 'bottom',
                    font: {
                        size: 20
                    }
                },
                legend: {
                    display: {% if chart_display_legend %}true{% else %}false{% endif %},
                    position: 'bottom'
                }
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    canvasP.onclick = function(e) {
        var slice = bar_chart_year.getElementsAtEventForMode(e, 'nearest', {intersect: true }, true);
        if (!slice.length) return; // return if not clicked on slice
        var label = bar_chart_year.data.labels[slice[0].index];
        switch (label) {
            {% for data in dataset_list %}
            case '{{ data.title }}':
                location.href = "{{ data.list_view }}?{{ data.dt_field }}__gte={{ last_year|date:'Y-m-d' }}&page_description=added in the past year";
                break;
            {% endfor %}
        }
    }
 </script>
