PHP PDO Column Chart With Rotated Labels from amCharts รายงานในรูปแบบกราฟแท่งสวยๆ

สวัสดีครับ ในบทความนี้จะแจกตัวอย่าง PHP PDO Column Chart With Rotated Labels from amCharts รายงานในรูปแบบกราฟแท่งสวยๆ เพื่อประยุกต์ใช้ในการทำระบบแสดงรายงานในอนาคต Code ที่แจกจะรองรับการทำงาน PHP7 และ PHP8 *ฝึกไว้ครับเผื่อได้ใช้

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

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

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

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

มาเริ่มทำ 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.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.amcharts.com/demos/pie-chart/
$report_data[]= '
{country:'.'"'.$rs['product_type'].'"'.',
'.'value:'.$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>PHP PDO Column  Chart With Rotated Labels from amCharts 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">
    <!-- amcharts  devbanban.com -->
		<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
		<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
		<!-- กำหนดขนาดของกราฟ -->
		<style>
				#chartdiv {
				width: 100%;
				height: 500px;
				}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-1"></div>
				<div class="col-md-10"> <br>
					<h4>PHP PDO Column  Chart With Rotated Labels from amCharts รายงานในรูปแบบกราฟแท่ง</h4>
					<?php
					//chart.data structure
					echo 'แสดงโครงสร้างข้อมูลก่อนนำเข้ากราฟ : <br> ';
					
					echo $report_data;
					
					?>
					<h4>แสดงยอดขายแยกตามหมวดหมู่</h4>
					<div id="chartdiv"></div>
					<script>
					/*				
					 * ---------------------------------------
					 * This demo was created using amCharts 5.
					 * 
					 * For more information visit:
					 * https://www.amcharts.com/
					 * 
					 * Documentation is available at:
					 * https://www.amcharts.com/docs/v5/
					 * ---------------------------------------
					 */

					// Create root element
					// https://www.amcharts.com/docs/v5/getting-started/#Root_element
					var root = am5.Root.new("chartdiv");


					// Set themes
					// https://www.amcharts.com/docs/v5/concepts/themes/
					root.setThemes([
					  am5themes_Animated.new(root)
					]);


					// Create chart
					// https://www.amcharts.com/docs/v5/charts/xy-chart/
					var chart = root.container.children.push(am5xy.XYChart.new(root, {
					  panX: true,
					  panY: true,
					  wheelX: "panX",
					  wheelY: "zoomX"
					}));

					// Add cursor
					// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
					var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
					cursor.lineY.set("visible", false);


					// Create axes
					// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
					var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
					xRenderer.labels.template.setAll({
					  rotation: -90,
					  centerY: am5.p50,
					  centerX: am5.p100,
					  paddingRight: 15
					});

					var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
					  maxDeviation: 0.3,
					  categoryField: "country",
					  renderer: xRenderer,
					  tooltip: am5.Tooltip.new(root, {})
					}));

					var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
					  maxDeviation: 0.3,
					  renderer: am5xy.AxisRendererY.new(root, {})
					}));


					// Create series
					// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
					var series = chart.series.push(am5xy.ColumnSeries.new(root, {
					  name: "Series 1",
					  xAxis: xAxis,
					  yAxis: yAxis,
					  valueYField: "value",
					  sequencedInterpolation: true,
					  categoryXField: "country",
					  tooltip: am5.Tooltip.new(root, {
					    labelText:"{valueY}"
					  })
					}));

					series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5 });
					series.columns.template.adapters.add("fill", (fill, target) => {
					  return chart.get("colors").getIndex(series.columns.indexOf(target));
					});

					series.columns.template.adapters.add("stroke", (stroke, target) => {
					  return chart.get("colors").getIndex(series.columns.indexOf(target));
					});


					// Set data ** เอาตัวแปรที่ทำไว้ มา echo ตรงนี้ !!!!
					var data = [<?= $report_data;?>];

					xAxis.data.setAll(data);
					series.data.setAll(data);


					// Make stuff animate on load
					// https://www.amcharts.com/docs/v5/concepts/animations/
					series.appear(1000);
					chart.appear(1000, 100);
					</script>
				</div>
			</div>
		</div>
		<center>
			docs : https://www.amcharts.com/demos/#column-bar
		<br>
		devbanban.com 2021
	</center> 

	</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

