Skip to main content
สร้างรายงานกราฟอย่างง่าย ๆ ด้วย C3js JavaScript Chart Library

สร้างรายงานรูปแบบกราฟ อย่าง ง่าย ๆ ด้วย C3js Javascript chart library

สวัสดีครับ ในบทความนี้เราจะมาแนะนำการ สร้าง รายงานในรูปแบบ กราฟ อย่าง ง่าย ๆ ด้วย  C3js Javascript chart library ซึ่งมีความสามารถในการสร้างกราฟได้หลายรูปแบบ และสามารถใช้งานได้ฟรีครับ

การใช้งานสร้างกราฟด้วย c3js

ก่อนอื่น เราไปที่ 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>

ตัวอย่างการแสดงผล

Download Demo Code


Deprecated: Function create_function() is deprecated in /home/service1/domains/monkeywebstudio.com/public_html/wp-content/plugins/simple-lightbox/controller.php on line 1642