File size: 3,360 Bytes
085cdbc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
document.addEventListener('DOMContentLoaded', () => {
// Sample unemployment data (in a real app, this would come from an API)
const unemploymentData = {
'WLD': [6.23, 6.07, 6.00, 6.01, 5.87, 5.70, 5.54, 6.90, 6.20], // World 2013-2021
'USA': [6.99, 5.96, 4.87, 4.36, 3.90, 3.67, 8.05, 5.35], // USA 2014-2021
'CHN': [4.73, 4.47, 4.31, 4.56, 4.55, 5.00, 4.55], // China 2015-2021
'IND': [5.44, 5.42, 5.36, 5.27, 5.36, 10.19, 7.71], // India 2015-2021
'EUU': [10.84, 9.10, 8.12, 7.25, 6.68, 7.05, 7.00], // EU 2015-2021
'JPN': [3.39, 2.81, 2.47, 2.35, 2.80, 2.80], // Japan 2016-2021
'GBR': [4.81, 4.33, 4.00, 3.74, 4.47, 4.83], // UK 2016-2021
'DEU': [4.12, 3.75, 3.38, 3.14, 3.86, 3.57], // Germany 2016-2021
'FRA': [10.05, 9.41, 9.02, 8.41, 8.01, 7.86], // France 2016-2021
'ITA': [11.69, 11.21, 10.61, 9.95, 9.16, 9.50] // Italy 2016-2021
};
const years = Array.from({length: 9}, (_, i) => 2013 + i); // 2013-2021
// Initialize chart
const ctx = document.getElementById('unemploymentChart').getContext('2d');
let chart = new Chart(ctx, {
type: 'line',
data: {
labels: years,
datasets: [{
label: 'Unemployment Rate (%)',
data: unemploymentData['WLD'],
borderColor: '#4f46e5',
backgroundColor: 'rgba(79, 70, 229, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.3
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
tooltip: {
mode: 'index',
intersect: false,
}
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Unemployment Rate (%)'
}
},
x: {
title: {
display: true,
text: 'Year'
}
}
}
}
});
// Update chart when selection changes
document.getElementById('updateBtn').addEventListener('click', () => {
const country = document.getElementById('countrySelect').value;
const startYear = parseInt(document.getElementById('startYear').value);
const endYear = parseInt(document.getElementById('endYear').value);
// Filter data based on year range
const filteredYears = years.filter(year => year >= startYear && year <= endYear);
const startIndex = years.indexOf(filteredYears[0]);
const endIndex = years.indexOf(filteredYears[filteredYears.length - 1]);
const filteredData = unemploymentData[country].slice(startIndex, endIndex + 1);
// Update chart
chart.data.labels = filteredYears;
chart.data.datasets[0].data = filteredData;
chart.data.datasets[0].label = `${document.getElementById('countrySelect').selectedOptions[0].text} Unemployment (%)`;
chart.update();
});
// Initial chart update
document.getElementById('updateBtn').click();
}); |