Student starter code (30% baseline)
index.html- Main HTML pagescript.js- JavaScript logicstyles.css- Styling and layoutpackage.json- Dependenciessetup.sh- Setup scriptREADME.md- Instructions (below)💡 Download the ZIP, extract it, and follow the instructions below to get started!
This template demonstrates how to transform raw API data into beautiful, interactive charts using Chart.js. Learn to create various chart types and handle real-time data visualization.
activity-07-charts/
├── index.html # Main dashboard with chart containers
├── styles.css # Chart styling and responsive layout
├── script.js # Chart.js integration and data handling
├── package.json # Dependencies and Chart.js CDN
└── README.md # This documentation
python3 -m http.server 8002http://localhost:8002// Initialize a line chart
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Sales',
data: [12, 19, 3],
borderColor: '#4CAF50',
backgroundColor: 'rgba(76, 175, 80, 0.1)'
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Update chart with new data
function updateChart(chart, newLabels, newData) {
chart.data.labels = newLabels;
chart.data.datasets[0].data = newData;
chart.update();
}
// Transform API response to Chart.js format
function transformWeatherData(apiResponse) {
return {
labels: apiResponse.dates,
datasets: [{
label: 'Temperature',
data: apiResponse.temperatures,
borderColor: '#FF6384'
}]
};
}
Modify the color arrays in the chart configurations:
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']
Customize animations in chart options:
options: {
animation: {
duration: 1000,
easing: 'easeInOutQuart'
}
}
Adjust CSS grid breakpoints:
@media (max-width: 768px) {
.charts-grid {
grid-template-columns: 1fr;
}
}
Replace mock functions with actual API calls:
async function loadRealWeatherData() {
try {
const response = await fetch('https://api.weather.com/data');
const data = await response.json();
return transformWeatherData(data);
} catch (error) {
console.error('API Error:', error);
throw error;
}
}
Implement proper error handling for failed API calls:
try {
const data = await loadApiData();
updateChart(data);
} catch (error) {
showErrorMessage('Failed to load data');
displayFallbackChart();
}
chart.update('none') for animations-free updateschart.destroy()responsive: true in optionschart.update() is calledNext Steps: Practice with Activity 8 (Caching) to learn data persistence patterns that complement visualization workflows.