การสร้าง Graph หรือ Chart ชนิดต่างๆ

จากที่เรามี folder project ที่ติดตั้ง Chart.Js และ jQuery เสร็จเรียบร้อยแล้ว ให้สร้างไฟล์ที่ตั้งชื่ออะไรมาก็ได้หนึ่งไฟล์ที่มีนามสกุลเป็น js นำเข้าไปอยู่ใน folder Js ใน folder project ตามตัวอย่างจะตั้งชื่อว่า EXbar.js

และทำการเปิดไฟล์ที่เราสร้างใหม่ขึ้นมา

ขั้นตอนต่อจากนี้คือการเขียนโค้ด javascript เพื่อ แสดง Graph หรือ Chart ตามที่เราต้องการ

ตัวอย่าง โค้ด javascript ที่กำลังจะเขียนคือโค้ดแสดง Graph bar แสดง ยอดขายต่อปี

ตามเป้า เขียนในไฟล์ EXbar.js

จากรูปข้างบนคือโค้ด เขียนในไฟล์ EXbar.js โดยใช้ภาษา javascript

กรอบสีขาวคือโครงสร้างข้อมูล ตามโครงสร้างของกราฟแต่ละประเภท ในตัวอย่างจะเป็นโครงสร้างข้อมูลของกราฟแท่ง

กรอบสีฟ้า ตามโครงสร้างของกราฟแท่ง ตัวแปร จะเก็บข้อมูลของแกนแนวนอน

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

กรอบสีชมพู ตามโครงสร้างของกราฟแท่งตัวแปร จะเก็บชุดข้อมูล

กรอบสีส้ม ตามโครงสร้างของกราฟแท่งตัวแปร จะสีที่จะแสดงในกราฟ

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

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

type: 'bar'  คือโค้ดเลือกประเภทของกราฟ เช่น

กราฟแท่ง = type: 'bar',

กราฟเส้น =type: 'line',

กราฟวงกลม = type: 'pic',

กราฟเรด้า = type: 'radar'

data: chartdata คือโค้ดที่เรียกตัวแปรโครงสร้างข้อมูลของกราฟที่เราเขียนไว้ข้างต้นมาใช้ในกราฟที่เราเลือกประเภทแล้ว

จากรูปข้างบนคือโค้ด เขียนในไฟล์ index.html โดยใช้ภาษา HTML + Css

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

กรอบสีเขียว คือโค้ด HTML  แท็กต่างๆที่มี ID หนดไว้หมด เช่น ID cahrt-tainer แท็กที่อยู่ในภายใต้ ID cahrt-tainer จะมีขนาด ตามที่โค้ด Cssกำหนด  ID mycanvas คือ เชื่อมโยงกับโค้ด javascript ในไฟล์ EXbar.js เพื่อเรียกให้ กราฟมาแสดงภายใต้แท็ก ID mycanvas

กรอบสีเหลือง เรียกใช้ไฟล์ EXbar.js

กรอบสีฟ้า คือ ส่วนแกนแนวนอนของกราฟ เชื่อมโยงกับ ส่วนของโค้ดjavascript ในไฟล์ EXbar.js

labels: ["2556, 2557"],

กรอบสีน้ำเงิน คือ ส่วนของคำอธิบายของกราฟ เชื่อมโยงกับ ส่วนของโค้ดjavascript ในไฟล์ EXbar.js

labels : 'ผลประกอบการ',

กรอบสีส้ม คือ ส่วนของชุดข้อมูล เชื่อมโยงกับ ส่วนของโค้ดjavascript ในไฟล์ EXbar.js

backgroundColor: 'rgba(0, 0, 205, 1)',
borderColor: 'rgba(0, 0, 255, 0)',
hoverBackgroundColor: 'rgba(0, 0, 205, 1)',
hoverBorderColor: 'rgba(0, 0, 255, 0)',

กรอบสีชมพู คือ ส่วนแสดงข้อมูล เชื่อมโยงกับ ส่วนของโค้ดjavascript ในไฟล์ EXbar.js

data: [10000000, 12000000]

ทำการศึกษาเพิ่มเติมได้ที่  http://www.chartjs.org/docs/