แจกของฟรี

 Visualizer: Charts and Graphs นั้นมีข้อดีและข้อด้อยกว่า RJ QuickCharts พอสมควร แต่ต้องยอมรับอย่างนึงสำหรับผมคือการใช้งานที่ค่อนข้างง่าย

เริ่มใช้งาน
การใช้งาน Visualizer: Charts and Graphs (ต่อไปนี้ขอเรียกสั้นๆว่า Visualizer นะครับ) นั้นจะแตกต่างกับ RJ QuickCharts ตรงที่ Visualizer นั้นจะมองว่า Chart ทุกๆ อันจะเป็น Media หากต้องการสร้างหรือจัดการจะต้องจัดการผ่าน Menu Media ในหน้าจัดการระบบของ WordPress ดังภาพ

ก่อนอื่นต้องแจ้งทุกท่านก่อนนะครับว่า Visualization นั้นจะต้องมีไฟล์ CSV เพื่อเป็นแหล่งข้อมูล ไฟล์ CSV หรือ Comma Separated Values (CSV) คือ รูปแบบไฟล์ข้อความที่คุณสามารถใช้แลกเปลี่ยนข้อมูลจากสเปร็ดชีต(Excel, Numbers, Sheet) ระหว่างแอ็พพลิเคชัน แต่ละบรรทัดในไฟล์ Text CSV แทนแถว ในสเปร็ดชีต แต่ละเซลล์ในแถวสเปร็ดชีตโดยปกติ ถูกคั่นด้วยเครื่องหมายจุลภาค ( , ) อย่างไรก็ตาม คุณสามารถใช้อักขระอื่นคั่น ฟิลด์ได้ เช่นอักขระตาราง ที่มา ซึ่ง หากอยากรู้ว่าเนื้อหาในไฟล์เป็นอย่างไรสามารถใช้ text editor ทั่วไปเปิดดูได้ครับ จากภาพเป็นการเปิด File CSV โดย Application Sublime หรือหากต้องการเห็นภาพชัดๆเข้าใจง่ายๆ ก็ใช้ Application พวกสเปร็ดชีตเช่น Excel, Numbers, Sheet เปิดเพื่อดูหรือแก้ไขก็ได้ได้ครับ
 
มาเริ่มต้นการใช้งานสักทีครับ โดยเริ่มจาก ไปที่ Menu Dashboard –> Media –> Visualizer Library หลังจากนั้นก็จะผมกับส่วนจัดการ Chart โดย Chart ที่แสดงทั้งหมด คือ Chart ที่เคยสร้างแล้วในระบบ โดยหากต้องการเริ่มสร้าง Chart ใหม่ก็ให้กด Add New และแถบด้านล่างคือชนิดชอง Chart เพื่อใช้ในการกรอง(Filter) ว่า Chart แต่ละชนิดที่เราเคยสร้างมีอะไรบ้าง มาลองสร้างสัก Chart กันดีกว่าครับ กด Add New กันเลย

 
หลังจากนั้นก็จะพบกับ หน้าต่างในการสร้าง Chart ใหม่ ให้เราทำการเลือกชนิดของ Chart ให้เหมาะสมกับการแสดงข้อมูลที่เรามีนะครับ ในขั้นตอนนี้หากยังไม่มีข้อมูลจริงๆ สามารถเลือกไปก่อนแล้วไปใช้ข้อมูลที่ Visualizer เตรียมไว้ให้ก็ได้ครับ หลังจากนั้นกด Next  แต่ถ้าหากไม่ต้องการสร้าง Chart แล้วกด กากบาทที่มุมขวาบน เพื่อออกจากหน้าต่างการสร้าง Chart ครับ แต่เราจะทดลองใช้ เลือกรูปแบบ Chart กด Next เลยครับ

หลังจากนั้นก็จะพบกับหน้าที่จะแสดงตัวอย่างของ Chart ที่มีการนำเข้าข้อมูลตัวอย่างไว้แล้ว หลังจากนั้นกด line.csv เพื่อดาวน์โหลดไฟล์ตัวอย่าง แล้วนำไปแก้ไขด้วย Text editor หรือ Application พวกสเปร็ดชีตก็ได้
ตัวอย่างข้อมูลเดิมจากไฟล์ line.csv

ตัวอย่างข้อมูลใหม่ที่แก้ไขแล้วใน texeditor จากไฟล์ line.csv

เมื่อแก้ไขไฟล์เสร็จแล้ว หลังจากนั้นกด From Compter หรือ From Web เพื่อนำเข้าข้อมูลจาก ไฟล์ CSV

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

แถบทางด้านขวาที่ใช้ปรับแต่คุณสมบัติของ chart (ขอไม่อธิบายนะครับเพราะ chart แต่ละชนิดมีการปรับแต่งแตกต่างกัน) หลังจากนั้นกด Creat Chart ด้านล่างเพื่อทำการสร้าง chart

การนำ chart ไปใช้งาน
การนำ chart ไปใช้งานสามารถทำได้ง่ายๆ โดยการคัดลอก visualization id ของ chart ที่ต้องการใช้
หลังจากนั้นสร้าง post หรือ page ใหม่หรือจะเปิด post หรือ page เดิมมาเพื่อแก้ไขก้ได้ และ visualization id ที่คัดลอกมาไปวางในตำแหน่งที่ต้องการ เช่นเดียวกับการเขียนบทความปกติ

เพียงเท่านี้ chart ก็จะมาแสดงใน post ได้อย่างสวยงามแล้วครับ

 
บทความนี้มหากาพย์มากครับ เพราะช่วงที่กำลังเขียน Draft อยู่ Plugin มีการอัพเดท แล้วปัญหาคือเวอร์ชั่นใหม่ไม่สามารถอัพโหลดไฟล์ได้เลยต้องรอผู้พัฒนาอัพเดท ตอนนี้ Bug อีกตัวที่เจอคือไม่สามารถดึงข้อมูลจากได้ หากได้รับการแก้ไขแล้วเดี๋ยวจะมาเขียนให้อ่านกันอีกนะครับ
ปล.มี Version Pro ด้วยนะครับใครอยากจะสนับสนุนผู้พัฒนาก็ลองไปดูข้อมูลได้ครับ ที่ http://themeisle.com/plugins/visualizer-charts-and-graphs-pro-addon/




ที่มา: http://clpark.rmuti.ac.th/suthep/ideas/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99-visualizer-charts-and-graphs-%E0%B9%80%E0%B8%9A%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%95%E0%B9%89%E0%B8%99