|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| document.addEventListener('DOMContentLoaded', function () {
| |
| var container = document.getElementById('maxPlayerChart');
| |
| console.log("Hello", container);
| |
|
| |
|
| var canvas = document.createElement('canvas');
| |
| canvas.id = 'maxPlayerChartCanvas';
| |
| canvas.width = 600;
| |
| canvas.height = 400;
| |
| container.appendChild(canvas);
| |
|
| |
| var script = document.createElement('script');
| |
| script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
| |
|
| |
| script.onload = function () {
| |
| var ctx1 = document.getElementById("maxPlayerChartCanvas");
| |
| if (!ctx1) return;
| |
|
| |
| // Use XMLHttpRequest instead of fetch
| |
| var xhr = new XMLHttpRequest();
| |
| xhr.open("GET", "https://goldenage.keii.dev/api/servers/1/statistics/max-player-count", true);
| |
| xhr.onreadystatechange = function () {
| |
| if (xhr.readyState === 4 && xhr.status === 200) {
| |
| var result = JSON.parse(xhr.responseText);
| |
| var data = result["data"];
| |
|
| |
| new Chart(ctx1, {
| |
| type: "line",
| |
| data: {
| |
| labels: data.map(function (row) {
| |
| return new Date(row.Date).toDateString();
| |
| }),
| |
| datasets: [{
| |
| label: "Max Player Count",
| |
| data: data.map(function (row) {
| |
| return row.MaxPlayerCount;
| |
| }),
| |
| borderWidth: 1
| |
| }]
| |
| },
| |
| options: {
| |
| scales: {
| |
| y: {
| |
| beginAtZero: true
| |
| }
| |
| }
| |
| }
| |
| });
| |
| }
| |
| };
| |
| xhr.send();
| |
| };
| |
|
| |
| document.head.appendChild(script);
| |
| });
| |
