Implement Charts.js

[PatrickFrankAIU]

• [x] Implement Charts.js (220)
• [x] Style chart on page (210) (see note below)

Home page: https://www.chartjs.org/

Suggestions:

• A pie chart showing individual grades out of a total
• A line or bar chart showing the individual grades as bars or points on the line

Tips:

• Add to head: <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
• Add to body:

<div id="chartContainer">
    <canvas id="gradeChart"></canvas>
</div>

Note: Charts can be styled using #chartContainer from the above example, or by a CSS class. Here are some typical styles:

#chartContainer {
    width: 80%;
    margin: 20px auto;
    text-align: center;
}

The content of the chart is controlled via a function, like this: (Note: This is just sample code that I've updated somewhat blindly -- I wasn't able to get it working after a short effort and it may need some more work!)

function updateChart() {
        const labels = gradeBook.map(student => student.studentName);
        const data = gradeBook.map(student => student.grade);
        const ctx = document.getElementById('gradeChart').getContext('2d');
        if (gradeChart) {
            gradeChart.destroy();
        }
        gradeChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Grades',
                    data: data,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });
    }