Data Visualization with Chart.js: Tracking Fitness Progress with data in AWS

Fitness tracking apps thrive on their ability to represent data visually. For users, seeing their progress through graphs and charts makes the journey more tangible and motivating. In this article, we’ll dive into how the React fitness tracker app uses Chart.js to create engaging visualizations, including setting up and customizing charts and handling real-time updates from the backend.

Importance of Visual Data in Fitness Tracking

Visualizing fitness data helps users:

1. Understand their performance trends over time.
2. Gain insights into areas for improvement.
3. Stay motivated by seeing tangible progress.

Setting Up Chart.js in the React App

Chart.js is integrated into the app for rendering dynamic bar and pie charts. The configuration resides in the chartConfig.js file, which sets global options for charts.

Global Configuration

Here’s an excerpt from chartConfig.js:

export const chartOptions = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Fitness Progress',
    },
  },
};

export const pieChartColors = [
  "#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF", "#FF9F40"
];        

These options ensure all charts are responsive and styled consistently.

Customizing Charts to Display User Progress

The React app uses two main chart types to visualize progress:

1. Pie Chart: Displays completed workouts by category.
2. Bar Chart: Tracks daily or weekly exercise trends.

Rendering a Pie Chart

The PieChart.js component visualizes the distribution of completed workouts:

import React from "react";
import { Pie } from "react-chartjs-2";

const PieChart = ({ data }) => {
  const chartData = {
    labels: Object.keys(data),
    datasets: [
      {
        label: "Completed Workouts",
        data: Object.values(data),
        backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
        hoverOffset: 4,
      },
    ],
  };

  return <Pie data={chartData} />;
};

export default PieChart;        

Rendering a Bar Chart

The ProgressBarGraph.js component tracks daily workout progress:

import React from "react";
import { Bar } from "react-chartjs-2";

const ProgressBarGraph = ({ labels, progressData }) => {
  const chartData = {
    labels,
    datasets: [
      {
        label: "Workout Progress",
        data: progressData,
        backgroundColor: "rgba(54, 162, 235, 0.5)",
        borderColor: "rgba(54, 162, 235, 1)",
        borderWidth: 1,
      },
    ],
  };

  return <Bar data={chartData} />;
};

export default ProgressBarGraph;        

Injecting Data into Charts

Dynamic data is passed to the components via props. For example, in Home.js:

import React, { useState, useEffect } from "react";
import { fetchUserProgress } from "./api";
import PieChart from "./PieChart";
import ProgressBarGraph from "./ProgressBarGraph";

const Home = () => {
  const [progress, setProgress] = useState(null);

  useEffect(() => {
    const loadProgress = async () => {
      const data = await fetchUserProgress("user123");
      setProgress(data);
    };

    loadProgress();
  }, []);

  return (
    <div>
      <h2>Fitness Progress</h2>
      {progress && (
        <>
          <PieChart data={progress.completedWorkouts} />
          <ProgressBarGraph
            labels={Object.keys(progress.dailyProgress)}
            progressData={Object.values(progress.dailyProgress)}
          />
        </>
      )}
    </div>
  );
};

export default Home;
        

Handling Real-Time Updates from the Server

To ensure charts remain up-to-date:

1. Backend Integration: The app fetches real-time progress using Axios (api.js).
2. Automatic Refresh: The useEffect hook in Home.js periodically reloads progress data.
3. Dynamic Updates: Props passed to chart components are updated whenever new data is fetched.

Visuals

Pie Chart: Workout Distribution

The pie chart displays the percentage of completed workouts for different exercise categories.

Output:

Bar Chart: Daily Progress

The bar chart tracks the number of workouts completed each day.

Output:

Chart.js empowers the fitness tracker app to visualize data engagingly and insightfully. With dynamic pie and bar charts, users can easily track their progress and stay motivated. By integrating real-time updates from the backend, the app ensures that data visualizations are always accurate and up-to-date.