ทำ Dashboard ยอดขายแบบเรียลไทม์จาก Google Sheets ด้วย Chart.js

สรุปข้อมูลที่ฝั่งเซิร์ฟเวอร์

ส่งเฉพาะ "ผลสรุป" ไปที่หน้าเว็บ ไม่ส่งข้อมูลดิบทั้งหมด หน้าเว็บจะโหลดเร็วมาก

function getDashboard(days) {
  const rows = SpreadsheetApp.getActive().getSheetByName('sales').getDataRange().getValues().slice(1);
  const from = new Date(Date.now() - days * 864e5);
  const byDay = {}, byItem = {};
  rows.forEach(([date, item, qty, total]) => {
    if (new Date(date) < from) return;
    const d = Utilities.formatDate(new Date(date), 'Asia/Bangkok', 'dd/MM');
    byDay[d] = (byDay[d] || 0) + total;
    byItem[item] = (byItem[item] || 0) + qty;
  });
  const top = Object.entries(byItem).sort((a, b) => b[1] - a[1]).slice(0, 5);
  return { byDay, top };
}

วาดกราฟด้วย Chart.js

<canvas id="sales"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
google.script.run.withSuccessHandler(d => {
  new Chart(document.getElementById('sales'), {
    type: 'line',
    data: { labels: Object.keys(d.byDay),
            datasets: [{ label: 'ยอดขาย', data: Object.values(d.byDay), tension: .3, fill: true }] },
  });
}).getDashboard(30);
</script>

ไอเดียตัวชี้วัด (KPI) ที่ควรมี

• ยอดขายวันนี้ / เดือนนี้ เทียบช่วงก่อนหน้า
• จำนวนบิล และยอดเฉลี่ยต่อบิล
• สินค้าขายดี 5 อันดับ / สินค้าใกล้หมด
• ยอดขายแยกช่องทาง (หน้าร้าน, เดลิเวอรี่)