| document.addEventListener('DOMContentLoaded', function() { |
| |
| initGenderChart(); |
| initAgeChart(); |
| }); |
|
|
| function initGenderChart() { |
| const ctx = document.getElementById('genderChart').getContext('2d'); |
| const genderChart = new Chart(ctx, { |
| type: 'bar', |
| data: { |
| labels: ['Program A', 'Program B'], |
| datasets: [ |
| { |
| label: 'Male', |
| data: [4215, 2517], |
| backgroundColor: '#3b82f6', |
| borderRadius: 4 |
| }, |
| { |
| label: 'Female', |
| data: [3627, 2099], |
| backgroundColor: '#10b981', |
| borderRadius: 4 |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| x: { |
| stacked: false, |
| grid: { |
| display: false |
| } |
| }, |
| y: { |
| stacked: false, |
| beginAtZero: true, |
| grid: { |
| drawBorder: false |
| } |
| } |
| }, |
| plugins: { |
| legend: { |
| position: 'top', |
| }, |
| tooltip: { |
| mode: 'index', |
| intersect: false, |
| } |
| } |
| } |
| }); |
| } |
|
|
| function initAgeChart() { |
| const ctx = document.getElementById('ageChart').getContext('2d'); |
| const ageChart = new Chart(ctx, { |
| type: 'line', |
| data: { |
| labels: ['0-9', '10-19', '20-29', '30-39', '40-49', '50-59', '60+'], |
| datasets: [{ |
| label: 'Population by Age', |
| data: [1200, 1900, 3000, 2500, 1800, 1200, 858], |
| fill: true, |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', |
| borderColor: '#3b82f6', |
| tension: 0.3, |
| pointBackgroundColor: '#3b82f6', |
| pointBorderColor: '#fff', |
| pointHoverRadius: 5, |
| pointHoverBackgroundColor: '#3b82f6', |
| pointHoverBorderColor: '#fff', |
| pointHitRadius: 10, |
| pointBorderWidth: 2 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| drawBorder: false |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| }, |
| plugins: { |
| legend: { |
| display: false |
| } |
| } |
| } |
| }); |
| } |
|
|
| |
| window.addEventListener('resize', function() { |
| |
| }); |
