PHP PDO PIE CHART : ออกรายงานในรูปแบบกราฟวงกลม

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

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

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

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

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

มาเริ่มทำ 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.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 เพิ่มเติม
$saleData = array();
  foreach ($result as $k) {
  $saleData[] = "['".$k['product_type']."'".", ".$k['total']."]";
}
//ตัด commar อันสุดท้ายโดยใช้ implode เพื่อให้โครงสร้างข้อมูลถูกต้องก่อนจะนำไปแสดงบนกราฟ
$saleData = implode(",", $saleData);

?>
<html>
  <head>
    <title>PHP PDO & PIE CHART : ออกรายงานกราฟวงกลม  devbanban.com 2021</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--bootstrap5-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <!-- เรียก js มาใช้งาน -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['Task', 'Summary per product_type'],
        <?php echo $saleData;?>
        ]);
        var options = {
        title: 'SALES REPORT'
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
        }
    </script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12"> <br>
          <h4>PHP PDO PIE CHART : ออกรายงานกราฟวงกลม</h4>
          <?php
          //แสดงข้อมูลก่อนนำไปแสดงบนกราฟ
          echo 'ข้อมูลที่นำไปแสดงบนกราฟ ' .$saleData; //ถ้าอยากเอาออก ก็ใส่ double slash ข้างหน้าครับ ?>
          <div id="piechart" style="width: 900px; height: 500px;"></div>
          <br>
          คู่มือ (docs) : https://developers.google.com/chart/interactive/docs
        </div>
      </div>
    </div>
  </body>
</html>

<?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 เพิ่มเติม

$saleData = array();

foreach ($result as $k) {

$saleData[] = "['".$k['product_type']."'".", ".$k['total']."]";

}

//ตัด commar อันสุดท้ายโดยใช้ implode เพื่อให้โครงสร้างข้อมูลถูกต้องก่อนจะนำไปแสดงบนกราฟ

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

<html>

<head>

<title>PHP PDO & PIE CHART : ออกรายงานกราฟวงกลม devbanban.com 2021</title>

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Task', 'Summary per product_type'],

<?php echo $saleData;?>

]);

var options = {

title: 'SALES REPORT'

};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);

}

</script>

</head>

<body>

<h4>PHP PDO PIE CHART : ออกรายงานกราฟวงกลม</h4>

<?php

//แสดงข้อมูลก่อนนำไปแสดงบนกราฟ

echo 'ข้อมูลที่นำไปแสดงบนกราฟ ' .$saleData; //ถ้าอยากเอาออก ก็ใส่ double slash ข้างหน้าครับ ?>

<br>

คู่มือ (docs) : https://developers.google.com/chart/interactive/docs

</div>

</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 : ออกรายงานในรูปแบบกราฟวงกลม

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