สวัสดีครับ ในบทความนี้เราจะมาแนะนำการ สร้าง รายงานในรูปแบบ กราฟ อย่าง ง่าย ๆ ด้วย 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>
ตัวอย่างการแสดงผล