การแสดงผลกราฟจากข้อมูลแบบ JSON ด้วย jQWidgets

wave
มานพ กองอุ่น 2 พ.ค. 2016 17:21:05 8,236

การแสดงข้อมูลแบบ JSON นิยมในการสร้างข้อมูลเพื่อทำกราฟ หรือแม้แต่การทำ Web Service ในที่นี้จะเป็นการแสดงข้อมูลแบบ JSON เพื่อส่งให้ jqWidgets นำไปแสดงผลเป็นกราฟ โดยสร้าง action Json() เพื่อแสดงผลข้อมูลดังนี้

เมื่อเรียก URL mycontroller/json ก็จะปรากฏข้อมูลดังนี้

{"data":[{"money":"30000","acc_type":"\u0e23\u0e31\u0e1a"},{"money":"5735","acc_type":"\u0e08\u0e48\u0e32\u0e22"}]}

 

การสร้างกราฟด้วย jQWidgets

jQWidgets เป็น JavaScript Library ที่รวบรวมการแสดงผลต่างๆ หนึ่งในนั้นคือกราฟ โดยการแสดงผลกราฟนั้นก็มีมากมายหลายรูปแบบ รูปแบบหนึ่งที่น่าสนใจนั่นก็คือการแสดงกราฟแบบวงกลม หรือแบบ Pie นั่นเอง

                สิ่งที่น่าสนใจของ jQWidgets นั่นเป็นเรื่องของการดึงข้อมูลแบบ JSON มาแสดงเป็นกราฟ โดยเมื่อเราเตรียมข้อมูลแบบ JSON ใน action หนึ่งแล้ว เราสามารถเรียก URL เพื่อนำข้อมูลนั้นมาแสดงได้ทันที

สามารถดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.jqwidgets.com/

ในส่วนของ Controller ทดลองสร้าง Action ใหม่ใน protected/Controllers/SiteController.php สร้าง actionChart()

ในส่วนของ View สร้างไฟล์ protected/views/site/chart.php โดยให้มีข้อมูลดังนี้

เมื่อเรียก URL เพื่อแสดงผล site/chart จะได้การแสดงผลดังนี้

 

 

 

 

 

 

 

 

 

 

 

 


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 8,236
  • รักเลย 0
  • หมวดหมู่ Tip Yii Framework (Yii1)
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags yii
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009

เนื้อหาที่เกี่ยวข้อง