8 lines
1.9 KiB
JavaScript
8 lines
1.9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const grayText = '#94a3b8';
|
|
const plRevenue = '#2563eb', plExpenses = '#f97316';
|
|
new Chart(document.getElementById('plChart'), { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Revenue', data: [1.8, 2.1, 1.9, 2.2, 2.4, 2.0], backgroundColor: plRevenue, borderRadius: 4, barPercentage: 0.4 }, { label: 'Expenses', data: [1.4, 1.6, 1.5, 1.7, 1.8, 1.5], backgroundColor: plExpenses, borderRadius: 4, barPercentage: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
|
|
new Chart(document.getElementById('expenseChart'), { type: 'doughnut', data: { labels: ['Payroll', 'Operations', 'Marketing', 'R&D', 'Others'], datasets: [{ data: [42, 22, 15, 12, 9], backgroundColor: ['#2563eb', '#f97316', '#ec4899', '#8b5cf6', '#06b6d4'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: { display: false } } } });
|
|
new Chart(document.getElementById('cashflowChart'), { type: 'bar', data: { labels: ['Operating', 'Investing', 'Financing', 'Net Change'], datasets: [{ label: 'Cash Flow', data: [3.2, -1.1, -0.8, 1.3], backgroundColor: ['#10b981', '#e11d48', '#e11d48', '#6366f1'], borderRadius: 4, barPercentage: 0.5 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: grayText, font: { size: 10 }, callback: v => '$' + v + 'M' } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
|
|
});
|