สร้าง Graph หรือ Chart โดยใช้ข้อมูลจาก database ด้วยภาษา PHP

จะกล่าวถึงการสร้าง Graph  หรือ Chart โดยการดึงข้อมูลจาก Database โดยใช้ภาษา PHP ในการดึง  การเขียน Graph หรือ Chart โดยการดึงข้อมูลจาก Database ควรศึกษาการสร้าง Graph หรือ Chart เบื้องต้นจาก http://www.itfinities.com/?p=2361  , http://www.itfinities.com/?p=2283

และความรู้ ภาษาPHP เพื่อให้รู้จักหลักการเขียนและคำสั่งเบื้องต้นต่างๆก่อน

ขั้นตอนแรกคือการเตรียมไฟล์ต่างให้เรียบร้อย

กรอบสีดำ คือ folder เก็บไฟล์ javascript ต่างไว้

กรอบสีเขียว คือ index.html ไฟล์ที่จะแสดงกราฟ

กรอบสีฟ้า คือไฟล์ PHP ที่เขียนโค้ดดึงข้อมูลจาก Database

กรอบสีส้ม คือไฟล์ PHP ที่เขียนโค้ดเชื่อมต่อกับ Database

ขั้นตอนต่อไปการเตรียมข้อมูลใน Database  ชุดข้อมูลในรูปข้างต้นคือชุดข้อมูลที่สมมุติขึ้นมา คือข้อมูลตารางคะแนนฟุตบอลพรีเมียร์ลีกฤดูกาลที่2014-2016

ขั้นตอนต่อมา ให้เปิดไฟล์ Data.php ที่เราเตรียมไว้เพื่อจะทำการเขียนโค้ดเพื่อดึงข้อมูลจาก Database

จากรูปข้างบน โค้ดชุดนี้อยู่ในไฟล์ Data.php เป็นโค้ดที่ดึงข้อมูลจากตารางคะแนนฟุตบอลพรีเมียร์ที่เราเตรียมไว้

กรอบสีขาว คือ คำสั่ง sql ในการดึงชุดข้อมูลที่เราเตรียมไว้

กรอบสีเขียว คือคำสั่ง ในการเช็คว่าคำสั่ง sql ที่เราเขียนทำการเชื่อต่อกับ Database ได้หรือไม่ถ้าไม่ได้ให้แสดงคำว่า Error และหยุดการทำงาน

กรอบสีเหลือง คือคำสั่งในการส้รางตัวแปร Array และนำชุดข้อมูลที่เราดึงมาจาก Database มาเก็บไว้ในตัวแปร Array ที่เราสร้างไว้

กรอบสีส้ม คือคำสั่งในเปลี่ยนข้อมูลที่เราเก็บไว้ในตัวแปร Array ให้อยู่ในรูปแบบ JSON

จากรูปข้างบน คือข้อมูลที่เราดึงมาจาก Database ในรูปแบบ JSON

ขั้นตอนต่อไปคือการเขียนโค้ด ในไฟล์ javascript Graph.js ที่อยู่ใน folder Js เราจะทำการเขียนโค้ดให้อ่านชุดข้อมูลที่เราดึงมาจากDatabase ในรูปบบ JSON

จากรูปข้างบน คือชุดคำสั่ง javascript ที่ทำการอ่านชุดข้อมูล JSON จากไฟล์ Data.php

กรอบสีน้ำเงิน url ที่อ่านชุดข้อมูลจาก Database 

กรอบเขียว คือ ชุดคำสั่งที่เช็คว่ามีข้อมูล JSON หรือไม่ถ้าใช่ให้ แสดงข้อมูลนั้น

กรอบสีชมพู คือ ชุดคำสั่งต่อจากกรอบสีเขียว ถ้าไม่ใช่ให้ แสดง Error

ขั้นตอนต่อไปให้เปิดไฟล์ index.html เพื่อเขียนโค้ดให้เราสามารถตรวจเช็คว่า ไฟล์ Graph.js ได้ทำการอ่านข้อมูลจาก ไฟล์ data.php มาได้หรือไม่ 

