YeahBoy70/payment-patterns-visualizer
0
1document.addEventListener('DOMContentLoaded', function() {2 // Timeline Chart3 const timelineCtx = document.getElementById('timelineChart').getContext('2d');4 const timelineChart = new Chart(timelineCtx, {5 type: 'line',6 data: {7 labels: ['2019', '2020', '2021', '2022', '2023', '2024', '2025'],8 datasets: [9 {10 label: 'Aramis',11 data: [12, 25, 42, 60, 66, 66, 66],12 borderColor: '#6366F1',13 backgroundColor: 'rgba(99, 102, 241, 0.1)',14 tension: 0.3,15 fill: true16 },17 {18 label: 'Capri',19 data: [12, 33, 56, 75, 96, 111, 128],20 borderColor: '#8B5CF6',21 backgroundColor: 'rgba(139, 92, 246, 0.1)',22 tension: 0.3,23 fill: true24 },25 {26 label: 'Sienna',27 data: [12, 29, 52, 71, 92, 107, 124],28 borderColor: '#EC4899',29 backgroundColor: 'rgba(236, 72, 153, 0.1)',30 tension: 0.3,31 fill: true32 }33 ]34 },35 options: {36 responsive: true,37 maintainAspectRatio: false,38 plugins: {39 legend: {40 position: 'top',41 },42 tooltip: {43 mode: 'index',44 intersect: false,45 }46 },47 scales: {48 y: {49 beginAtZero: true,50 title: {51 display: true,52 text: 'Total Payments ($)'53 }54 },55 x: {56 title: {57 display: true,58 text: 'Year'59 }60 }61 }62 }63 });64 65 // Distribution Chart66 const distributionCtx = document.getElementById('distributionChart').getContext('2d');67 const distributionChart = new Chart(distributionCtx, {68 type: 'doughnut',69 data: {70 labels: ['$4-6', '$7-9', '$10-12', '$13-15'],71 datasets: [{72 data: [12, 18, 3, 2],73 backgroundColor: [74 '#6366F1',75 '#8B5CF6',76 '#EC4899',77 '#F59E0B'78 ],79 borderWidth: 180 }]81 },82 options: {83 responsive: true,84 maintainAspectRatio: false,85 plugins: {86 legend: {87 position: 'right',88 },89 title: {90 display: true,91 text: 'Payment Amount Distribution'92 }93 }94 }95 });96 97 // Frequency Chart98 const frequencyCtx = document.getElementById('frequencyChart').getContext('2d');99 const frequencyChart = new Chart(frequencyCtx, {100 type: 'bar',101 data: {102 labels: ['Aramis', 'Capri', 'Sienna'],103 datasets: [{104 label: 'Payments per Year',105 data: [2.6, 3.5, 3.5],106 backgroundColor: [107 'rgba(99, 102, 241, 0.7)',108 'rgba(139, 92, 246, 0.7)',109 'rgba(236, 72, 153, 0.7)'110 ],111 borderColor: [112 'rgba(99, 102, 241, 1)',113 'rgba(139, 92, 246, 1)',114 'rgba(236, 72, 153, 1)'115 ],116 borderWidth: 1117 }]118 },119 options: {120 responsive: true,121 maintainAspectRatio: false,122 scales: {123 y: {124 beginAtZero: true,125 title: {126 display: true,127 text: 'Average Payments per Year'128 }129 }130 },131 plugins: {132 legend: {133 display: false134 },135 title: {136 display: true,137 text: 'Payment Frequency Comparison'138 }139 }140 }141 });142});