Skip to main content
สร้างรายงานกราฟอย่างง่าย ๆ ด้วย C3js JavaScript Chart Library

สร้างรายงานรูปแบบกราฟ อย่าง ง่าย ๆ ด้วย C3js Javascript chart library

สวัสดีครับ ในบทความนี้เราจะมาแนะนำการ สร้าง รายงานในรูปแบบ กราฟ อย่าง ง่าย ๆ ด้วย  C3js Javascript chart library ซึ่งมีความสามารถในการสร้างกราฟได้หลายรูปแบบ และสามารถใช้งานได้ฟรีครับ

การใช้งานสร้างกราฟด้วย c3js

ก่อนอื่น เราไปที่ web site ของผู้พัฒนากันก่อนเลยครับ  C3.js D3-based reusable chart library

สำหรับ ตัวอย่างการใช้งาน (Examples) และ เอกสารประกอบการใช้งาน (Reference)  นั้นทางผู้พัฒนา C3js ได้ทำไว้ค่อนข้างละเอียดมากครับ แต่หากใครที่ดูแล้วยังไม่เข้าใจ หรือ สำหรับมือใหม่ที่ยังไม่คุ้นเคยในการเขียนโปรแกรม   ในบทความนี้ทางเราจะนำเสนอการใช้งานเบื้องต้น และ ตัวอย่างการใช้งานบางส่วนครับ

การเริ่มต้นใช้งาน C3Js

ก่อนอื่นก็ต้องมีการนำเข้าไฟล์ Css และ Js ของ C3js เข้ามาใช้งานก่อน

1.นำเข้าไฟล์ c3.css

2.นำเข้าไฟล์  d3.v3.min.js และ c3.js

3.สร้าง tag div ที่กำหนด id มีชื่อว่า chart ไว้สำหรับการแสดงผล chart ที่ tag นี้

4.เขียนคำสั่ง JavaScript เรียกใช้งาน function generate()  เพื่อใช้งาน c3js

ตัวอย่างการแสดงผล

การปรับแต่งรูปแบบและการแสดงผลของ C3js  ( Customize Chart )

การปรับแต่ง Customize  C3js นั้น สามารถปรับแต่ง รูปแบบกราฟ ได้หลากหลายรูปแบบครับ เช่น รูปแบบกราฟ barChart,LineChart,PieChare  หรือ ปรับแต่งสีของ Chart เป็นต้น

การปรับแต่งรูปแบบของ Chart  (Chart Type)
C3js มี รูปแบบของ Chart ดังนี้

  • line
  • spline
  • step
  • area
  • area-spline
  • area-step
  • bar
  • scatter
  • pie
  • donut
  • gauge

ตัวอย่างการใช้งาน เพียงแค่ระบุ type ตามด้วยชื่อของ Type ที่ต้องการ

การกำหนดสีให้กับ Chart ตัวอย่างการใช้งาน

การกำหนดข้อความ ให้กับ Chart

ตัวอย่างการแสดงผล

 

สำหรับ C3Js มี Options ให้ปรับแต่งได้มากมาย สามารถศึกษาเพิ่มเติมได้ที่  http://c3js.org/reference.html

การแสดงข้อมูล Chart จาก PHP  และ  ฐานข้อมูล MySQL

ก่อนอื่นเรามาสร้าง ฐานข้อมูล demo และมีตารางชื่อ sale_summary

สร้างไฟล์ simple.php  เขียนโปรแกรม Select ข้อมูลมาจากฐานข้อมูล จากนั้น แปลงค่าด้วย คำสั่ง json_encode และ นำค่าที่ได้ไปแสดงผลด้วย c3js

ตัวอย่างการแสดงผล

Download Demo Code