<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>