56 lines
1.6 KiB
HTML
56 lines
1.6 KiB
HTML
<div class="card mt-6">
|
|
<h2 class="pitt-primary font-bold text-2xl mb-4">📈 ELO Rating History</h2>
|
|
<canvas id="ratingChart"></canvas>
|
|
</div>
|
|
|
|
<script>
|
|
const chartData = {
|
|
labels: {{ labels | json }},
|
|
datasets: [
|
|
{
|
|
label: 'ELO Rating',
|
|
data: {{ data | json }},
|
|
borderColor: '#003594',
|
|
backgroundColor: 'rgba(0, 53, 148, 0.1)',
|
|
borderWidth: 3,
|
|
fill: true,
|
|
tension: 0.4,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: '#FFB81C',
|
|
pointBorderColor: '#003594',
|
|
pointBorderWidth: 2,
|
|
}
|
|
]
|
|
};
|
|
|
|
const ctx = document.getElementById('ratingChart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: chartData,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
labels: {
|
|
font: { size: 14 },
|
|
color: '#003594'
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: false,
|
|
grid: { color: 'rgba(0, 53, 148, 0.1)' },
|
|
ticks: { color: '#003594' }
|
|
},
|
|
x: {
|
|
grid: { color: 'rgba(0, 53, 148, 0.05)' },
|
|
ticks: { color: '#003594' }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|