ทดลองใช้ Plug-In เพื่อปรับปรุงกราฟ

        ความน่าสนใจใน Oracle APEX  อย่างหนึ่งก็คือความง่ายในการแสดงผลข้อมูล ที่เราสามารถจัดรูปแบบ Dashboard ได้ แต่เมื่อสร้างกราฟแบบต่างๆที่มีมาให้ใน APEX  กราฟที่ได้ แม้นว่าสวยงานระดับหนึ่ง แต่ก็ยังไม่เข้าสมัยกับ Flat Design มากนัก  มีความพยายามสร้าง Universal theme ที่เป็น Flag Design แต่สวยงามของกราฟยังไม่ปรับปรุง มีเพียงการรองรับกราฟแบบ HTML5 เพื่อแทนที่ Adobe Flash ที่กำลังจะเลิกใช้เท่านั้น  แล้วเราจะสร้าง Web App ให้ดู"เดิร์น" ได้อย่างไร ?

ตัวอย่างกราฟที่สร้างเป็น HTML5

กราฟที่มากับโปรแกรม

               ปัญหานี้แก้ไขได้ด้วยการเขียน Plug-In เพื่อขยายความสามารถของ APEX แต่สำหรับเราผู้เริ่มต้น ผมก็จะนำเสนอวิธีบ้านๆ ก็คือนำ Plug-In ที่เค้าทำมาแล้วเอามาใช้งาน แล้วไปเอามาจากไหนละ ไม่ไกลเลยครับก็ใน APEX เรานี้ละครับ ใน Apps Gallery โดยกดไปที่เมนู Packaged Apps ที่อยู่ด้านบน แล้วเลือก Apps Gallery จะเห็นโปรแกรมตัวอย่างหนึ่งที่ชื่อว่า Sample Charts เราจะลงโปรแกรมตัวนี้กันเพื่อเอา Plug-In ที่เค้าใช้ในโปรแกรม ลงไปแล้วก็ทดลองเล่นดูนะครับมีกราฟน่าสนใจหลายตัว

โปรแกรม Sample Charts

                 วิธีการลงก็ให้คลิกไปที่ ไอคอน Sample Charts เลยก็จะเข้าสู้คำอธิบายโปรแกรม พร้อมทั้งมีปุ่ม Install ให้ก็ให้กดปุ่มแล้วกด Next ไปเลื่อยๆ

หน้าจออธิบาย ให้กด Install

                       เมื่อติดตั้งเสร็จ ทดลองรันโปรแกรมดู  User,Password ก็ใช้ตัวเดียวกับที่ Login APEX นั้นละ  ก็จะได้หน้าจอด้านล่าง ลองกด Pie ดู

หน้าตาโปรแกรม Sample Charts

   

                            จากนั้นให้เลือกปุ่ม Application ที่อยู่ที่แถบดำล่าง ก็จะเข้าสู่โครงสร้างของโปแกรม Sample Charts ให้เลือก Shared Components แล้วกดเลือกรายการ Plug-Ins ก็จะเข้าสู่หน้าจอที่เก็บ Plug-In ต่างๆของโปรแกรมนี้จะเห็นว่ามีหลายตัวแต่ตัวที่เราจะใช้คือ "D3 Pie Chart"      

รายการ Plug-In ในโปรแกรมนี้

  

                                     ให้ทำการกด Link รายการ Export Plug-In ที่อยู่ด้านขวามือ ก็จะนำเข้าสู่หน้าจอการ Export Plug-In  ให้เลือกเหมือนในรูป แล้วกดปุ่ม Export

ทำการเลือก Plug-In ที่ต้องการ Export

                                                          

                                       โปรแกรมก็จะทำการ download Plug-in เป็นประเภทไฟล์ ".sql"  เอาไว้ที่ไดเร็กเทอรี่ download ก็ได้  ตอนนี้เราได้ Plug-In ของ  "D3 Pie Chart"   มาแล้ว ต่อมาก็ทำการ Import เข้าสู่โปรแกรมของเรา   โดยการกลับไปที่โปรแกรมของเราที่ต้องการ Import เข้ามา      แล้วกดปุ่ม      "Export / Import"  แล้วทำการกดปุ่ม "Import" แล้วกดปุ่ม "Next"  จะเข้าสู่หน้าจอการ Import ให้เลือกไฟล์  Plug-In ที่เรา download มา และเลือก File Type เป็น Plug-In แล้วกดปุ่ม "Next"  

หน้าจอการ Import 

                                            เมื่อทำการ Import เสร็จ เราจะทำการสร้างกราฟใหม่ โดยเริ่มจากการสร้าง Pgae เปล่าๆขึ้นมาก่อน เข้าสู่จอนั้นเราจะเห็น icon ด้านล่างมีปุ่ม "D3 Pie Chart [Plug-in]" เพิ่มขึ้นมาให้ทำการ ลากแล้วปล่อย ที่ CONTENT BODY โปรแกรมก็จะทำการเพิ่ม Plug-In และรอรับ SQL Query ให้ใส่ 

select null, Job as label, count(*)  as value 

from EMP group by Job order by value desc

                                        

เหมือนในรูป

มี icon Plug-in เพิ่มขึ้นมา

ใส่ค่า SQL

                                                 จากนั้นให้คลิก object "Attributes" ด้านซ้าย เพื่อเลือกรูปแบบของ Pie Chart เช่นขนาด การกำหนด Label Column และ Value Column ทาง properties ด้านขวา ให้ใส่ไปเหมือนในรูปด้านล่าง 

กำหนด properties ให้ Attribute

                                              ให้ทำการ Save และทดลองรันดู ก็จะได้กราฟ "D3" ที่ดูดีกว่าของเดิมๆที่มากับ APEX สนใจตัวไหนก็ไปเอาจาก Sample Charts และ โปรแกรมตัวอย่างอื่นๆ  เท่านี้เราก็จะได้ Dashboard ที่สร้างได้อย่างง่ายๆ และหน้าตาดูทันสมัยด้วยจ้า  ; )  

ป.ล. บอกกับตัวเองว่าปีใหม่นี้พยายามเขียนทุกเดือนไม่รู้จะสำเร็จไหม