กรอบสีขาว การเปิดแท็กCss เพื่อเขียนภาษา Css ใน ไฟล์HTML โค้ดส่วนนี้คือการกำหนด ขนาดของกราฟที่จะแสดงออกมา

กรอบสีส้ม เรียกใช้ไฟล์ javascript ต่างในfolder Js

กรอบสีเหลือง คือโค้ด HTML  แท็กต่างๆที่มี  แท็ก  ID mycanvas คือ เชื่อมโยงกับโค้ด javascript ในไฟล์ .Graphjs เพื่อเรียกให้ กราฟมาแสดงภายใต้แท็ก ID mycanvas

กรอบสีเขียว เรียกใช้ไฟล์ Graph.js

ต่อไปคือขั้นตอนการสรวจสอบว่า ไฟล์ Graph.js ที่ให้เขียนนั้น สามารถอ่านข้อมูลแบบ JSON มาจากไฟล์ data.php มาได้หรือไม

เปิด Google chrome ขึ้นมาและเข้ามาเข้าไปที่ url ของไฟล์ index.html ที่เราเขียนไว้ ยกอย่าง http://localhost/GraphPHP/index.html เป็นต้น และทำการคลิ้กขวากดเข้าไปที่คำว่าตรวจสอบ

พอเราคลิ้กที่คำว่าตรวจสอบก็จะได้ยังรูปข้างบน

กรอบสีเขียว คือ แถบที่จะแสดงว่ามีข้อมูลมาหรือไม่ 

กรอบสีน้ำเงิน คือ ข้อมูลที่เราได้มาจากการเขียนโค้ดในไฟล์ Graph.js ให้ไปอ่านข้อมูลจาก ไฟล์ data.php

พอเราตรวจสอบชุดข้อมูลที่ได้รับมาว่าถูกต้องแล้วให้เรากลับไปที่ไฟล์  Graph.js เพื่อเขียนโค้ดจัดการชุดข้อมูลที่ได้มาให้ไปอยู่ในชุดข้อมูลของโครงสร้างของ Graph

กรอบสีเขียว คือ โค้ดชุดเดิมที่เคยบอกไปในข้างต้นแล้วว่าคือการ อ่านชุดข้อมูลจากไฟล์ data.php

กรอบสีขาว คือ มีความสำคัญมากคือโค้ดชุดคำสั่งในการจัดการ ชุดข้อมูลที่เราได้มาจากไฟล์ 

data.php นำเอามาเก็บในตัวแปรที่เราสร้างไว้ 

var score1 = [];
var score2 = [];
var score3 = [];
var name_team = [];

คือตัวแปรที่เราจะนำชุดข้อมูลมาเก็บไว้ 

for(var i in data) {
name_team.push(data[i].name_team);
score1.push(data[i].score2014);
score2.push(data[i].score2015);
score3.push(data[i].score2016);
}

คือโค้ดในการนำชุดข้อมูลเข้าไปเก็บในตัวแปรที่เราสร้างไว้

กรอบสีส้ม คือชุดโค้ดที่จัดการข้อมูลในโครงสร้างกราฟ อ่านเพิ่มเติมได้ที่ http://www.itfinities.com/?p=2361

กรอบสีน้ำเงิน คือ การนำชุดข้อมูลที่เราได้มาจาก Database และนำมาเก็บในตัวแปรในโค้ดกรอบขาวมาแสดงในโครงสร้างของกราฟ 

กรอบสีฟ้า คือ ตัวแปรที่เก็บค่า ID ในแท็ก HTML ที่จะเรียกโค้ด javascript ไปแสดง

 และคือการเรียกใช้ฟังก์ชั่น Chart จาก ไฟล์ Chart.min.js  ส่วนช่วง  

type: 'line'  คือโค้ดเลือกประเภทของกราฟที่จะแสดง

และนี้คือ Graph line ที่แสดงข้อมูลที่เราได้มาจาก Database