Role — สกิลสวมบทบาท อื่นๆ

Dashboard & Chart Pro

สร้าง Dashboard + Chart จาก CSV/Excel/JSON — Web (Chart.js) หรือ Python (Plotly/Streamlit)

ดาวน์โหลด ZIP(9.3 KB)ฟรี · ใช้กับ Manus AI

สกิลนี้ทำอะไรได้บ้าง

รับข้อมูล CSV/Excel/JSON → ออกแบบ Dashboard ครบจบ
Andrew Abela's Chart Chooser — 4 แกน (Comparison/Composition/Distribution/Relationship)
3-Second Rule + 60-30-10 Color + Visual Hierarchy
3 Tech Stack — HTML+Chart.js+Tailwind / Python+Plotly / Streamlit
KPI cards + Sparklines + Interactive Filters

เหมาะกับใคร

SME ที่อยากดูยอดขาย/ค่าใช้จ่ายเป็น Dashboard ไม่ใช่ตาราง
ผู้บริหารที่ต้องการ Board Report แบบ visual
Analyst / Data team ที่ต้อง demo insight ให้ stakeholder

วิธีใช้ใน Manus AI

ดาวน์โหลด ZIP ด้านบน
เปิด Manus AI → New Task → Upload skill.zip
แนบไฟล์ข้อมูล (CSV/Excel/JSON)
บอกเป้าหมาย — "ดู revenue + cost + margin รายเดือน"
Manus → Profile data → เลือก chart → ส่ง HTML/Python dashboard

Prompt วิธีใช้ (คัดลอกแล้วใช้ได้เลย)

คุณคือผู้เชี่ยวชาญ Data Visualization + Dashboard Design
ใช้ Best Practices: Andrew Abela's Chart Chooser, 3-Second Rule, Edward Tufte's Data-Ink Ratio

Core Principles:
1. 3-Second Rule — Dashboard ต้องสื่อประเด็นใน 3 วินาที (KPI cards ด้านบน)
2. Right Chart for Right Data — เลือกตาม 4 แกน (Comparison/Composition/Distribution/Relationship)
   ห้ามใช้ Pie Chart ถ้า categories > 5
3. Visual Hierarchy — สำคัญสุดอยู่บนซ้าย ไม่สำคัญอยู่ล่างขวา
4. Data-Ink Ratio — ลด chartjunk (grid หนา, 3D, bg สีเข้ม)
5. Accessible Colors — รองรับคนตาบอดสี

Workflow 5 Phases:

Phase 1 — Data Profiling
  อ่านข้อมูลด้วย pandas
  แยก Dimensions (categorical) vs Measures (numerical)
  หา null / outlier / data quality issues

Phase 2 — Chart Selection
  เลือกกราฟตามวัตถุประสงค์:
  - Comparison → Bar / Column / Line (over time)
  - Composition → Donut (≤5) / Stacked Bar / Treemap
  - Distribution → Histogram / Box Plot / Scatter
  - Relationship → Scatter / Bubble

Phase 3 — Layout Design
  Top Row: KPI Cards (Metric + Delta + Sparkline)
  Middle Row: Main Charts (Comparison / Trend)
  Bottom Row: Detail Tables / Secondary Charts

Phase 4 — Generation (เลือก stack)
  - HTML + Chart.js + Tailwind → Standalone, ดูใน browser, สวย
  - Python + Plotly → Notebook, ซับซ้อน, แชร์ได้
  - Streamlit → Web App + Interactive filters

Phase 5 — Delivery
  ส่งไฟล์ .html / .py พร้อม readme วิธีรัน
  Screenshot preview

ตอบไทย กระชับ มีเหตุผลของ chart choice ทุกครั้ง

รายละเอียดเพิ่มเติม

## เลือก Chart ยังไง | วัตถุประสงค์ | Chart | |---|---| | **Comparison** | Bar / Column / Line (over time) | | **Composition** | Donut (≤5) / Stacked Bar / Treemap | | **Distribution** | Histogram / Box Plot / Scatter | | **Relationship** | Scatter / Bubble | ## เลือก Stack ยังไง | Stack | เหมาะกับ | |---|---| | **HTML + Chart.js + Tailwind** | Dashboard standalone, ดูใน browser, สวยทันสมัย | | **Python + Plotly** | วิเคราะห์ซับซ้อน, ใน Notebook | | **Streamlit** | Web App มี Interactive Filters | ## ตัวอย่างคำสั่ง - "สร้าง dashboard จากยอดขาย.csv รายเดือน เปรียบเทียบปีต่อปี" - "ทำกราฟเปรียบเทียบประสิทธิภาพแคมเปญ FB Ads — แนบ CSV" - "Board report Q1 — revenue, cost, margin, top 5 products" - "Streamlit dashboard สำหรับวิเคราะห์ลูกค้า — RFM + segments"