Skip to main content

การใช้งาน Highcharts JS With PHP MySQL

Highcharts JS  เป็น JavaScript library สำหรับสร้าง Chart ในรูปแบบต่าง ๆ โดยสามารถใช้ได้ฟรี เฉพาะกับโปรเจ็คส่วนบุคคล

ในบทความนี้ เราจะแนะนำการใช้งาน Highchart แสดงข้อมูล โดยนำข้อมูลจากฐานข้อมูล MySQL มาแสดงผลบนหน้าเว็บ ในรูปแบบ Chart ต่าง ๆ

1.Chart แบบ Data defined in a HTML table  โดยจะนำข้อมูลจาก table มาแสดงเป็น กราฟ ซึ่งอันนี้ค่อนข้างสะดวกครับ เพราะว่าข้อมูลใน Table เป็นอย่างไร ก็จะนำมาแสดงเป็น Graph ให้อัตโนมัติ

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

 

2.การแสดงข้อมูลในตารางจากฐานข้อมูล MySQL เราเพียงแค่ แสดงข้อมูลใน Table ตัว Highchart ก็จะแสดงข้อมูลเป็น Graph ให้ อัตโนมัติ แต่ต้องกำหนดรูปแบบข้อมูลให้ตรงกับรูปแบบของข้อมูลตัวอย่างครับ

ตัวอย่าง สร้างฐานข้อมูลชื่อ demo สร้างตาราง ชื่อ chart มีข้อมูลดังนี้

 

ตัวอย่าง ไฟล์ table_chart.php

ตัวอย่างการแสดงผลข้อมูล Graph จากฐานข้อมูล MySQL

 

3.การแสดงขอมูลในรูปแบบ Graph วงกลม pie Chart

 

ตัวอย่างไฟล์ data.php

ตัวอย่างไฟล์ pie_chart.php

 

ในตัวอย่างจะเป็นดึงข้อมูลจากไฟล์ data.php ซึ่งมีการดึงข้อมูลจากฐานข้อมูล และ ส่งกลับมาเป็น รูปแบบ Json Object ด้วย Jquery Function getJSON และ นำข้อมูล มาเก็บไว้ในตัวแปร seriesData จากนั้น function ของ highcharts จะนำค่าของ ตัวแปร seriesData ไปแสดงผลในรูปแบบ Pie Chart

หวังว่าคงเป็นประโยชน์สำหรับผู้ที่ต้องการแสดงข้อมูลในรูปแบบ Chart ต่าง ๆ ครับ สำหรับ  Highcharts นั้น มี กราฟในรูปแบบต่าง ๆ มากมายครับ ในบทความนี้เป็นเพียงแค่ตัวอย่างบางส่วนเท่านั้นครับ

SourceCode Download