Für ein einfaches Balkendiagramm brauchst du keine Frameworks, nur eine Bibliothek und deinen JSON-Endpunkt aus Kapitel 14:
html
<canvas id="umsatzChart" height="120"></canvas>
<script src="{{ url_for('static', path='chart.umd.min.js') }}"></script>
<script>
fetch('/api/umsatz-pro-stadt')
.then(r => r.json())
.then(daten => {
new Chart(document.getElementById('umsatzChart'), {
type: 'bar',
data: {
labels: daten.map(d => d.stadt),
datasets: [{ label: 'Umsatz in Euro', data: daten.map(d => Number(d.umsatz)) }],
},
});
});
</script>
Die Datei chart.umd.min.js lädst du von https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js in den Ordner static. fetch ist die eingebaute JavaScript-Funktion zum Abrufen von Daten.