วันพุธที่ 11 มกราคม พ.ศ. 2560

สร้าง 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

ไม่มีความคิดเห็น:

แสดงความคิดเห็น