PHP PDO Pie Chart, กราฟวงกลมสวยๆ จาก Highcharts

สวัสดีครับ ในบทความนี้จะแจกตัวอย่าง PHP PDO Pie Chart, กราฟวงกลมสวยๆ จาก Highcharts เพื่อทำรายงานในรูปแบบกราฟสวยๆ เพื่อประยุกต์ใช้ในการทำระบบแสดงรายงานในอนาคต ในการใช้กราฟจาก Highcharts ดีอย่างไร คำตอบคือ ฟรี, สวย, ปรับแต่งได้ และยังสามารถดาวน์โหลดเป็นไฟล์ต่างๆ ได้อีกด้วย เช่น png, jpg, pdf, excel เป็นต้น *Code ที่แจกจะรองรับการทำงาน PHP7 และ PHP8 *ฝึกไว้ครับเผื่อได้ใช้

ขายโปรแกรม ลดสูงสุด 70%
ขายระบบสารสนเทศออนไลน์ พร้อมใช้ ราคาเบาๆ ได้โค้ดทั้งหมด นำไปต่อยอดได้
สินค้าทั้งหมด คลิก https://devbanban.com/?p=4425
ซื้อแล้วปรึกษาได้เรื่อยๆ ครับ
สนใจ inbox มาที่แฟนเพจ หรือ ☎️ 0948616709

ตัวอย่างระบบที่มีการแสดงรายงานเป็นกราฟวงกลม
1.ระบบแจ้งซ่อมสำหรับองค์กร คลิก
2.ระบบอื่นๆ เพิ่มเติม คลิก

รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940

โค้ดประกอบด้วย

PHP PDO
MySQL SUM
HTML
Bootstrap5
แสดงข้อมูลในรูปแบบกราฟวงกลมโดยใช้ Highcharts

มาเริ่มทำ workshop กันครับ *คอมเม้นอยู่ในโค้ด

0.รวม Workshop PHP PDO ก่อนหน้าคลิก

1.ให้สร้างฐานข้อมูลก่อนครับ เช่น ฐานข้อมูลชื่อ workshop_pdo

2.ตารางเก็บข้อมูลรายการขาย tbl_sales พร้อมข้อมูลตัวอย่าง (จากนั้นไปที่เมนู sql คัดลอกโค้ดไปวางและ go)

