<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>        
    </head>
    <body>
        Statistiques du <a href="https://coa.crapaud-fou.org">chat</a> (aussi connu sous le nom de mare aux crapauds) :
        <canvas id="byChannel"></canvas>
        <canvas id="byTsunamy"></canvas>
        <canvas id="usersByChannel"></canvas>
        <canvas id="usersGlobal"></canvas>
        <script>
        
        $.getJSON("../../data/channelsstat.json", function (datas){
            updated = datas['updated']
        
            labels = datas['labels'];
        
            var ctx = $('#byChannel');
            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['messagesByChannel'],
                },
        
                // Configuration options go here
                options: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: "Nombre de message par canaux (" + updated + ")",
                        position: "top"
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true
                        }],
                        yAxes: [{
                            stacked: true,
                            ticks: {
                                stepSize: 500
                            }
                        }]
                    }
                }
            });
        
            var ctx2 = $("#byTsunamy");
            var chart2 = new Chart(ctx2, {
                // The type of chart we want to create
                type: 'bar',
        
                // The data for our dataset
                data: {
                    labels: labels,
                    datasets: datas['messagesByTsunamy'],
                },
        
                // Configuration options go here
                options: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: "Nombre de message par Tsunami (" + updated + ")",
                        position: "top"
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true
                        }],
                        yAxes: [{
                            stacked: true,
                            ticks: {
                                stepSize: 500
                            }
                        }]
                    }
                }
            });
        
            var ctx3 = $("#usersByChannel");
            var chart3 = new Chart(ctx3, {
                // The type of chart we want to create
                type: 'bar',
        
                // The data for our dataset
                data: {
                    labels: labels,
                    datasets: datas['usersByChannel'],
                },
        
                // Configuration options go here
                options: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: "Nombre d'utilisateur actifs par canaux (" + updated + ")",
                        position: "top"
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true
                        }],
                        yAxes: [{
                            stacked: true,
                            ticks: {
                                stepSize: 50
                            }
                        }]
                    }
                }
            });
        
            var ctx4 = $("#usersGlobal");
            var chart4 = new Chart(ctx4, {
                // The type of chart we want to create
                type: 'bar',
        
                // The data for our dataset
                data: {
                    labels: labels,
                    datasets: datas['usersGlobal'],
                },
        
                // Configuration options go here
                options: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: "Nombre d'utilisateur actifs (" + updated + ")",
                        position: "top"
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true
                        }],
                        yAxes: [{
                            stacked: true,
                            ticks: {
                                stepSize: 50
                            }
                        }]
                    }
                }
            });
        });
        </script>
    </body>
</html>