ออกแบบ Dashboard ด้วย Chart.js

Chart.js เป็น JavaScript Library สำหรับสร้างกราฟบนเว็บไซต์ ใช้งานง่าย รองรับ Responsive Design และสามารถนำไปใช้ร่วมกับ PHP, MySQL หรือ API เพื่อสร้าง Dashboard ที่แสดงข้อมูลแบบ Dynamic ได้

Chart.js รองรับกราฟหลายประเภท เช่น

• Bar Chart
• Line Chart
• Pie Chart
• Doughnut Chart
• Radar Chart
• Scatter Chart

เหมาะสำหรับ Dashboard ที่ต้องการสรุปข้อมูลให้เข้าใจได้ง่ายในรูปแบบกราฟ

เริ่มต้นใช้งาน Chart.js

สามารถทดลองใช้งานผ่าน CDN ได้ทันที

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

จากนั้นสร้างพื้นที่สำหรับแสดงกราฟด้วย <canvas>

<div style="max-width: 700px;">
    <canvas id="salesChart"></canvas>
</div>

สร้างกราฟแรก

ตัวอย่าง Bar Chart แสดงยอดขายรายเดือน

<script>
const ctx = document.getElementById('salesChart');

new Chart(ctx, {
    type: 'bar',

    data: {
        labels: [
            'มกราคม',
            'กุมภาพันธ์',
            'มีนาคม',
            'เมษายน',
            'พฤษภาคม'
        ],

        datasets: [{
            label: 'ยอดขาย',
            data: [12000, 19000, 15000, 22000, 28000]
        }]
    },

    options: {
        responsive: true,
        plugins: {
            legend: {
                display: true
            }
        }
    }
});
</script>

โค้ดส่วนสำคัญประกอบด้วย

• type กำหนดประเภทกราฟ
• labels กำหนดชื่อข้อมูล
• datasets กำหนดชุดข้อมูล
• options ใช้ปรับแต่งการแสดงผล

สร้าง Line Chart

หากต้องการดูแนวโน้มข้อมูลตามช่วงเวลา สามารถใช้ Line Chart

new Chart(document.getElementById('lineChart'), {
    type: 'line',

    data: {
        labels: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.'],

        datasets: [{
            label: 'จำนวนผู้ใช้งาน',
            data: [120, 180, 230, 310, 420]
        }]
    },

    options: {
        responsive: true
    }
});

Line Chart เหมาะกับข้อมูล เช่น ยอดขาย จำนวนผู้ใช้งาน จำนวนคำสั่งซื้อ หรือสถิติรายเดือน

โครงสร้าง Dashboard ที่แนะนำ

Dashboard ที่ดีไม่ควรมีเฉพาะกราฟ แต่ควรมีข้อมูลสรุปด้านบนด้วย

ตัวอย่าง

┌──────────┐ ┌──────────┐ ┌──────────┐
│ ยอดขาย   │ │ ลูกค้า    │ │ คำสั่งซื้อ │
│ ฿85,000  │ │ 1,250    │ │ 320      │
└──────────┘ └──────────┘ └──────────┘

┌─────────────────────────────────────┐
│          ยอดขายรายเดือน             │
│             Line Chart              │
└─────────────────────────────────────┘

┌──────────────────┐ ┌────────────────┐
│   ยอดขายตามหมวด  │ │ สัดส่วนลูกค้า  │
│     Bar Chart     │ │ Doughnut Chart │
└──────────────────┘ └────────────────┘

การจัด Dashboard แบบนี้ช่วยให้ผู้ใช้งานเห็นข้อมูลสำคัญก่อน แล้วจึงดูรายละเอียดผ่านกราฟ

ใช้ Chart.js ร่วมกับ PHP

ข้อมูลจริงมักมาจากฐานข้อมูล MySQL

PHP สามารถดึงข้อมูลแล้วส่งให้ JavaScript ได้ เช่น

<?php

$sales = [
    12000,
    19000,
    15000,
    22000,
    28000
];

?>

แล้วส่งข้อมูลให้ Chart.js

const salesData = <?= json_encode($sales) ?>;

new Chart(document.getElementById('salesChart'), {
    type: 'bar',

    data: {
        labels: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.'],

        datasets: [{
            label: 'ยอดขาย',
            data: salesData
        }]
    }
});

วิธีนี้ทำให้ Dashboard สามารถแสดงข้อมูลจริงจากฐานข้อมูลได้

ใช้ร่วมกับ Tailwind CSS

Chart.js สามารถใช้ร่วมกับ Tailwind CSS เพื่อสร้าง Layout Dashboard ได้ง่าย

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

    <div class="bg-white rounded-xl shadow p-6">
        <h2 class="text-lg font-bold mb-4">
            ยอดขายรายเดือน
        </h2>

        <canvas id="salesChart"></canvas>
    </div>

    <div class="bg-white rounded-xl shadow p-6">
        <h2 class="text-lg font-bold mb-4">
            สัดส่วนสินค้า
        </h2>

        <canvas id="productChart"></canvas>
    </div>

</div>

ช่วยให้ Dashboard รองรับทั้งคอมพิวเตอร์ แท็บเล็ต และโทรศัพท์มือถือ

Dashboard สามารถนำไปใช้กับอะไรได้บ้าง?

Chart.js เหมาะสำหรับสร้าง Dashboard เช่น

• Dashboard ยอดขาย
• ระบบสต็อกสินค้า
• ระบบสมาชิก
• ระบบงานบุคคล
• ระบบรายงาน
• Dashboard การเงิน
• Dashboard สถิติเข้าเว็บไซต์
• ระบบติดตามงาน
• ระบบข้อมูลเกษตร
• Admin Dashboard

ข้อควรระวัง

หาก Dashboard มีข้อมูลจำนวนมาก ควร

• สรุปข้อมูลจาก Backend ก่อนส่งมาแสดง
• ไม่โหลดข้อมูลทั้งหมดพร้อมกัน
• ใช้ API สำหรับข้อมูลที่ต้องอัปเดตบ่อย
• จำกัดจำนวนกราฟในหน้าเดียว
• เลือกประเภทกราฟให้เหมาะกับข้อมูล
• รองรับ Responsive Design

Dashboard ที่ดีควรเน้น อ่านง่ายและช่วยตัดสินใจได้เร็ว มากกว่าการใส่กราฟจำนวนมาก

สรุป

Chart.js เป็นเครื่องมือที่เหมาะสำหรับเริ่มต้นสร้าง Dashboard เพราะติดตั้งง่าย ใช้งานกับ JavaScript โดยตรง และสามารถเชื่อมต่อกับ PHP, MySQL หรือ API ได้

แนวทางสำหรับผู้เริ่มต้นคือ

1. เริ่มจาก Bar และ Line Chart
2. เรียนรู้ labels และ datasets
3. จัด Layout Dashboard
4. ดึงข้อมูลจาก PHP/MySQL
5. เปลี่ยนข้อมูลเป็น JSON
6. ส่งข้อมูลให้ Chart.js
7. ต่อด้วย API และ Dashboard แบบ Dynamic