$(document).ready(function () {
    $.getJSON("../../data/chat_stat_monthly.json", function (datas) {
        updated = datas['updated']

        labels = datas['labels'];

        graphDisplay($('#byChannel'), datas['messagesByChannel'], "Nombre de message par canaux sur 1 an (" + updated + ")");
        
        graphDisplay($('#byTsunamy'), datas['messagesByTsunamy'], "Nombre de message par Tsunami sur 1 an (" + updated + ")");

        graphDisplay($("#usersByChannel"), datas['usersByChannel'], "Nombre d'utilisateur actifs par canaux sur 1 an (" + updated + ")");

        graphDisplay($("#usersGlobal"), datas['usersGlobal'], "Nombre d'utilisateur actifs sur 1 an (" + updated + ")");
    });
    $.getJSON("../../data/chat_stat_daily.json", function (datas) {
        updated = datas['updated']

        labels = datas['labels'];

        graphDisplay($('#byChannel_daily'), datas['messagesByChannel'], "Nombre de message par canaux sur 30 jours (" + updated + ")");
        
        graphDisplay($('#byTsunamy_daily'), datas['messagesByTsunamy'], "Nombre de message par Tsunami sur 30 jours (" + updated + ")");

        graphDisplay($("#usersByChannel_daily"), datas['usersByChannel'], "Nombre d'utilisateur actifs par canaux sur 30 jours (" + updated + ")");

        graphDisplay($("#usersGlobal_daily"), datas['usersGlobal'], "Nombre d'utilisateur actifs sur 30 jours (" + updated + ")");
    });
});

function graphDisplay(ctx, datas, title) {
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',

        // The data for our dataset
        data: {
            labels: labels,
            datasets: datas,
        },

        // Configuration options go here
        options: {
            legend: {
                display: false
            },
            title: {
                display: true,
                text: title,
                position: "top"
            },
            responsive: true,
            scales: {
                xAxes: [{
                    stacked: true
                }],
                yAxes: [{
                    stacked: true,
                    ticks: {
                        stepSize: 500
                    }
                }]
            }
        }
    });
}