บทความนี้ทางเราจะขอแนะนำการใช้งาน ChartJs ซึ่งเป็น javascript library
สำหรับ สร้างรายงาน กราฟ ในรูปแบบ ต่าง ๆ ตัว ChartJs นั้นเป็น OpenSource ครับ
ซึ่งสามารถใช้งานได้ฟรี เรามาดูวิธีการใช้งานเบื้องต้นกันเลยดีกว่าครับ
ไปที่ http://www.chartjs.org
เริ่มต้นการใช้งาน เบื้องต้น
1.สร้าง Tag canvas กำหนดให้มี ไอดี เท่ากับ myChart
<canvas id="myChart" width="400" height="400"></canvas>
2. นำเข้า Script Chart.js CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
3.ตัวอย่างการเรียกใช้งาน ChartJs ในรูปแบบ Bar chart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ChartJs</title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
</body>
</html>
ตัวอย่างการแสดงผล
เราสามารถ เปลี่ยนรูปแบบ การแสดงผลในรูปแบบอื่น ๆ ได้ ดังนี้
การแสดงผล แบบ Line Chart แก้ไข Script การเรียกใช้งาน ChartJs
กำหนดค่า type : ‘line’
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
/*code*/
},
options: {
/*code*/
}
});
ตัวอย่างการแสดงผล Line Chart
การแสดงผล แบบ Pie Chart แก้ไข Script การเรียกใช้งาน ChartJs
กำหนดค่า type : ‘pie’
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
/*code*/
},
options: {
/*code*/
}
});
ตัวอย่างการแสดงผล Pie Chart
สามารถดูตัวอย่างการตั้งค่า อื่น ๆ เพิ่มเติมที่ http://www.chartjs.org/docs/
ตัวอย่างการใช้งาน แสดงข้อมูลกราฟจากฐานข้อมูล MySQL
สร้าง ฐานข้อมูล Demo และ สร้างตาราง ชื่อ Chart
CREATE TABLE `chart` ( `id` int(11) NOT NULL, `title` varchar(255) NOT NULL, `score` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT INTO `chart` (`id`, `title`, `score`) VALUES (1, 'A', 5000), (2, 'B', 3500), (3, 'C', 2000), (4, 'D', 4000); ALTER TABLE `chart` ADD PRIMARY KEY (`id`);
สร้างไฟล์ index.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demo";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM chart";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
$labels[] = $row['title'];
$data[] = $row['score'];
}
}
mysqli_close($conn);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ChartJs</title>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
//type: 'bar',
//type: 'line',
type: 'pie',
data: {
labels: <?=json_encode($labels)?>,
datasets: [{
label: 'Report',
data: <?=json_encode($data, JSON_NUMERIC_CHECK);?>,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: true,
title: {
display: true,
text: 'ตัวอย่างการใช้งาน Chart Js'
}
}
});
</script>
</body>
</html>
ตัวอย่างการแสดงผล ChartJs
