    <script>
        {# 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 annual_trend_dataset_list %}
                    {
                        data: {{ data.annual }},
                        label: "{{ data.title }}",
                        borderColor: {{ data.color }},
                        fill: true,
                        list_view: "{{ data.list_view|safe }}",
                        dt_field: "{{ data.dt_field }}",
                        lineTension: 0.4
                    },
                    {% endfor %}
                ]
            },
            options: {
                title: {
                    display: true,
                    fontSize: 20,
                    position: "bottom",
                    text: 'trend over the past year'
                },
                legend: {
                    display: true,
                    position: "bottom"
                }
            }
        });

        canvasP.onclick = function(e) {
            var points = annual_trend_chart.getElementsAtEventForMode(e, 'nearest', {intersect: true }, true);
            if (points[0]) {
                var year = annual_trend_chart.data.year[points[0].index];
                var month = annual_trend_chart.data.month[points[0].index];
                var list_view = annual_trend_chart.data.datasets[points[0].datasetIndex].list_view;
                var dt_field = annual_trend_chart.data.datasets[points[0].datasetIndex].dt_field;
                location.href = list_view+"?"+dt_field+"__year="+year+"&"+dt_field+"__month="+month+"&page_description=added in "+month+"/"+year;
            }
        }
    </script>
