8 lines
1.8 KiB
JavaScript
8 lines
1.8 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: 'Target', 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: ['Website', 'Referral', 'Social', 'Email', '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: ['Calls', 'Emails', 'Meetings', 'Total'], datasets: [{ label: 'Activity', data: [245, 450, 89, 784], 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.toLocaleString() } }, x: { grid: { display: false }, ticks: { color: grayText, font: { size: 9 } } } } } });
|
|
});
|