Added boardgame playercount vote chart

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);
+
 }

templates/boardgame.jinja

@@ -3,7 +3,7 @@
 {% block body_block %}
 
      <div class="row">
-        <div class="col-sm-2">
+        <div class="col-sm-4">
             <div class="card">
                 <img id="boardgame_image">
                 <div class="card-body">
@@ -13,8 +13,11 @@
                 </div>
             </div>
         </div>
-        <div class="col-sm-10"><p id="boardgame_weight"></p></div>
+        <div class="col-sm-4"><p id="boardgame_weight"></p></div>
-    </div> 
+        <div class="col-sm-4">
+            <canvas id="playercount_votes_chart"></canvas>
+        </div>
+    </div>
 
 {% endblock body_block %}