การติดตั้ง framework ที่ช่วยในการสร้าง Graph หรือ Chart

การแสดงผลชุดข้อมูลให้ออกมาอยู่ในรูปแบบของ Graph หรือ Chart บน  web application ในปัจจุบันนั้น มีเครื่องมือ หรือเฟรมเวิร์ค มากมายให้เลือกใช้งาน ซึ่งสำหรับการเลือกใช้งานก็แล้วแต่ความเหมาะสมกับเครื่องมือ เทคโนโลยี ของเว็บนั้นๆ หรืออาจจะแล้วแต่ความถนัดของผู้พัฒนาเอง

      สำหรับบทความนี้จะยกตัวอย่างการติดตั้ง JavaScript framework มาสามตัวอย่างคือ Chart.Js

   1 . Chart.Js 

ขั้นตอนแรกให้เข้าไป http://jquery.com/download/   เพื่อ Download ตัว jQuery มาเพื่อช่วยให้เราเขียน JavaScript ได้ง่ายขึ้น

ขั้นตอนต่อมาให้เข้าไป Download ตัว Chart.Js  http://www.chartjs.org/docs/#getting-started-download-chart-js   และคลิ้กที่ Chart.js on GitHub

ขั้นตอนต่อมาพอเข้ามาถึงหน้า GitHub ให้เลื่อน Scroll bar ลงก็จะเห็นคำว่า Download ให้คลิ้กเลือก ไฟล์ชื่อว่า Chart.min.js

ขั้นตอนต่อมาพอท่านได้ทั้ง 2 ไฟล์มาแล้วก็มาถึงขั้นตอนการติดตั้งไฟล์ลงใน project นำไฟล์ที่เรา Download ทั้งนำไปไว้ใน folder project ของท่าน เช่น projectของผมชื่อว่า GraphJs เป็นต้น

ขั้นตอนต่อมานำทั้ง2ไฟล์เก็บในfolder ชื่อว่า Js เพื่อไม่ทำให้สับสนกับไฟล์นามสกุลอื่นๆ

ขั้นตอนต่อมาคือขั้นตอนการเรียนใช้งาน ไฟล์ JavaScript ทั้ง2ไฟล์ ขั้นนี้จะยกตัวอย่างการเรียกมาใช้ในไฟล์index.html  เปิดไฟล์ index.html ขึ้น

ทำการเรียกใช้งานทั้ง2ไฟล์โดยการเขียนโค้ด Include แบบ src path  เช่นจะเขียนตามการเก็บไฟล์ไว้

<script type ="text/javascript" src="Js/jquery-3.1.0.min.js"></script>
<script type ="text/javascript" src="Js/Chart.min.js"></script>

จะเห็นว่า src = "" ในเครื่องหมาย "" ให้เราเขียนตำแหน่งที่เราเก็บไฟล์ไว้ จากขั้นตอนข้างต้นที่เราทำมาจะเห็นได้ว่าเราเก็บไฟล์ไว้ที่ folder Js

ทั้งหมดคือการติดตั้งและเรียกใช้ JavaScript Chart.Js

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

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

การตั้งค่าให้ Zabbix แสดงจำนวนวัน uptime ของระบบที่ Monitor

จากที่เคยติดตั้ง Zabbix เพื่อใช้งานเป็นปกติอยู่แล้ว ซึ่งระบบก็จะมีการแจ้งเตือนและสามารถมอนิเตอร์อะไรหลาย ๆ อย่างได้อยู่แล้ว
จนมาถึงวันที่มีคำถามว่า ระบบที่ใช้งานอยู่มี Uptime เป็นอย่างไรบ้าง จึงทำให้เกิดบทความนี้ครับ

ปกติ Zabbix จะมี Templete ของ OS, Service หรือ อุปกรณ์ต่าง ๆ อยู่แล้ว เพียงแต่ว่าไม่ได้จัดหมวด หรือว่ามีพร้อมอย่างที่เราต้องการใช้งาน จึงต้องมีการปรับค่าบ้างเล็กน้อยตามการใช้งานจริงของเราเอง

ซึ่งค่า System Uptime นั้นก็จะมีอยู่แล้วใน Templete ทั้ง OS Linux และ OS Windows ซึ่งปกติก็จะสามารถดึงค่าได้ดังนี้