สวัสดีครับ ในบทความนี้เราจะมาแนะนำการ สร้าง รายงานในรูปแบบ กราฟ อย่าง ง่าย ๆ ด้วย C3js Javascript chart library ซึ่งมีความสามารถในการสร้างกราฟได้หลายรูปแบบ และสามารถใช้งานได้ฟรีครับ
ก่อนอื่น เราไปที่ web site ของผู้พัฒนากันก่อนเลยครับ C3.js D3-based reusable chart library
สำหรับ ตัวอย่างการใช้งาน (Examples) และ เอกสารประกอบการใช้งาน (Reference) นั้นทางผู้พัฒนา C3js ได้ทำไว้ค่อนข้างละเอียดมากครับ แต่หากใครที่ดูแล้วยังไม่เข้าใจ หรือ สำหรับมือใหม่ที่ยังไม่คุ้นเคยในการเขียนโปรแกรม ในบทความนี้ทางเราจะนำเสนอการใช้งานเบื้องต้น และ ตัวอย่างการใช้งานบางส่วนครับ
การเริ่มต้นใช้งาน C3Js
ก่อนอื่นก็ต้องมีการนำเข้าไฟล์ Css และ Js ของ C3js เข้ามาใช้งานก่อน
1.นำเข้าไฟล์ c3.css
<!-- เรียกใช้งาน c3.css จาก CDN --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.16/c3.css">
2.นำเข้าไฟล์ d3.v3.min.js และ c3.js
<!-- เรียกใช้งาน d3.v3.min.js และ c3.js จาก CDN --> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.16/c3.js"></script>
3.สร้าง tag div ที่กำหนด id มีชื่อว่า chart ไว้สำหรับการแสดงผล chart ที่ tag นี้
<div id="chart"></div>
4.เขียนคำสั่ง JavaScript เรียกใช้งาน function generate() เพื่อใช้งาน c3js
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- เรียกใช้งาน c3.css จาก CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.16/c3.css">
<!-- เรียกใช้งาน d3.v3.min.js และ c3.js จาก CDN -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.16/c3.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
}
});
</script>
</body>
</html>
ตัวอย่างการแสดงผล
การปรับแต่งรูปแบบและการแสดงผลของ C3js ( Customize Chart )
การปรับแต่ง Customize C3js นั้น สามารถปรับแต่ง รูปแบบกราฟ ได้หลากหลายรูปแบบครับ เช่น รูปแบบกราฟ barChart,LineChart,PieChare หรือ ปรับแต่งสีของ Chart เป็นต้น
การปรับแต่งรูปแบบของ Chart (Chart Type)
C3js มี รูปแบบของ Chart ดังนี้
- line
- spline
- step
- area
- area-spline
- area-step
- bar
- scatter
- pie
- donut
- gauge
ตัวอย่างการใช้งาน เพียงแค่ระบุ type ตามด้วยชื่อของ Type ที่ต้องการ
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar' // กำหนดรูปแบบ เป็น barChart
}
});
</script>
การกำหนดสีให้กับ Chart ตัวอย่างการใช้งาน
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar', // กำหนดรูปแบบ เป็น barChart
},
color:{
pattern: ["#d62728", "#ff7f0e"],//สามารถระบุ Code สี ที่ต้องการได้
},
});
</script>
การกำหนดข้อความ ให้กับ Chart
<script>
var chart = c3.generate({
data: {
columns: [
['ยอดขาย ปี 2015', 30, 70, 80, 80, 65, 85],
['ยอดขาย ปี 2016', 50, 20, 10, 40, 15, 25],
['ยอดขาย ปี 2017', 90, 10, 50, 70, 45, 15],
],
type: 'bar'
},
color:{
pattern: ["#22B14C", "#ff7f0e", "#d62728"],
},
axis:{
x:{
type:"category",
categories: ['Bmw','Benz','Toyota','Honda','Nissan','Ford'],
label:{
text:"ยอดขายรถยนต์ปี 2015 - 2017",
position: 'outer-left'
}
},
}
});
</script>
ตัวอย่างการแสดงผล
สำหรับ C3Js มี Options ให้ปรับแต่งได้มากมาย สามารถศึกษาเพิ่มเติมได้ที่ http://c3js.org/reference.html
การแสดงข้อมูล Chart จาก PHP และ ฐานข้อมูล MySQL
ก่อนอื่นเรามาสร้าง ฐานข้อมูล demo และมีตารางชื่อ sale_summary
CREATE TABLE `sale_summary` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `year_2015` int(11) NOT NULL, `year_2016` int(11) NOT NULL, `year_2017` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT INTO `sale_summary` (`id`, `name`, `year_2015`, `year_2016`, `year_2017`) VALUES (1, 'Porsche 911', 20, 30, 35), (2, 'Ferrari F430 Scuderia', 50, 60, 30), (3, 'lamborghini aventador 700-4 ', 50, 40, 20), (4, 'Mercedes-Benz SLR McLaren', 70, 90, 150), (5, 'Ford GT ', 5, 10, 8); ALTER TABLE `sale_summary` ADD PRIMARY KEY (`id`); ALTER TABLE `sale_summary` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
สร้างไฟล์ simple.php เขียนโปรแกรม Select ข้อมูลมาจากฐานข้อมูล จากนั้น แปลงค่าด้วย คำสั่ง json_encode และ นำค่าที่ได้ไปแสดงผลด้วย c3js
<?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 sale_summary";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
$data_year_2015 = [];
$data_year_2016 = [];
$data_year_2017 = [];
$labels = [];
array_push($data_year_2015,'ยอดขายรถยนต์ปี 2015');
array_push($data_year_2016,'ยอดขายรถยนต์ปี 2016');
array_push($data_year_2017,'ยอดขายรถยนต์ปี 2017');
while($row = mysqli_fetch_assoc($result)) {
$labels[] = $row['name'];
$data_year_2015[] = (int)$row['year_2015'];
$data_year_2016[] = (int)$row['year_2016'];
$data_year_2017[] = (int)$row['year_2017'];
}
}
mysqli_close($conn);
$json = array(
$data_year_2015,
$data_year_2016,
$data_year_2017
);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- เรียกใช้งาน c3.css จาก CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.16/c3.css">
<!-- เรียกใช้งาน d3.v3.min.js และ c3.js จาก CDN -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.16/c3.js"></script>
</head>
<body>
<h2>รายงานแสดงยอดขายรถยนต์ปี 2015 - 2017 </h2>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: <?php echo json_encode($json);?>,
type: 'bar'
},
color:{
pattern: ["#22B14C", "#ff7f0e", "#d62728"],
},
axis:{
x:{
type:"category",
categories: <?php echo json_encode($labels)?>,
label:{
text: "ยอดขายรถยนต์ปี 2015 - 2017",
position: 'outer-left'
}
},
}
});
</script>
</body>
</html>
ตัวอย่างการแสดงผล
