suksit dot com

ช่วงนี้มีงานต้องทำเว็บแอพพลิเคชันแนวๆ issue tracker สำหรับใช้ที่ทำงาน ตัวโครงสร้างพื้นฐานของระบบก็เป็น Drupal กับคู่หู CCK + Views ซึ่งเพียงเท่านี้ก็ได้ฟังก์ชันหลักๆ ประมาณ 80% แล้ว

มาสะดุดก็ตอนที่คิดว่าถ้ามี dashboard แสดงสถานะของ issue ต่างๆ แบบเป็นกราฟิกด้วยก็น่าจะช่วยให้ผู้ใช้เห็นภาพได้ชัดเจนขึ้น เลยลองค้นดูว่า Drupal มีโมดูลอะไรที่ช่วยในการสร้าง graph หรือ chart พวกนี้บ้าง ก็ได้รายชื่อโมดูลมาจำนวนหนึ่ง แต่ก่อนที่จะตัดสินใจใช้โมดูลไหน ก็ต้องดูก่อนว่า โมดูลนั้นๆ มันใช้ tools หรือ backend อะไรในการสร้าง chart ซึ่งเท่าที่สำรวจมาได้ก็พบว่ามีดังนี้

Google Chart

บริการสร้าง chart จาก Google ใช้งานง่ายเพียงส่ง parameter ไปยัง URL ที่กำหนด ก็จะได้ chart ที่ต้องการกลับมา เท่าที่ลองเล่นดูซักพัก ผมได้ข้อสรุปดังนี้

ข้อดี:

• ฟรี
• หน้าตาเรียบง่าย สไตล์ Google
• ไม่ต้องติดตั้งไฟล์เพิ่มเติม
• ไม่เป็นภาระกับเซิร์ฟเวอร์ (เพราะ google รับหน้าที่ render chart ให้)
• เตรียมข้อมูลง่าย แค่เอามา & ต่อๆ กันเป็น parameter ใน URL เท่านั้น

ข้อเสีย:

• ทดสอบบนระบบที่พัฒนาแบบ offline ไม่ได้ อันนี้สำหรับผมถือว่าร้ายแรง เพราะช่วงที่ไปทำงานต่างจังหวัดต่ออินเทอร์เน็ตไม่สะดวก ทำให้ทดสอบระบบไม่ได้เลย
• เป็นไฟล์ .png ธรรมดา ไม่สามารถโต้ตอบกับผู้ใช้ได้ ซึ่งตามความคิดผม dashboard มันน่าจะเป็นอะไรที่ผู้ใช้สามารถคลิกในส่วนต่างๆ เพื่อดูรายละเอียดเพิ่มเติมได้สะดวก

โมดูลที่สนับสนุน Google Chart ได้แก่ Chart API และ Charts

FusionCharts

สร้าง chart โดยส่งข้อมูลให้ไฟล์ Flash เพื่อ render ออกมาเป็น chart ตามที่กำหนด อันนี้บอกตามตรงว่าไม่ได้ลอง เพราะดูๆ gallery กับ online demo แล้วพบว่าหน้าตาไม่ถูกใจอย่างแรง =.= แต่ถ้าให้ระบุข้อดีข้อเสีย ก็พอบอกได้ดังนี้

ข้อดี:

• ฟรี (เวอร์ชันเก่า)
• โต้ตอบกับผู้ใช้ได้ เช่น มี tooltip หรือเวลาคลิกที่แต่ละเสี้ยวของ pie chart จะีมี animation แต่ไม่แน่ใจว่าสามารถกำหนดว่าเวลาคลิกแล้วเป็นการเรียก URL อื่นได้หรือไม่
• มี chart แบบแปลกๆ เช่น Funnel chart และ Gantt chart

ข้อเสีย:

• ไม่ฟรี (เวอร์ชันล่าสุด)
• ไม่สวย อันนี้รสนิยมส่วนตัว
• อ่านข้อมูลในรูปแบบ XML เท่านั้น อันนี้ก็ไม่ชอบเป็นการส่วนตัว
• เงื่อนไขการใช้งานเยอะมาก จนขี้เกียจอ่าน

โมดูลที่สนับสนุน FusionCharts ได้แก่ Charts

Open Flash Chart

คอนเซ็ปต์เดียวกับ FusionCharts คือใช้ Flash ในการ render chart แต่เป็นโอเพนซอร์ส หลังจากลองเล่นดูแล้วพบว่า

