Panduan Visualisasi

Chart Guide

Bina visualisasi data untuk dashboard anda dengan AI. Tak perlu tahu Chart.js — hanya describe apa yang anda nak, dan AI akan tulis kod.

4
Jenis Chart
4
Prompt Templates
1
Library (Chart.js)
3
Langkah Integrasi
← Kembali ke Modul
📈

Pengenalan kepada Chart.js

Apa itu Chart.js dan bagaimana ia berfungsi dalam dashboard anda.

Chart.js adalah library JavaScript yang popular untuk mencipta carta interaktif di web. Ia ringan, mudah digunakan, dan menyokong pelbagai jenis carta — bar, line, pie, doughnut, radar, dan banyak lagi.

Kenapa Chart.js?

  • Mudah — hanya dengan beberapa baris JavaScript, anda boleh hasilkan carta profesional
  • Interaktif — hover untuk lihat detail, responsive, animated
  • Dark theme friendly — boleh disesuaikan dengan tema gelap dashboard anda
  • Free & Open Source — lesen MIT, boleh guna untuk apa saja

Yang Penting:

Anda TAK perlu belajar Chart.js! Cuma salin prompt template yang disediakan, tampalkan ke Claude Code, dan AI akan hasilkan kod untuk anda. Fokus anda adalah pada data dan reka bentuk — bukan pada coding.
🔃

Aliran Data: Supabase ke Chart

Bagaimana data bergerak dari pangkalan data ke carta visual.

Sebelum mula, fahami aliran data ini. Setiap carta melalui 3 langkah yang sama:

1. Fetch dari Supabase
→
2. Transform data
→
3. Render chart

Langkah 1: Fetch Data

Ambil data dari Supabase menggunakan supabase-js client.

const { data, error } = await supabase .from('expenses') .select('category, amount, date');

Langkah 2: Transform Data

Ubah format data supaya sesuai dengan Chart.js. Biasanya kita kumpul ikut kategori atau ikut bulan.

// Contoh: Kumpul jumlah ikut kategori function groupByCategory(data) { const grouped = {}; data.forEach(item => { grouped[item.category] = (grouped[item.category] || 0) + item.amount; }); return { labels: Object.keys(grouped), values: Object.values(grouped) }; }

Langkah 3: Render Chart

Hantar data yang sudah di-transform ke Chart.js untuk dilukis sebagai carta.

const ctx = document.getElementById('myChart').getContext('2d'); new Chart(ctx, { type: 'bar', data: { labels: transformed.labels, datasets: [{ label: 'Jumlah (RM)', data: transformed.values, backgroundColor: ['#06d6f0', '#e040fb', '#ffd166', '#06d6a0'] }] } });
☰

Bar Chart — Untuk Perbandingan

Guna bar chart bila nak bandingkan nilai antara kategori berbeza.

Bila Nak Guna Bar Chart

  • Perbandingan kategori — jumlah perbelanjaan ikut kategori, bilangan stok ikut kategori
  • Ranking — top 5 idea dengan undian terbanyak, contact terbanyak ikut syarikat
  • Horizontal bar — lebih sesuai untuk label yang panjang (contoh nama produk)

Contoh: Jumlah Perbelanjaan Ikut Kategori

