    <header>
        <div class="headline text-center">
            <div class="container mb-5">
                <h1 class="text-primary font-weight-bold">{{ title }}</h1>
                <h3 class="text-secondary">{{ sub_title }} &nbsp; </h3>
            </div>
        </div>
    </header>

    {# bar graphs for day/week/month/year #}
    <div class="container-fluid mt-2 mb-5">
        <div class="row mb-4 text-center">
            <div class="col-sm-12 col-md-3 d-flex justify-content-center mb-4">
                <canvas id="bar-chart-day" width="400" height="250"></canvas>
            </div>
            <div class="col-sm-12 col-md-3 d-flex justify-content-center mb-4">
                <canvas id="bar-chart-week" width="400" height="250"></canvas>
            </div>
            <div class="col-sm-12 col-md-3 d-flex justify-content-center mb-4">
                <canvas id="bar-chart-month" width="400" height="250"></canvas>
            </div>
            <div class="col-sm-12 col-md-3 d-flex justify-content-center mb-4">
                <canvas id="bar-chart-year" width="400" height="250"></canvas>
            </div>
        </div>
    </div>

    {# line graph for year #}
    <div class="container-fluid mt-2 mb-5">
        <div class="row mb-4 text-center">
            <div class="col-sm-12 d-flex justify-content-center mb-4">
                <canvas id="annual_trend" width="800" height="250"></canvas>
            </div>
        </div>

    </div>

    <script>
        {% include 'handyhelpers/report/theme_colors.htm' %}

        {# bar graph for day #}
        var canvasP = document.getElementById("bar-chart-day");
        var ctxP = canvasP.getContext('2d');
        var bar_chart_day = 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.day }},{% endfor %}]
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Day',
                    fontSize: 20,
                    position: "bottom"
                },
                legend: { display: false },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

        canvasP.onclick = function(e) {
            var slice = bar_chart_day.getElementAtEvent(e);
            if (!slice.length) return; // return if not clicked on slice
            var label = slice[0]._model.label;
            switch (label) {
                {% for data in dataset_list %}
                case '{{ data.title }}':
                    location.href = "{{ data.list_view }}?{{ data.dt_field }}__gte={{ last_day|date:'Y-m-d H:i:s' }}&page_description=added in the past day";
                    break;
                {% endfor %}
            }
        }


        {# bar graph for week #}
        var canvasP = document.getElementById("bar-chart-week");
        var ctxP = canvasP.getContext('2d');
        var bar_chart_day = 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.week }},{% endfor %}]
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Week',
                    fontSize: 20,
                    position: "bottom"
                },
                legend: { display: false },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

        canvasP.onclick = function(e) {
            var slice = bar_chart_week.getElementAtEvent(e);
            if (!slice.length) return; // return if not clicked on slice
            var label = slice[0]._model.label;
            switch (label) {
                {% for data in dataset_list %}
                case '{{ data.title }}':
                    location.href = "{{ data.list_view }}?{{ data.dt_field }}__gte={{ last_week|date:'Y-m-d H:i:s' }}&page_description=added in the past week";
                    break;
                {% endfor %}
            }
        }


        {# bar graph for month #}
        var canvasP = document.getElementById("bar-chart-month");
        var ctxP = canvasP.getContext('2d');
        var bar_chart_month = 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.month }},{% endfor %}]
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Month',
                    fontSize: 20,
                    position: "bottom"
                },
                legend: { display: false },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

        canvasP.onclick = function(e) {
            var slice = bar_chart_month.getElementAtEvent(e);
            if (!slice.length) return; // return if not clicked on slice
            var label = slice[0]._model.label;
            switch (label) {
                {% for data in dataset_list %}
                case '{{ data.title }}':
                    location.href = "{{ data.list_view }}?{{ data.dt_field }}__gte={{ last_month|date:'Y-m-d H:i:s' }}&page_description=added in the past month";
                    break;
                {% endfor %}
            }
        }


        {# 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: {
                title: {
                    display: true,
                    text: 'Year',
                    fontSize: 20,
                    position: "bottom"
                },
                legend: { display: false },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

        canvasP.onclick = function(e) {
            var slice = bar_chart_year.getElementAtEvent(e);
            if (!slice.length) return; // return if not clicked on slice
            var label = slice[0]._model.label;
            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 H:i:s' }}&page_description=added in the past year";
                    break;
                {% endfor %}
            }
        }


        {# line graph for annual data #}
        var canvasP = document.getElementById("annual_trend");
        var ctxP = canvasP.getContext('2d');
        var annual_trend_chart = new Chart(ctxP, {
            type: 'line',
            data: {
                labels: {{ month_labels|safe }},
                year:[{% for ts in month_timestamps %} "{{ ts.year }}", {% endfor %}],
                month:[{% for ts in month_timestamps %} "{{ ts.month }}", {% endfor %}],
                datasets: [
                    {% for data in dataset_list %}
                    {
                        data: {{ data.annual }},
                        label: "{{ data.title }}",
                        borderColor: {{ data.color }},
                        fill: true,
                        list_view: "{{ data.list_view }}",
                        dt_field: "{{ data.dt_field }}"
                    },
                    {% endfor %}
                ]
            },
            options: {
                title: {
                    display: true,
                    fontSize: 20,
                    position: "bottom",
                    text: 'trend over the past year'
                },
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                },
                legend: {
                    display: true,
                    position: "bottom"
                }
            }
        });

        canvasP.onclick = function(e) {
            var active_point = annual_trend_chart.getElementAtEvent(e);
            if (active_point[0]) {
                var year = annual_trend_chart.data.year[active_point[0]._index];
                var month = annual_trend_chart.data.month[active_point[0]._index];
                var list_view = annual_trend_chart.data.datasets[active_point[0]._datasetIndex].list_view;
                var dt_field = annual_trend_chart.data.datasets[active_point[0]._datasetIndex].dt_field;
                location.href = list_view+"?"+dt_field+"__year="+year+"&"+dt_field+"__month="+month+"&page_description=added in "+month+"/"+year;
            }
        }
     </script>
