boardgame_site_v2/static/javascript/boardgame.js

document.body.onload=loadGame()

async function loadGame() {
    let params = new URLSearchParams(document.location.search);
    let boardgame_id = params.get("id");

    var loadGameURL = api_url + '/boardgame?id=' + boardgame_id
    var requested_game = await makeRequest(loadGameURL)
    
    $('#boardgame_image').attr('src', requested_game.image_url)

    $('#boardgame_name').text(requested_game.name)

    $('#boardgame_weight').text(requested_game.weight)

    $('#boardgame_description').text(requested_game.description)

    $('#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);

}