diff --git a/static/javascript/boardgame.js b/static/javascript/boardgame.js index adc7c03..02a0a75 100644 --- a/static/javascript/boardgame.js +++ b/static/javascript/boardgame.js @@ -17,4 +17,63 @@ async function loadGame() { $('#boardgame_link').attr('href', 'https://boardgamegeek.com/boardgame/' + boardgame_id) + const playercount_votes_chart = $('#playercount_votes_chart') + + const playercountVotes = requested_game.playercount_votes + + const labels = playercountVotes.map(vote => vote.playercount); + const bestData = playercountVotes.map(vote => vote.best); + const recommendedData = playercountVotes.map(vote => vote.recommended); + const notRecommendedData = playercountVotes.map(vote => vote.not_recommended); + + const data = { + labels: labels, + datasets: [ + { + label: 'Not Recommended', + data: notRecommendedData, + backgroundColor: 'rgba(255, 99, 132, 0.6)', + }, + { + label: 'Recommended', + data: recommendedData, + backgroundColor: 'rgba(75, 192, 192, 0.6)', + }, + { + label: 'Best', + data: bestData, + backgroundColor: 'rgba(50, 205, 50, 0.6)', + }, + ], + }; + + const config = { + type: 'bar', + data: data, + options: { + responsive: true, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Player Count Votes' + } + }, + scales: { + x: { + stacked: true, + }, + y: { + stacked: true, + } + } + }, + }; + + console.log(labels) + + new Chart(playercount_votes_chart, config); + } \ No newline at end of file diff --git a/templates/boardgame.jinja b/templates/boardgame.jinja index 68d9509..25c5875 100644 --- a/templates/boardgame.jinja +++ b/templates/boardgame.jinja @@ -3,7 +3,7 @@ {% block body_block %}
-
+
@@ -13,8 +13,11 @@
-

-
+

+
+ +
+
{% endblock body_block %}