CREATE TABLE `tbl_sales` (
  `id` int(11) NOT NULL,
  `product_type` varchar(100) NOT NULL,
  `amount` float(10,2) NOT NULL,
  `date_save` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `tbl_sales`
--

INSERT INTO `tbl_sales` (`id`, `product_type`, `amount`, `date_save`) VALUES
(1, 'PC', 100.00, '2020-04-16'),
(2, 'Notebook', 400.00, '2020-04-16'),
(3, 'PC', 15000.00, '2020-03-01'),
(4, 'Notebook', 250.00, '2020-03-01'),
(5, 'PC', 100.00, '2020-04-16'),
(6, 'Notebook', 11000.00, '2020-04-16'),
(7, 'PC', 100.00, '2020-03-01'),
(8, 'Notebook', 150.00, '2020-03-01'),
(9, 'Smart Phone', 300.00, '2020-03-01'),
(10, 'Smart Phone', 14000.00, '2020-04-01'),
(11, 'PC', 800.00, '2020-02-01'),
(12, 'Notebook', 100.00, '2020-02-01'),
(13, 'Smart Phone', 400.00, '2020-02-02'),
(14, 'Accessories', 5000.00, '2020-04-18'),
(15, 'Accessories', 4500.00, '2020-03-01');

ALTER TABLE `tbl_sales`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `tbl_sales`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=16;

CREATE TABLE `tbl_sales` (

`id` int(11) NOT NULL,

`product_type` varchar(100) NOT NULL,

`amount` float(10,2) NOT NULL,

`date_save` date NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Dumping data for table `tbl_sales`

INSERT INTO `tbl_sales` (`id`, `product_type`, `amount`, `date_save`) VALUES

(1, 'PC', 100.00, '2020-04-16'),

(2, 'Notebook', 400.00, '2020-04-16'),

(3, 'PC', 15000.00, '2020-03-01'),

(4, 'Notebook', 250.00, '2020-03-01'),

(5, 'PC', 100.00, '2020-04-16'),

(6, 'Notebook', 11000.00, '2020-04-16'),

(7, 'PC', 100.00, '2020-03-01'),

(8, 'Notebook', 150.00, '2020-03-01'),

(9, 'Smart Phone', 300.00, '2020-03-01'),

(10, 'Smart Phone', 14000.00, '2020-04-01'),

(11, 'PC', 800.00, '2020-02-01'),

(12, 'Notebook', 100.00, '2020-02-01'),

(13, 'Smart Phone', 400.00, '2020-02-02'),

(14, 'Accessories', 5000.00, '2020-04-18'),

(15, 'Accessories', 4500.00, '2020-03-01');

ALTER TABLE `tbl_sales`

ADD PRIMARY KEY (`id`);

ALTER TABLE `tbl_sales`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=16;

3.สร้างโฟลเดอร์สำหรับทดสอบ เช่น ชื่อโฟลเดอร์ workshop_pdo *สำหรับคนที่เพิ่งฝึกยังไม่เข้าใจข้อนี้ว่าต้องสร้างไว้ที่ไหน ให้ดูคลิปชุดนี้ก่อน รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940

4.ไฟล์เชื่อมต่อฐานข้อมูล ชื่อไฟล์ connect.php

<?php
$servername = "localhost";
$username = "root";
$password = "yourpassword"; //ไม่ได้ตั้งรหัสผ่านก็ลบ yourpassword ออก

try {
  $conn = new PDO("mysql:host=$servername;dbname=workshop_pdo", $username, $password);
  // set the PDO error mode to exception
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  //echo "Connected successfully";
} catch(PDOException $e) {
  echo "Connection failed: " . $e->getMessage();
}
//Set ว/ด/ป เวลา ให้เป็นของประเทศไทย
    date_default_timezone_set('Asia/Bangkok');
?>

<?php

$servername = "localhost";

$username = "root";

$password = "yourpassword"; //ไม่ได้ตั้งรหัสผ่านก็ลบ yourpassword ออก

try {

$conn = new PDO("mysql:host=$servername;dbname=workshop_pdo", $username, $password);

// set the PDO error mode to exception

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

//echo "Connected successfully";

} catch(PDOException $e) {

echo "Connection failed: " . $e->getMessage();

}

//Set ว/ด/ป เวลา ให้เป็นของประเทศไทย

date_default_timezone_set('Asia/Bangkok');

5.ไฟล์ Workshop piechart-highChart.php

<?php
//เรียกใช้งานไฟล์เชื่อมต่อฐานข้อมูล
require_once 'connect.php';

//คิวรี่ข้อมูลหาผมรวมยอดขายโดยใช้ SQL SUM
$stmt = $conn->prepare("
	SELECT product_type, SUM(amount) as total
	FROM tbl_sales
	GROUP BY product_type");
$stmt->execute();
$result = $stmt->fetchAll();
//นำข้อมูลที่ได้จากคิวรี่มากำหนดรูปแบบข้อมุลให้ถูกโครงสร้างของกราฟที่ใช้ *อ่าน docs เพิ่มเติม
$report_data = array();
foreach ($result as $rs) {
//ทำข้อมูลให้ถูกโครงสร้างก่อนนำไปแสดงในกราฟ ศึกษาเพิ่มเติม https://www.highcharts.com/demo/pie-basic
$report_data[]= '{name:'.'"'.$rs['product_type'].' '.number_format($rs['total'],).' THB '.'"'.', '.'y:'.$rs['total'].'}';
}
//ตัด , ตัวสุดท้ายออก
$report_data = implode(",", $report_data);

?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Pie Chart from https://www.highcharts.com workshop by devbanban.com 2021</title>
		<!--bootstrap5-->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
		<!-- css chart -->
		<style>
		.highcharts-figure,
		.highcharts-data-table table {
		min-width: 320px;
		max-width: 800px;
		margin: 1em auto;
		}
		.highcharts-data-table table {
		font-family: Verdana, sans-serif;
		border-collapse: collapse;
		border: 1px solid #ebebeb;
		margin: 10px auto;
		text-align: center;
		width: 100%;
		max-width: 500px;
		}
		.highcharts-data-table caption {
		padding: 1em 0;
		font-size: 1.2em;
		color: #555;
		}
		.highcharts-data-table th {
		font-weight: 600;
		padding: 0.5em;
		}
		.highcharts-data-table td,
		.highcharts-data-table th,
		.highcharts-data-table caption {
		padding: 0.5em;
		}
		.highcharts-data-table thead tr,
		.highcharts-data-table tr:nth-child(even) {
		background: #f8f8f8;
		}
		.highcharts-data-table tr:hover {
		background: #f1f7ff;
		}
		input[type="number"] {
		min-width: 50px;
		}
		/* devbanban.com */
		</style>
		<!-- highcharts -->
		<script src="https://code.highcharts.com/highcharts.js"></script>
		<script src="https://code.highcharts.com/modules/exporting.js"></script>
		<script src="https://code.highcharts.com/modules/export-data.js"></script>
		<script src="https://code.highcharts.com/modules/accessibility.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-1"></div>
				<div class="col-md-10">

					<h4>  Pie charts from https://www.highcharts.com </h4>
					<h4>แสดงโครงสร้างข้อมูลที่จะนำไปแสดงในกราฟ</h4>
					<?php echo $report_data;?>
					<figure class="highcharts-figure">
						    <div id="containerchart"></div>
						     
						</figure>
					<script>
						Highcharts.chart('containerchart', {
					chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false,
					type: 'pie'
					},
					title: {
					text: 'รายงานยอดขายแยกตาม............................'
					},
					tooltip: {
					pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
					},
					accessibility: {
					point: {
					valueSuffix: '%'
					}
					},
					plotOptions: {
					pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
					enabled: true,
					format: '<b>{point.name}</b>: {point.percentage:.1f} %'
					}
					}
					},
					series: [{
					name: 'Brands',
					colorByPoint: true,
					data: [<?php echo $report_data;?>]
					}]
					});
					</script>
					
				</div>
			</div>
		</div>
		<p align="center">Docs : https://www.highcharts.com/demo/pie-basic <br>
			คอร์สออนไลน์ราคาถูก
			<a href="https://devbanban.com/?cat=250">คลิก.</a></p>
		</body>
	</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

