เริ่มต้นใช้งานการเริ่มต้นใช้งานนั้นทำไม่ยากเลย เพียงแต่ login เข้าสู่ระบบของ WordPress หากทำการติดตั้งและ Activate Plugin เรียบร้อยแล้วก็จะพบกับ Menu ของ RJ QuickCharts ดังภาพ หลังจากนั้นเลือก New Chart หรือถ้าเข้าไปใน RJ QuickCharts แล้วจะเลือก Add New ก็ได้ หลังจากนั้นก็จะปรากฏเพจให้ใช้งาน
การใช้งานทั้งหมด มี 4 ขั้นตอนง่าย มาดูทีละขั้นตอนเลยนะครับ
Step 1: Chart Infoขั้นที่ 1 หลังจากที่ สั่ง Add New Chart แล้วก็จะพบกับหน้าการใช้งาน ซึ่งมีทั้งหมด 4 ขั้นตอน มาดูการใช้งานขั้นตอนแรก ซึ่งเป็นข้อมูลที่เกี่ยวกับ Chart หรือ Chart info นั่นเอง (การปรับแต่งแก้ไขทั้งหมดสามารถ ดูตัวอย่างได้ใน Step 3: Preview) เริ่มจาก
- Type of Chart คือ รูปแบบหรือชนิดของ Chart ซึ่ง RJ QuickCharts รองรับทั้งหมด 3 รูปแบบ ด้วยกันคือ Line(กราฟเส้น), Bar(กราฟแท่ง) และ Pie(กราฟวงกลม) การเลือกรูปแบบนั้นควรจะสอดคล้องกับข้อมูลที่จะนำเสนอ
- Show Legend? คือ จะให้ RJ QuickCharts แสดงการอธิบายหรือไม่ นั่นคือ แสดง สีของแต่ละเส้นว่า แทนด้วยข้อมูลอะไรนั่นเอง(เลือก Yes หรือ No)
- Chart Title คือ ชื่อของ Chart ที่จะแสดงอยู่ตรงกลางด้านบน ของ Chart ควรจะมี
- Y Axis Title คือ ชือแกน Y (แนวตั้ง) ของ Chart (ในกรณีของ Pie จะไม่แสดงถึงแม้จะใส่ค่าลงไปก็ตาม)
- Tooltip Suffix คือ หน่วยของข้อมูล เช่น เซนติเมตร กิโลเมตร คน ครั้ง ฯลฯ ที่จะปรากฏขึ้นเมื่อ คลิ๊ก เพื่อดูข้อมูลในกราฟ
- Chart Height (leave empty for default) คือ ความสูงของ Chart เหมาะหมากๆสำหรับการแสดงผลที่อาจต้องจำกัดความสูง
- Change Chart Colors? ปกติส่วนนี้จะไม่แสดง แต่สามารถเปิดให้แสดงได้โดยการกดที่ Change Chart Colors เพื่อทำการเปลี่ยนที่ของข้อมูลแต่ละชุดใน Chart วิธีการเปลี่ยนสีทำได้ง่ายๆโดยการกด v หลังจากนั้นเลือกสีจาก Color Picker แล้วกด Select เพียงเท่านี้สีก็จะเปลี่ยนของข้อมูลแต่ละชุดก็จะเปลี่ยนไปทันที (จากภาพจะเห็นว่ามีสีให้เลือกได้ทั้งหมด 10 ชุด นั่นหมายความว่า ชุดข้อมูลไม่ควรเกิน 10 ชุดเพื่อหลีกเลี่ยงสีซ้ำกันนั่นเอง)
Step 2: Add Chart Data (clear data x)ขั้นที่ 2 เป็นขั้นตอนสำหรับการป้อนข้อมูลลงใน RJ QuickCharts เพื่อให้ RJ QuickCharts ทำการสร้าง Chart ตามที่เราต้องการ โดยในขั้นตอนนนี้ RJ QuickCharts จะทำการ Pre-Load ข้อมูลตัวอย่างมาให้เราก่อน โดย Chart แบบ Line และ Bar จะมีตารางชุดข้อมูลเหมือนกัน ที่แตกต่างก็จะมีเพียง Pie ดังภาพ โดยตารางชุดข้อมูลจะเปลี่ยนตามที่เราเลือก Type of Chart นั่นเอง
ภาพตารางชุดข้อมูล ของ Chart แบบ Line และ Bar
ภาพตารางชุดข้อมูล ของ Chart แบบ Pie
ทั้งนี้ หากผู้ใช้ต้องการล้างข้อมูลทั้งหมดสามารถทำได้โดย กดที่ clear data x ที่อยู่ในวงเล็บหลัง Step 2: Add Chart Data หลังจากนั้นก็จะปรากฏตารางว่างๆ ผู้ใช้สามารถกรอกข้อมูลได้ตามต้องการ
Step 3: Preview
ขั้นตอนที่ 3 เป็นขั้นตอนที่ไม่มีอะไรมากครับเมื่อเราทำขั้น ที่ 1 และ 2 ผลก็จะมาปรากฏที่ขึ้นตอนที่ 3 นี้ทันที มีนิดเดียวหากต้องการ Screen Shot ของ Chart ที่เราสร้างให้มีขนาดเล็กหรือใหญ่ เราสามารถปรับได้โดยการลากเมาส์ที่มุมขาวล่างเพื่อปรับขนาด แต่ทั้งนี้จะไม่เกี่ยวกับขนาดของ Chart ที่เรากำหนดแล้วในขั้นที่ 1
Step 4: Finish
ขั้นตอนที่ 4 เป็นขั้นตอนสุดท้าย เมื่อทำการปรับแต่ง Chart และตรวจสอบความถูกต้องของ Chart แล้ว ก็ให้ทำการ Save Chart แต่ถ้าหากต้องการ Screenshot ก็ให้ คลิ๊กที่ Screenshot Chart ระบบจะทำการสร้างรูปตัวอย่าง Chart ให้แล้วเปิดใน Tab ใหม่ เราเพียงแต่ตามไป Save แล้วเอามาใช้งานได้ทันที ในขั้นตอนนี้ให้เรา คลิ๊กที่ Save Chart เพื่อเตรียมเอาไปใช้งานต่อไป
การนำ Chart ไปใช้งาน
เมื่อสร้าง Chart และทำการ บันทึก เรียบร้อยแล้ว ขั้นต่อไปเรามาดูวิธีการใช้งาน Chart ที่เราสร้างขึ้นกันครับ ซึ่งสามารถทำได้ดังนี้
1.สร้าง Post หรือ page ขึ้นมาใหม่ หรือจะทำการเปิด post หรือ page เดิมมาเพื่อแก้ไขก็ได้ ผมขอยกตัวอย่างเป็นการสร้าง Post ใหม่นะครับ หลังจากนั้นก็พิมพ์ ข้อมูลต่างๆลงใน Post หรือ Page ตามต้องการ
2.กด Add Media เพื่อเริ่มทำการเพิ่ม Chart ก็จะพบกับหน้าจัดการ Media ของ WordPress ดังภาพ ให้เรา คลิ๊กที่ Insert Quickcharts หลังจากนั้นเลือก Chart ที่ต้องการ ที่จะใส่ใน Post หรือ Page โดยการกด Insert โดย Chart ที่เลือกก็จะไปปรากฏใน Post หรือ Page ในรูปแบบของ Short Code
เมื่อกลับมาที่การหน้าของการจัดการ Post หรือเพจก็จะพบกับ Short Code ที่เพิ่มเข้ามาดังภาพ
เพียงเท่านี้ก็เรียบร้อยแล้วสำหรับการใช้งาน RJ QuickCharts ในเบื้องต้น ครั้งหน้า มารู้จักกับวิธีการใช้งาน Visualizer: Charts and Graphs กันบ้างนะครับ
ปัญหากับภาษาไทย
เช่นเดียวกับ Plugin ทุกตัวที่ต้องทำการ Download ติดตั้งและ Activate ให้เรียบร้อยก่อน หลังจากนั้นเข้าใช้จากเมนู RJ Quickchart ไปที่ New Chart เพื่อสร้าง Chart ใหม่
การทดสอบจากการทดสอบพบว่า Rj QuickCharts นั้นรองรับการป้อนค่าต่างๆ เป็นภาษาไทย และแสดงผลได้อย่างถูกต้อง สวยงาม
แต่เมื่อเราทำการบันทึก Chart ที่ได้สร้างขึ้นกลับผมว่า การบันทึกส่งผลให้ภาษาไทยที่แก้นั้นเป็น เครื่องหมาย ???? ไปในทันที
และเมื่อเปิด Chart เพื่อแก้ไขอีกครั้งก็พบว่าภาษาไทยยังมีปัญหาอยู่
จากการสังเกตก็จะพบว่าภาษาไทยนั้นผิดเพี้ยนหลังจากการบันทึก และผู้ต้องสงสัยครั้งนี้ก็น่าจะเป็น ฐานข้อมูลนั่นเอง เมื่อเข้าไปตรวจสอบฐานข้อมูลด้วย PHPMyAdmin ก็จะพบว่าข้อมูลในฐานข้อมูลเป็นเครื่องหมาย ?????? ดังในภาพ
เมื่อเข้าไปดูโครงสร้างของตารางก็พบว่า Collation ของตาราง wp_rj_quickcharts เป็น latin1_swedish_ci ดังภาพซึ่งนี่น่าจะเป็นต้นตอของปัญหา (ลองเปรียบเทียบกับตารางอื่นๆ จะพบว่าไม่เหมือนใคร …..)
การแก้ปัญหาการแก้ปัญหานี้ทำได้ง่ายๆ โดยการเปลี่ยน Collation ของ Table ก่อนหลังจากนั้นค่อยเปลี่ยน Collation ของ Field อีกที ดังนี้(ผมเลือกใช้ PHPMySQL ในการดำเนินการทั้งหมด)
- การเปลี่ยน Collation ของ Table เลือก Table wp_rj_quickcharts หลังจากนั้นคลิก Tab Operation ก็จะพบกับหน้าต่างมากมาย และหนึ่งในนั้นคือ Table options สังเกตตรง Collation ยังเป็น latin1_swedish_ci อยู่ ทำการเลือก Collation ใหม่ จาก latin1_swedish_ci เป็น utf8mb4_unicode_ci ง่ายๆครับ อันสุดท้าย แล้วกด Go เพื่อเปลี่ยนได้เลย
ตัวอย่าง
หรือใครจะใช้ SQL Command ก็ได้นะครับ
ยังไม่เสร็จเพียงเท่านี้ครับ เราจะต้องเปลี่ยน Collation ในระดับ Field ด้วย โดยไปที่ Tab Structure ของ Table wp_rj_quickcharts แล้วเลือก(ติ๊กถูก)หน้า Field ที่มี Collation ทั้งหมด (3-8, 10-12)
หลังจากนั้นเปลี่ยน Collation ทุก Field เป็น utf8mb4_unicode_ci แล้วกด Go เพื่อเปลี่ยนทุก field หลังจากนั้น Restart MySQL SERVER 1 ครั้งแล้วลองกลับไปใช้ Rj QuickCharts อีกครั้งดูว่าสามารถแก้ปัญหาเรื่องภาษาไทยได้หรือไม่
เท่านี้ก็น่าจะเรียบร้อยสำหรับการแก้ไขให้ Rj QuickCharts รองรับภาษาไทย สำหรับใครที่ไม่รีบใช้อาจจะรอ Version ถัดไปก็ได้นะครับเพราะผมได้แจ้งไปยัง Support แล้ว เมื่อผู้พัฒนาทราบแล้วก็สุดแต่ผู้พัฒนาจะพิจารณาละครับ
