WMGZON/templates/stats.html

<link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}">
 

<div>
    <canvas id="myChart" width="800px" height="500px"></canvas>
</div>

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

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

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

<div class="product-container">
    {% if data != None %}
        {% for stat in data %}
            <a href="/stats/product/{{stat.productID}}" class="product product-link">
                <div class="product-title">{{stat.userID}}</div>
                <div class="product-content-container">
                    <div class="product-details">
                        <div class="product-price">£{{stat.productID}}</div>
                        <div class="product-description hide-overflow ">{{stat.viewDate}}</div>
                    </div>
                </div>
            </a>
        {% endfor %}
    {% endif %}
</div>