<?php

//เรียกใช้งานไฟล์เชื่อมต่อฐานข้อมูล

require_once 'connect.php';

//คิวรี่ข้อมูลหาผมรวมยอดขายโดยใช้ SQL SUM

$stmt = $conn->prepare("

SELECT product_type, SUM(amount) as total

FROM tbl_sales

GROUP BY product_type");

$stmt->execute();

$result = $stmt->fetchAll();

//นำข้อมูลที่ได้จากคิวรี่มากำหนดรูปแบบข้อมุลให้ถูกโครงสร้างของกราฟที่ใช้ *อ่าน docs เพิ่มเติม

$report_data = array();

foreach ($result as $rs) {

//ทำข้อมูลให้ถูกโครงสร้างก่อนนำไปแสดงในกราฟ ศึกษาเพิ่มเติม https://www.highcharts.com/demo/pie-basic

$report_data[]= '{name:'.'"'.$rs['product_type'].' '.number_format($rs['total'],).' THB '.'"'.', '.'y:'.$rs['total'].'}';

}

//ตัด , ตัวสุดท้ายออก

$report_data = implode(",", $report_data);

<!DOCTYPE html>

<html>

<head>

<title>Pie Chart from https://www.highcharts.com workshop by devbanban.com 2021</title>

<style>

.highcharts-figure,

.highcharts-data-table table {

min-width: 320px;

max-width: 800px;

margin: 1em auto;

}

.highcharts-data-table table {

font-family: Verdana, sans-serif;

border-collapse: collapse;

border: 1px solid #ebebeb;

margin: 10px auto;

text-align: center;

width: 100%;

max-width: 500px;

}

.highcharts-data-table caption {

padding: 1em 0;

font-size: 1.2em;

color: #555;

}

.highcharts-data-table th {

font-weight: 600;

padding: 0.5em;

}

.highcharts-data-table td,

.highcharts-data-table th,

.highcharts-data-table caption {

padding: 0.5em;

}

.highcharts-data-table thead tr,

.highcharts-data-table tr:nth-child(even) {

background: #f8f8f8;

}

.highcharts-data-table tr:hover {

background: #f1f7ff;

}

input[type="number"] {

min-width: 50px;

}

/* devbanban.com */

</style>

</head>

<body>

<h4> Pie charts from https://www.highcharts.com </h4>

<h4>แสดงโครงสร้างข้อมูลที่จะนำไปแสดงในกราฟ</h4>

<?php echo $report_data;?>

</figure>

Highcharts.chart('containerchart', {

chart: {

plotBackgroundColor: null,

plotBorderWidth: null,

plotShadow: false,

type: 'pie'

title: {

text: 'รายงานยอดขายแยกตาม............................'

tooltip: {

pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

accessibility: {

point: {

valueSuffix: '%'

}

plotOptions: {

pie: {

allowPointSelect: true,

cursor: 'pointer',

dataLabels: {

enabled: true,

format: '<b>{point.name}</b>: {point.percentage:.1f} %'

}

series: [{

name: 'Brands',

colorByPoint: true,

data: [<?php echo $report_data;?>]

}]

});

</script>

</div>

<p align="center">Docs : https://www.highcharts.com/demo/pie-basic <br>

คอร์สออนไลน์ราคาถูก

</body>

</html>

6.ผลการทำงาน

ลองเอาไปประยุกต์ใช้ดูครับ และฝากติดตาม workshop ต่อๆ ไปด้วยครับผม
Bootstrap5 : https://getbootstrap.com/
ฝึก SQL : https://www.w3schools.com/sql/default.asp
แหล่งศึกษา PDO เพิ่มเติม : https://websitebeaver.com/php-pdo-vs-mysqli
List of PDOStatement::bindParam data_type parameters : https://www.php.net/manual/en/pdo.constants.php

ขอแนะนำระบบพร้อมใช้งาน *รายละเอียดและราคาอยู่ใต้คลิป

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่

ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1

fanpage : https://www.facebook.com/sornwebsites/

devbanban

PHP PDO Pie Chart, กราฟวงกลมสวยๆ จาก Highcharts

Byพิศิษฐ์ บวรเลิศสุธี

Related

Related Post

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

You missed