MediaWiki:Common.js: Difference between revisions
Appearance
Dinkelspiel (talk | contribs) No edit summary |
Dinkelspiel (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
document.addEventListener('DOMContentLoaded', function () { | document.addEventListener('DOMContentLoaded', function () { | ||
var container = document.getElementById('maxPlayerChart'); | |||
console.log("Hello", container) | console.log("Hello", container); | ||
var canvas = document.createElement('canvas'); | |||
canvas.id = 'maxPlayerChartCanvas'; | canvas.id = 'maxPlayerChartCanvas'; | ||
canvas.width = 600; | canvas.width = 600; | ||
| Line 9: | Line 9: | ||
container.appendChild(canvas); | container.appendChild(canvas); | ||
var script = document.createElement('script'); | |||
script.src = 'https://cdn.jsdelivr.net/npm/chart.js'; | script.src = 'https://cdn.jsdelivr.net/npm/chart.js'; | ||
if (!ctx1) return; | 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", | label: "Max Player Count", | ||
data: data.map((row) | data: data.map(function (row) { | ||
borderWidth: 1 | return row.MaxPlayerCount; | ||
} | }), | ||
borderWidth: 1 | |||
}] | |||
}, | }, | ||
} | options: { | ||
} | scales: { | ||
y: { | |||
beginAtZero: true | |||
} | |||
} | |||
} | |||
}); | |||
} | |||
}; | }; | ||
xhr.send(); | |||
}; | }; | ||
document.head.appendChild(script); | document.head.appendChild(script); | ||
}); | }); | ||
Revision as of 11:18, 31 July 2025
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);
});