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') }}">
 
<div class="stats">
    <div>
        <canvas id="myChart" width="800px" height="500px"></canvas>
        <br >
        <form method="GET">
            <input type="radio" id="7days" name="prev_days" value=7>
            <label for="7days">7 Days</label><br>
            <input type="radio" id="31days" name="prev_days" value=31>
            <label for="31days">31 Days</label><br>
            <input type="radio" id="1year" name="prev_days" value=365>
            <label for="1year">1 Year</label>
            <input type="submit">
        </form>
    </div>
    <div>
        <p>Age: {{data['age']}}</p>
        <p>Ranking: {{data['ranking']}}</p>
        <p>Stock Level: {{data['stocklevel']}}</p>
        <p>Total Views: {{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"
                    },
                }
            }
        }
    });
</script>