Implemented chart.js
This commit is contained in:
parent
a3af3aea05
commit
141f533af6
4 changed files with 47 additions and 1 deletions
5
app.py
5
app.py
|
|
@ -12,6 +12,9 @@ def get_wishlist():
|
||||||
|
|
||||||
@app.get("/boardgame")
|
@app.get("/boardgame")
|
||||||
def get_boardgame():
|
def get_boardgame():
|
||||||
boardgame_id = request.args.get('id', '')
|
|
||||||
return render_template('boardgame.jinja')
|
return render_template('boardgame.jinja')
|
||||||
|
|
||||||
|
|
||||||
|
@app.get('/statistics')
|
||||||
|
def get_statistics():
|
||||||
|
return render_template('statistics.jinja')
|
||||||
|
|
@ -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() {
|
async function loadGame() {
|
||||||
let params = new URLSearchParams(document.location.search);
|
let params = new URLSearchParams(document.location.search);
|
||||||
let boardgame_id = params.get("id");
|
let boardgame_id = params.get("id");
|
||||||
|
|
|
||||||
|
|
@ -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/jquery/jquery-3.7.1.min.js') }}" defer></script>
|
||||||
<script src="{{ url_for('static', filename='javascript/datatables/datatables.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>
|
<script src="{{ url_for('static', filename='javascript/main.js') }}" defer></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
13
templates/statistics.jinja
Normal file
13
templates/statistics.jinja
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
{% extends "base.jinja" %}
|
||||||
|
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
|
||||||
|
<body onload="loadStatistics()">
|
||||||
|
|
||||||
|
<canvas id="overtimechart"></canvas>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
{% endblock body %}
|
||||||
Loading…
Reference in a new issue