ข้อดี:

• หน้าตาถูกใจอย่างแรง เรียบ แต่ดูไฮโซ xD
• โอเพนซอร์ส
• โต้ตอบกับผู้ใช้ได้ กำหนดลิงค์ให้ส่วนต่างๆ ของ chart ได้ โดยอาจสั่งให้รัน JavaScript หรือเป็นการเรียก URL ที่ต้องการก็ได้
• อ่านข้อมูลได้หลายรูปแบบ เช่น จาก data file หรือจาก JavaScript

ข้อเสีย:

• รูปแบบของ chart มีไม่มาก เมื่อเทียบกับตัวอื่นๆ
• อาจจะมีอย่างอื่นอีก แต่ขี้เกียจหา ลำเอียง 555+

โมดูลที่สนับสนุน Open Flash Chart ได้แก่ Open Flash Chart API และ Charts

XML/SWF Charts

เป็น Flash chart อีกหนึ่งตัว อันนี้ผมเคยใช้ตอนเขียนเว็บแอพพลิเคชันเล็กๆ นานมาแล้ว ก่อนที่มันจะเปลี่ยนรูปแบบข้อมูลเป็น XML (แต่ก่อนมันคือ PHP/SWF Charts) สรุปข้อดีข้อเสียคร่าวๆ ก็ประมาณนี้

ข้อดี:

• หน้าตาถูกใจ หรู และดูดี
• animation อลังการ
• การโต้ตอบกับผู้ใช้ระดับเทพ (ลองเล่น demo แล้วจะเข้าใจ)
• มีรูปแบบของ chart ใ้ห้เลือกเยอะมาก

ข้อเสีย:

• ไม่ฟรี
• ถ้าไม่มี license คลิกตรงไหนใน chart มันจะลิงค์ไปที่หน้าโฮมเพจตลอด
• อ่านข้อมูลในรูปแบบ XML เท่านั้น

โมดูลที่สนับสนุน XML/SWF Charts ได้แก่ SWF Charts (Drupal 5.x เท่านั้น)

Flot

ตัวนี้คุณ onequad แนะนำมา แหวกแนวเล็กน้อยเนื่องจากเป็น JavaScript chart แต่ดูหน้าตาแล้วสวยงามไม่แพ้ chart ที่สร้างจาก Flash เลย

ข้อดี:

• โอเพนซอร์ส
• หน้าตาสวยงาม
• เป็น JavaScript แค่มี browser ไม่ต้องติดตั้ง Flash ก็ใช้งานได้
• กิน CPU น้อยกว่าพวก Flash chart ทั้งหลาย
• โต้ตอบกับผู้ใช้ได้ เช่น การซูม, การซ่อน/แสดงข้อมูล, การเลือกช่วงข้อมูล, มี tool tip

ข้อเสีย:

• ยังมีรูปแบบ chart น้อยอยู่ เท่าที่ดูตอนนี้รู้สึกจะมีแค่ line, bar และ point
• นึกไม่ออก ใครรู้ช่วยบอกด้วย :P

โมดูลที่สนับสนุน Flot ได้แก่ Flot

Final Verdict

สรุปว่า tool ที่ผมเลือกใช้สร้าง chart สำหรับใช้ใน dashboard ของระบบ issue tracker คือ Open Flash Chart โดยใช้โมดูล Open Flash Chart API เป็นตัวช่วยในการสร้าง chart ใน Drupal อีกที

สำหรับวิธีการใช้งานโมดูลประเภทนี้แต่ละตัวก็น่าจะคล้ายๆ กัน คือทำยังไงก็ได้ให้ได้ข้อมูลที่ต้องการออกมาก่อน สำหรับผมคิดว่าใช้ db_query() จะสะดวกและตรงไปตรงมาที่สุด พอได้ข้อมูลมาแล้ว ก็จับมาใส่ data structure ตามที่แต่ละโมดูลกำหนด สุดท้ายสั่ง render chart เป็นอันเสร็จพิธี

ปล. ถ้าใครเขียน PHP เป็นหลัก จะมี tool สำหรับสร้าง chart ที่น่าสนใจอีกตัวคือ pChart ครับ หน้าตาดูดีมากๆ ถ้าต้องการแค่ static chart ละก็ ผมให้ตัวนี้ชนะขาด Google Chart ด้านความสวยงาม :D