( function ( $ ) {
    "use strict";

    //line chart
    var ctx = document.getElementById( "lineChart" );
    var analysis = $(ctx).data('analysis');
    var students_present = [];
    var students_absent = [];
    var averag = [];

    for(var key in analysis.dates_reported) {
        var rptdate = analysis.dates_reported[key];
        students_present.push(analysis[rptdate].students_present);
        students_absent.push(analysis[rptdate].students_absent);
        averag.push(analysis[rptdate].average);
    }
    ctx.height = 150;
    var myChart = new Chart( ctx, {
        type: 'line',
        data: {
            labels: analysis.dates_reported,
            datasets: [
                {
                    label: "Average",
                    borderColor: "rgba(0,0,0,.09)",
                    borderWidth: "1",
                    backgroundColor: "rgba(0,0,0,.07)",
                    data: averag
                            },
                {
                    label: "Students Absent",
                    borderColor: "rgba(220, 53, 69, 0.7)",
                    borderWidth: "1",
                    backgroundColor: "rgba(220, 53, 69, 0.4)",
                    pointHighlightStroke: "rgba(220, 53, 69, 1)",
                    data: students_absent
                            },
                {
                    label: "Students Present",
                    borderColor: "rgba(0, 123, 255, 0.9)",
                    borderWidth: "1",
                    backgroundColor: "rgba(0, 123, 255, 0.5)",
                    pointHighlightStroke: "rgba(26,179,148,1)",
                    data: students_present
                            }
                        ]
        },
        options: {
            responsive: true,
            tooltips: {
                mode: 'index',
                intersect: false
            },
            hover: {
                mode: 'nearest',
                intersect: true
            }

        }
    } );

} )( jQuery );