165

166

167

<?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.amcharts.com/demos/pie-chart/

$report_data[]= '

{country:'.'"'.$rs['product_type'].'"'.',

'.'value:'.$rs['total'].'}';

}

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

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

<!DOCTYPE html>

<html>

<head>

<title>PHP PDO Column Chart With Rotated Labels from amCharts devbanban.com 2021</title>

<style>

#chartdiv {

width: 100%;

height: 500px;

}

</style>

</head>

<body>

<h4>PHP PDO Column Chart With Rotated Labels from amCharts รายงานในรูปแบบกราฟแท่ง</h4>

<?php

//chart.data structure

echo 'แสดงโครงสร้างข้อมูลก่อนนำเข้ากราฟ : <br> ';

echo $report_data;

<h4>แสดงยอดขายแยกตามหมวดหมู่</h4>

* ---------------------------------------

* This demo was created using amCharts 5.

* For more information visit:

* https://www.amcharts.com/

* Documentation is available at:

* https://www.amcharts.com/docs/v5/

* ---------------------------------------

// Create root element

// https://www.amcharts.com/docs/v5/getting-started/#Root_element

var root = am5.Root.new("chartdiv");

// Set themes

// https://www.amcharts.com/docs/v5/concepts/themes/

root.setThemes([

am5themes_Animated.new(root)

]);

// Create chart

// https://www.amcharts.com/docs/v5/charts/xy-chart/

var chart = root.container.children.push(am5xy.XYChart.new(root, {

panX: true,

panY: true,

wheelX: "panX",

wheelY: "zoomX"

}));

// Add cursor

// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/

var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));

cursor.lineY.set("visible", false);

// Create axes

// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/

var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });

xRenderer.labels.template.setAll({

rotation: -90,

centerY: am5.p50,

centerX: am5.p100,

paddingRight: 15

});

var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {

maxDeviation: 0.3,

categoryField: "country",

renderer: xRenderer,

tooltip: am5.Tooltip.new(root, {})

}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {

maxDeviation: 0.3,

renderer: am5xy.AxisRendererY.new(root, {})

}));

// Create series

// https://www.amcharts.com/docs/v5/charts/xy-chart/series/

var series = chart.series.push(am5xy.ColumnSeries.new(root, {

name: "Series 1",

xAxis: xAxis,

yAxis: yAxis,

valueYField: "value",

sequencedInterpolation: true,

categoryXField: "country",

tooltip: am5.Tooltip.new(root, {

labelText:"{valueY}"

})

}));

series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5 });

series.columns.template.adapters.add("fill", (fill, target) => {

return chart.get("colors").getIndex(series.columns.indexOf(target));

});

series.columns.template.adapters.add("stroke", (stroke, target) => {

return chart.get("colors").getIndex(series.columns.indexOf(target));

});

// Set data ** เอาตัวแปรที่ทำไว้ มา echo ตรงนี้ !!!!

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

xAxis.data.setAll(data);

series.data.setAll(data);

// Make stuff animate on load

// https://www.amcharts.com/docs/v5/concepts/animations/

series.appear(1000);

chart.appear(1000, 100);

</script>

</div>

docs : https://www.amcharts.com/demos/#column-bar

<br>

devbanban.com 2021

</center>

</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 With Rotated Labels from amCharts รายงานในรูปแบบกราฟแท่งสวยๆ

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

Related

Related Post

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

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

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

You missed

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

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

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

แจกฟรี To-do list Ui ออกแบบจาก Bootstrap v5.3

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

Share this:

Related

Related Post

You missed