WMGZON/templates/stats.html

<link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/stats.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/loginform.css') }}">
 
<div class="stats">
    <div>
        <canvas id="myChart" width="800px" height="500px"></canvas>
        <br >
        <form method="GET" action='' id="timeframe_form">
            <div class="input-form-row">
                <input type="radio" class="hidden" id="7days" name='prev_days' value=7>
                <label for="7days">1 Week</label><br>
                <input type="radio" class="hidden" id="14days" name="prev_days" value=14>
                <label for="14days">2 Weeks</label><br>
                <input type="radio" class="hidden" id="1month" name="prev_days" value=31>
                <label for="1month">1 Month</label>
            </div>
        </form>
    </div>
    <div>
        <p><b>Age:</b> {{data['age']}}</p>
        <p><b>Ranking:</b> {{data['ranking']}}</p>
        <p><b>Stock Level:</b> {{data['stocklevel']}}</p>
        <p><b>Total Views:</b> {{data['views']['total']}}</p>
    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const ctx = document.getElementById('myChart');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: {{data['views']['headings']|safe}},
            datasets: [{
                label: '# of Views',
                data: {{data['views']['data']}},
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    title: {
                        display: true,
                        text: "Num Views"
                    },
                    beginAtZero: true
                },
                x: {
                    title: {
                        display: true,
                        text: "Prev Days"
                    },
                }
            }
        }
    });


    // Remove the need for a submit button on the graph buttons
    const form = document.getElementById("timeframe_form");
    const rbs = form.querySelectorAll("input[type='radio']");
    console.log(rbs)
    console.log(form)
    rbs.forEach((input) => {
        input.addEventListener("change", () => {
            form.submit();
        });
    });
</script>