PHP PDO Column Chart, กราฟแท่งสวยๆ จาก Highcharts

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

ตัวอย่างระบบที่มีการแสดงรายงานเป็นกราฟแท่ง
1.ระบบยืมคืนอุปกรณ์กีฬา คลิก
2.เว็บอีคอมเมิร์ชราคาถูก คลิก
3.เว็บจองโรงแรม คลิก
4.ฐานข้อมูลศิษย์เก่า คลิก
5.ระบบอื่นๆ เพิ่มเติม คลิก

รวมคลิปสอนปรับพื้นฐาน ภาษา 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 ColumnChart-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) {
/*
โครงสร้างข้อมูลของกราฟ
		{
		name: "Chrome",
		y: 62.74,
		drilldown: "Chrome"
		},
*/
//ทำข้อมูลให้ถูกโครงสร้างก่อนนำไปแสดงในกราฟ docs : https://www.highcharts.com/demo/column-drilldown
$report_data[]= '
{
	name:'.'"'.$rs['product_type'].'"'.',' //label
.'y:'.$rs['total']. //ตัวเลขยอดขาย
','
.'drilldown:'.'"'.$rs['product_type'].'"'.',' //label ด้านล่าง
.'}';
}
//ตัด , ตัวสุดท้ายออก
$report_data = implode(",", $report_data);
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>column-drilldown 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">
		<style>
			.highcharts-figure,
		.highcharts-data-table table {
		min-width: 310px;
		max-width: 800px;
		margin: 1em auto;
		}
		#container {
		height: 400px;
		}
		.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;
		}
		/* devbanban.com */
		</style>
		<!-- highcharts -->
		<script src="https://code.highcharts.com/highcharts.js"></script>
		<script src="https://code.highcharts.com/modules/data.js"></script>
		<script src="https://code.highcharts.com/modules/drilldown.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> column-drilldown Chart from https://www.highcharts.com </h4>
				 <br>
					<b> แสดงโครงสร้างข้อมูลที่จะนำไปแสดงในกราฟ </b><br>
					<?= $report_data;?>
				 	<hr>
					<figure class="highcharts-figure">
						<div id="container"></div>
						<p class="highcharts-description">.</p>
					</figure>
					<script>
						// Create the chart
					Highcharts.chart('container', {
					chart: {
					type: 'column'
					},
					title: {
					text: 'รายงานยอดขาย........................'
					},
					subtitle: {
					text: 'จาก...............................'
					},
					accessibility: {
					announceNewData: {
					enabled: true
					}
					},
					xAxis: {
					type: 'category'
					},
					yAxis: {
					title: {
					text: 'แสดงยอดขาย............'
					}
					},
					legend: {
					enabled: false
					},
					plotOptions: {
					series: {
					borderWidth: 0,
					dataLabels: {
					enabled: true,
					format: '{point.y:.2f} บาท'
					}
					}
					},
					tooltip: {
					headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
					pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f} บาท</b> of total<br/>'
					},
					series: [
					{
					name: "ยอดขาย",
					colorByPoint: true,
					//เอาข้อมูลมา echo ตรงนี้
					data: [<?= $report_data;?>]
					}
					]
					});
					</script>
				</div>
			</div>
		</div>
		<p align="center">https://www.highcharts.com/demo/column-drilldown <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

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

<?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) {

โครงสร้างข้อมูลของกราฟ

{

name: "Chrome",

y: 62.74,

drilldown: "Chrome"

//ทำข้อมูลให้ถูกโครงสร้างก่อนนำไปแสดงในกราฟ docs : https://www.highcharts.com/demo/column-drilldown

$report_data[]= '

{

name:'.'"'.$rs['product_type'].'"'.',' //label

.'y:'.$rs['total']. //ตัวเลขยอดขาย

','

.'drilldown:'.'"'.$rs['product_type'].'"'.',' //label ด้านล่าง

.'}';

}

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

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

<!DOCTYPE html>

<html>

<head>

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

<style>

.highcharts-figure,

.highcharts-data-table table {

min-width: 310px;

max-width: 800px;

margin: 1em auto;

}

#container {

height: 400px;

}

.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;

}

/* devbanban.com */

</style>

</head>

<body>

<h4> column-drilldown Chart from https://www.highcharts.com </h4>

<br>

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

<?= $report_data;?>

<hr>

</figure>

// Create the chart

Highcharts.chart('container', {

chart: {

type: 'column'

title: {

text: 'รายงานยอดขาย........................'

subtitle: {

text: 'จาก...............................'

accessibility: {

announceNewData: {

enabled: true

}

xAxis: {

type: 'category'

yAxis: {

title: {

text: 'แสดงยอดขาย............'

}

legend: {

enabled: false

plotOptions: {

series: {

borderWidth: 0,

dataLabels: {

enabled: true,

format: '{point.y:.2f} บาท'

}

tooltip: {

headerFormat: '<span style="font-size:11px">{series.name}</span><br>',

pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f} บาท</b> of total<br/>'

series: [

{

name: "ยอดขาย",

colorByPoint: true,

//เอาข้อมูลมา echo ตรงนี้

data: [<?= $report_data;?>]

}

]

});

</script>

</div>

<p align="center">https://www.highcharts.com/demo/column-drilldown <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 Column Chart, กราฟแท่งสวยๆ จาก Highcharts

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

Related

Related Post

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

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

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

You missed