|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| document.addEventListener('DOMContentLoaded', function () {
| |
| const container = document.getElementById('maxPlayerChart');
| |
| console.log("Hello", container)
| |
|
| |
|
| const canvas = document.createElement('canvas');
| |
| canvas.id = 'maxPlayerChartCanvas';
| |
| canvas.width = 600;
| |
| canvas.height = 400;
| |
| container.appendChild(canvas);
| |
|
| |
| const script = document.createElement('script');
| |
| script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
| |
| script.onload = () => {
| |
| const ctx1 = document.getElementById("maxPlayerChartCanvas");
| |
|
| |
| if (!ctx1) return;
| |
|
| |
| const init1 = async () => {
| |
| const response = await fetch("https://goldenage.keii.dev/api/servers/1/statistics/max-player-count");
| |
| const result = await response.json();
| |
| const data = result["data"];
| |
|
| |
| new Chart(ctx1, {
| |
| type: "line",
| |
| data: {
| |
| labels: data.map((row) => new Date(row.Date).toDateString()),
| |
| datasets: [
| |
| {
| |
| label: "Max Player Count",
| |
| data: data.map((row) => row.MaxPlayerCount),
| |
| borderWidth: 1,
| |
| },
| |
| ],
| |
| },
| |
| options: {
| |
| scales: {
| |
| y: {
| |
| beginAtZero: true,
| |
| },
| |
| },
| |
| },
| |
| });
| |
| };
| |
|
| |
| init1();
| |
| };
| |
|
| |
| document.head.appendChild(script);
| |
| });
| |
