Implemented chart.js

This commit is contained in:
Yarne Coppens 2024-08-11 23:04:30 +02:00
parent a3af3aea05
commit 141f533af6
4 changed files with 47 additions and 1 deletions

5
app.py
View file

@ -12,6 +12,9 @@ def get_wishlist():
@app.get("/boardgame")
def get_boardgame():
boardgame_id = request.args.get('id', '')
return render_template('boardgame.jinja')
@app.get('/statistics')
def get_statistics():
return render_template('statistics.jinja')

View file

@ -136,6 +136,35 @@ async function loadOwnedGames() {
}
async function loadStatistics(){
const overtimechart = document.getElementById("overtimechart")
games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time')
console.log(games_over_time_statistic)
console.log(Object.keys(games_over_time_statistic.result))
console.log(Object.values(games_over_time_statistic.result))
new Chart(overtimechart, {
type: 'bar',
data: {
labels: Object.keys(games_over_time_statistic.result),//['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Games',
data: Object.values(games_over_time_statistic.result),
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
async function loadGame() {
let params = new URLSearchParams(document.location.search);
let boardgame_id = params.get("id");

View file

@ -13,6 +13,7 @@
<script src="{{ url_for('static', filename='javascript/jquery/jquery-3.7.1.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='javascript/datatables/datatables.min.js') }}" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ url_for('static', filename='javascript/main.js') }}" defer></script>
</head>

View file

@ -0,0 +1,13 @@
{% extends "base.jinja" %}
{% block body %}
<body onload="loadStatistics()">
<canvas id="overtimechart"></canvas>
</body>
{% endblock body %}