Saya ada data expenses dari Supabase dalam format: [ { category: "Makanan", amount: 150, date: "2024-01-15" }, { category: "Pengangkutan", amount: 50, date: "2024-01-16" }, { category: "Makanan", amount: 80, date: "2024-01-17" } ] Guna Chart.js CDN versi 4, bina BAR CHART dengan spesifikasi berikut: 1. Kumpul jumlah amount ikut category 2. Sumbu-X: nama kategori 3. Sumbu-Y: jumlah (RM) 4. Warna bar: gradient cyan (#06d6f0) ke blue (#3b82f6) 5. Background chart: transparent 6. Label teks: putih (#e2e8f0) 7. Grid lines: rgba(255,255,255,0.05) 8. Responsive: true 9. Tooltip: tunjuk "RM xxx.xx" 10. Title: "Perbelanjaan Mengikut Kategori" (putih) Ini JavaScript saya yang fetch data dari Supabase: [paste your fetch code here]

Variant: Horizontal Bar Chart

Tukar bar chart di atas kepada horizontal bar chart. Guna type 'bar' dengan indexAxis: 'y'. Warna bar guna palet: #06d6f0, #e040fb, #ffd166, #06d6a0, #3b82f6, #f97316, #ef476f.
📈

Line Chart — Untuk Trend/Masa

Guna line chart bila nak tunjukkan perubahan data sepanjang masa.

Bila Nak Guna Line Chart

  • Trend masa — perbelanjaan bulanan, stok harian, idea mingguan
  • Perbandingan series — bandingkan 2 set data dalam satu chart (contoh: pendapatan vs perbelanjaan)
  • Ramalan — tunjukkan arah aliran data (menaik/menurun)

Contoh: Trend Perbelanjaan Bulanan

Saya ada data expenses dari Supabase dalam format: [ { amount: 150, date: "2024-01-15" }, { amount: 50, date: "2024-01-16" }, { amount: 200, date: "2024-02-10" }, { amount: 100, date: "2024-02-20" } ] Guna Chart.js CDN versi 4, bina LINE CHART untuk trend perbelanjaan bulanan: 1. Kumpul jumlah amount ikut bulan (Jan 2024, Feb 2024, ...) 2. Sumbu-X: bulan (format: "Jan 2024", "Feb 2024") 3. Sumbu-Y: jumlah (RM) 4. Line color: magenta (#e040fb) dengan width 3 5. Point background: white, point radius: 5 6. Fill area bawah line dengan gradient magenta (opacity 0.1) 7. Background chart: transparent 8. Teks label: putih (#e2e8f0) 9. Grid lines: rgba(255,255,255,0.05) 10. Responsive: true 11. Tooltip: tunjuk "RM xxx.xx pada Bulan X" 12. Title: "Trend Perbelanjaan Bulanan" (putih) Kalau ada 2 dataset (pendapatan vs perbelanjaan), guna dua line berbeza warna: cyan (#06d6f0) untuk pendapatan, magenta (#e040fb) untuk perbelanjaan.

Variant: Multiple Lines

Saya ada data dari Supabase: [{month: "Jan", sales: 1000, expenses: 800}, ...]. Bina LINE CHART dengan 2 line: "Jualan" (cyan, solid) dan "Perbelanjaan" (merah, dashed). Guna borderDash: [5, 5] untuk garisan putus-putus pada line perbelanjaan. Tambah legend di atas chart.
🍇

Pie / Doughnut Chart — Untuk Pecahan

Guna pie/doughnut chart bila nak tunjukkan bahagian dari keseluruhan (peratusan).

Bila Nak Guna Pie / Doughnut

  • Pecahan kategori — peratusan perbelanjaan ikut kategori, taburan stok ikut kategori
  • Komposisi — berapa peratus contact dari setiap syarikat
  • Doughnut (better) — lebih moden, ada ruang di tengah untuk total

Contoh: Pecahan Perbelanjaan Ikut Kategori

Saya ada data expenses dari Supabase dalam format: [ { category: "Makanan", amount: 500 }, { category: "Pengangkutan", amount: 200 }, { category: "Hiburan", amount: 150 }, { category: "Bil", amount: 400 } ] Guna Chart.js CDN versi 4, bina DOUGHNUT CHART: 1. Kumpul jumlah amount ikut category 2. Label: nama kategori 3. Data: jumlah perbelanjaan 4. Warna (ikut urutan): #06d6f0, #e040fb, #ffd166, #06d6a0, #3b82f6, #f97316, #ef476f 5. Background chart: transparent 6. Teks label: putih (#e2e8f0) 7. Border antara segments: dark (#0b0d17), width 2 8. Responsive: true 9. Tooltip: tunjuk "RM xxx.xx (xx.x%)" 10. Legend di sebelah kanan 11. Cutout: 50% (untuk rupa doughnut) 12. Title: "Pecahan Perbelanjaan" (putih) 13. Di tengah doughnut, display total jumlah (gunakan plugin center text atau HTML overlay) Juga sediakan varian PIE CHART (cutout: 0) untuk perbandingan.

Variant: Doughnut dengan Total di Tengah

// Plugin untuk display total di tengah doughnut const centerTextPlugin = { id: 'centerText', afterDraw(chart) { const { ctx, width, height } = chart; ctx.save(); const total = chart.data.datasets[0].data.reduce((a, b) => a + b, 0); ctx.font = 'bold 24px sans-serif'; ctx.fillStyle = '#e2e8f0'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('RM ' + total.toFixed(0), width / 2, height / 2); ctx.font = '12px sans-serif'; ctx.fillStyle = '#94a3b8'; ctx.fillText('Jumlah', width / 2, height / 2 + 28); ctx.restore(); } };
📋

Table Dengan Sorting — Untuk Data List

Kadang-kadang cara terbaik untuk lihat data adalah dalam bentuk jadual yang boleh diurus.

Bila Nak Guna Table

  • Data terperinci — senarai transaksi, senarai contact, senarai item
  • Perbandingan nilai tepat — bila user nak lihat angka sebenar, bukan visual
  • Sorting & filtering — table membenarkan user menyusun data ikut column

Contoh: Table Expenses Boleh Sort

Saya ada data expenses dari Supabase dalam format: [ { description: "Beli makanan", amount: 150, category: "Makanan", date: "2024-01-15" }, { description: "Topup TNG", amount: 50, category: "Pengangkutan", date: "2024-01-16" } ] Bina HTML TABLE yang: 1. Columns: Description, Amount, Category, Date 2. Setiap column header BOLEH DIKLIK untuk sort (ascending/descending) 3. Tunjuk anak panah ▲/▼ pada column yang sedang di-sort 4. Alternating row colors: bg2 (#111827) dan bg3 (#1a1f2e) 5. Hover effect: row jadi lebih terang 6. Header row: bg3 (#1a1f2e) dengan teks cyan (#06d6f0) 7. Amount column: format RM xxx.xx, color gold (#ffd166) 8. Responsive: horizontal scroll di skrin kecil (overflow-x: auto) 9. Search box di atas table untuk filter semua columns 10. "X rows dipaparkan" di bawah table Gunakan JavaScript tulen (tiada framework). Ini adalah sebahagian dari dashboard saya yang fetch data dari Supabase.

Multi-Column Sort & Pagination

Tambah pagination ke table di atas. Tunjukkan 10 rows setiap halaman. Butang "Previous" dan "Next" di bawah table, dengan label "Halaman X dari Y". Juga tambah dropdown "Rows per halaman: [10/25/50]". Sort ikut multiple columns: klik Shift + click column header untuk add secondary sort.
🎨

Color & Style Customization

Padankan chart dengan tema gelap dashboard anda.

Palet Warna Untuk Dark Theme

Guna palet warna ini untuk chart yang konsisten dengan tema dashboard:

Customization Prompt

Saya nak chart yang konsisten dengan dark theme dashboard saya (background: #0b0d17, teks: #e2e8f0, teks kedua: #94a3b8). Untuk chart: - Background chart: transparent (biar background dashboard nampak) - Label teks (sumbu, legend): #94a3b8 (text2) - Title: #e2e8f0 (text), font bold 16px - Grid lines: rgba(255,255,255,0.06) - Tooltip background: #1a1f2e (bg3) - Tooltip border: rgba(255,255,255,0.1) - Tooltip text: #e2e8f0 Untuk data colors, guna gradient atau palet ni: ['#06d6f0', '#e040fb', '#ffd166', '#06d6a0', '#3b82f6', '#f97316', '#ef476f', '#8b5cf6'] Guna Chart.js versi 4 CDN.
📱

Responsive Charts

Pastikan chart nampak baik di semua saiz skrin.

Chart.js Responsive Configuration

Chart.js ada built-in responsive support. Tapi ada beberapa setting yang perlu di-tune:

// Responsive chart configuration const config = { type: 'bar', data: { ... }, options: { responsive: true, // default: true maintainAspectRatio: true, // jaga nisbah tinggi/lebar aspectRatio: 2, // lebar 2x ganda tinggi (untuk desktop) plugins: { legend: { position: 'top', // legend di atas (elak sempit) labels: { boxWidth: 12, // kecilkan box legend font: { size: 11 } // kecilkan font legend } } }, scales: { x: { ticks: { maxRotation: 45, // putar label 45 darjah kalau panjang font: { size: 10 } } } } } }; // Mobile: ubah aspectRatio if (window.innerWidth < 768) { config.options.aspectRatio = 1.5; // lebih tinggi sikit config.options.plugins.legend.position = 'bottom'; }

Responsive Grid Layout (CSS)

Saya ada 3 chart dalam dashboard: bar chart, line chart, dan pie chart. Guna CSS Grid untuk susun atur responsive: Desktop (>= 1024px): bar chart (2 columns), line chart (2 columns), pie chart (1 column, width 50%) Tablet (768-1023px): semua chart (1 column) Mobile (< 768px): semua chart (1 column, full width) Setiap chart dalam card dengan background #111827, border radius 12px, padding 16px. Chart mengambil 100% lebar card.
⚡

Quick Start — Template Lengkap

Salin template ini untuk mulakan chart pertama anda dengan cepat.

Template HTML + Chart.js + Supabase

Template penuh yang boleh anda terus guna. Hanya tukar URL, Key, dan table name:

<!DOCTYPE html> <html lang="ms"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard Chart</title> <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script> <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> <style> body { background: #0b0d17; color: #e2e8f0; font-family: sans-serif; padding: 40px; } .chart-container { max-width: 700px; margin: 0 auto; } </style> </head> <body> <div class="chart-container"> <canvas id="myChart"></canvas> </div> <script> // 1. Init Supabase const supabase = supabase.createClient( 'https://YOUR-PROJECT.supabase.co', 'YOUR-ANON-KEY' ); // 2. Init Chart (placeholder) const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: [], datasets: [] }, options: { responsive: true } }); // 3. Fetch & Update async function updateChart() { const { data, error } = await supabase .from('YOUR_TABLE') .select('*'); if (error) { console.error(error); return; } // Transform data (ubah ikut keperluan) const labels = [...new Set(data.map(d => d.category))]; const values = labels.map(cat => data.filter(d => d.category === cat) .reduce((sum, d) => sum + (d.amount || 0), 0) ); // Update chart myChart.data.labels = labels; myChart.data.datasets = [{ label: 'Jumlah', data: values, backgroundColor: '#06d6f0' }]; myChart.update(); } updateChart(); </script> </body> </html>
Pro tip: Kalau chart tak keluar, buka console browser (F12). Error yang selalu muncul: canvas ID tak match, data undefined, atau Chart.js tak di-load. Semak Network tab untuk pastikan CDN Chart.js berjaya di-download.
🔧

Troubleshooting Charts

Masalah biasa dan cara selesaikannya.

Masalah Sebab Penyelesaian
Chart blank / tak nampak Canvas ID tak match atau chart destroy sebelum update Semak ID canvas dalam HTML dan JavaScript. Cuba destroy() dulu sebelum buat chart baru.
Chart.js not defined CDN tak berjaya dimuatkan Semak Network tab — CDN URL betul? Cuba guna CDN lain atau download Chart.js tempatan.
Data tak nampak dalam chart Labels dan data arrays tak sama panjang Cuba console.log(labels, values) — confirm kedua-dua ada dan sama panjang.
Chart tak responsive Container chart tak ada width/height yang jelas Pastikan container chart ada width: 100% dan position: relative. Chart.js responsive perlukan parent element yang jelas.
Data dari Supabase tak sampai ke chart Transform data salah atau async issue Cuba console.log(data) terus dari Supabase. Confirm format data sebelum transform. Pastikan updateChart() dipanggil SELEPAS data diterima.