exercisegraphs.html

---
permalink: /exercisegraph
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>
    // Get user ID from Local Storage
    const userIDFromLocalStorage = localStorage.getItem('loggedInUserId'); 
    console.log(userIDFromLocalStorage)
    // Fetch exercise data for the specific user from the server API
    fetch(`https://well.stu.nighthawkcodingsociety.com/api/users/${userIDFromLocalStorage}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(userData => {
            // Log the fetched data to the console for inspection
            console.log('Fetched User Data:', userData);

            // Extract exercise data from the user's exercise array
            const exerciseData = userData.exercise || [];

            // Create an object to store total duration for each day
            const totalDurationByDay = {};

            // Iterate over exercise data to calculate total duration for each day
            for (let i = 0; i < exerciseData.length; i++) {
                const exercise = exerciseData[i];
                const date = exercise.exerciseDate;
                const duration = parseInt(exercise.duration) || 0; // Parse duration to an integer, default to 0 if not provided

                // Check if entry for this date already exists
                if (totalDurationByDay[date]) {
                    // Add duration to existing total for this date
                    totalDurationByDay[date] += duration;
                } else {
                    // Initialize total duration for this date
                    totalDurationByDay[date] = duration;
                }
            }

            // Sort the total duration by day
            const sortedTotalDurationByDay = Object.entries(totalDurationByDay).sort((a, b) => a[0].localeCompare(b[0]));

            // Extract dates and durations from sorted total duration by day
            const exerciseDates = sortedTotalDurationByDay.map(([date, _]) => date);
            const exerciseDurations = sortedTotalDurationByDay.map(([_, duration]) => duration);

            // Create the chart using Chart.js
            const ctx = document.getElementById('exerciseChart').getContext('2d');
            const exerciseChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: exerciseDates,
                    datasets: [{
                        label: 'Total Exercise Duration',
                        data: exerciseDurations,
                        backgroundColor: 'rgba(54, 162, 235, 0.5)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: false, // Ensure responsiveness is turned off
                    maintainAspectRatio: false, // Avoid maintaining aspect ratio
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Total Duration (minutes)'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Date'
                            }
                        }
                    }
                }
            });
        })
        .catch(error => {
            console.error('Error fetching data:', error);
            // Handle error if the request fails
        });
</script>