{% if is_graph_empty %}
    <div class="graph-notification">There isn't any class activity for this date.</div>
{% endif %}

<script>
    var chart;
    $(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'highchart',
                defaultSeriesType: 'column'
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                column: {
                },
                series: {
                    showInLegend: false,
                    stacking: 'normal',
                    point: {
                        events: {
                            click: function() {
                            }
                        }
                    }
            }
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: [
                {% for data in student_data %}
                '{{ data|hash:"name"|escapejs }}<br/>(<em>{{ data|hash:"total_minutes"|escapejs }} min. total</em>)'{% if not forloop.last %},{% endif %}
                {% endfor %}
                ],
                labels: {
                    align: 'left',
                    x: -5,
                    y: 10,
                    rotation: 45
                }
            },
            yAxis: {
                title: {
                    text: 'Time Spent (Minutes)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                    return this.point.desc;
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [
                    {% for row in classtime_table.rows reversed %}
                    { 
                       data: [
                        {% for chunk in row.chunks %}
                        {
                            x: {{ forloop.counter0 }}, 
                            {% if chunk %}
                                y: {{ chunk.minutes_spent }},
                            {% else %}
                                y: 0,
                            {% endif %}
                            desc: '{{ chunk.description|escapejs }}',
                            {% if chunk %}
                            color: {% if chunk.during_schoolday %}'#ADD8E6'{% else %}'#00008B'{% endif %}
                            {% endif %}
                        }{% if not forloop.last %},{% endif %}
                        {% endfor %}
                        ]
                    }{% if not forloop.last %},{% endif %}
                    {% endfor %}
                ]
        });
    });
</script>

<div id="highchart-container" class="x-scrollable {% if is_graph_empty %}empty-chart{% endif %}">
    <div id="highchart" style="min-width:{{ width }}px;"></div>
</div>