exercisegraphs.html

---
permalink: /exercisegraphs
title:  Exercise Graphs
search_exclude: true
---
<meta charset="UTF-8">
<title>User Exercise Graph</title>
<!-- Chart.js library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
    /* Style the chart container */
    #exerciseChartContainer {
        width: 3000px;
        height: 3000px;
        margin: 20px auto;
    }
</style>

<!-- Chart container -->
<div id="exerciseChartContainer">
    <canvas id="exerciseChart"></canvas>
</div>

<script type="module">

import {javaURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
// Fetch and process exercise data
async function getExerciseData() {
    try {
        const response = await fetch(`${javaURI}/api/person/get`, fetchOptions);
        if (!response.ok) throw new Error('Network response was not ok');

        const data = await response.json();

        // Assuming data is an array of exercise objects with a date and duration property
        const exerciseData = {};
        
        data.forEach(item => {
            const date = item.date; // Replace with actual date field in response
            const duration = item.duration; // Replace with actual duration field

            // Accumulate duration for each date
            if (exerciseData[date]) {
                exerciseData[date] += duration;
            } else {
                exerciseData[date] = duration;
            }
        });

        return exerciseData;

    } catch (error) {
        console.error('Error fetching exercise data:', error);
        return {};
    }
}

// Function to render the bar chart
async function renderExerciseBarGraph() {
    const exerciseData = await getExerciseData();

    // Prepare data for Chart.js
    const dates = Object.keys(exerciseData);
    const durations = Object.values(exerciseData);

    // Create the chart using Chart.js
    const ctx = document.getElementById('exerciseChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: dates,
            datasets: [{
                label: 'Exercise Duration (minutes)',
                data: durations,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Duration (minutes)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Date'
                    }
                }
            }
        }
    });
}

// Call the function to render the chart
renderExerciseBarGraph();
</script>