สวัสดีครับ ในบทความนี้จะแจกตัวอย่าง PHP PDO Pie Chart from amCharts, ออกรายงานเป็นกราฟวงกลม สวยมาก !! เพื่อประยุกต์ใช้ในการทำระบบแสดงรายงานในอนาคต Code ที่แจกจะรองรับการทำงาน PHP7 และ PHP8 *ฝึกไว้ครับเผื่อได้ใช้
ตัวอย่างระบบที่มีการแสดงรายงานเป็นกราฟวงกลม
1.ระบบแจ้งซ่อมสำหรับองค์กร คลิก
2.ระบบแจ้งซ่อมสอนฟรี คลิก
3.ระบบอื่นๆ เพิ่มเติม คลิก
รวมคลิปสอนปรับพื้นฐาน ภาษา 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)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<?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[]= '{category:'.'"'.$rs['product_type'].' '.number_format($rs['total'],).' THB '.'"'.', '.'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 & PIE CHART : ออกรายงานกราฟวงกลม 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/percent.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> <h3>PHP PDO Pie Chart from amCharts </h3> <?php //chart.data structure echo 'แสดงโครงสร้างข้อมูลก่อนนำเข้ากราฟ : <br> '; echo $report_data; ?> <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/ devbanban.com * --------------------------------------- */ // 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/percent-charts/pie-chart/ var chart = root.container.children.push( am5percent.PieChart.new(root, { endAngle: 270 }) ); // Create series // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series var series = chart.series.push( am5percent.PieSeries.new(root, { valueField: "value", categoryField: "category", endAngle: 270 }) ); series.states.create("hidden", { endAngle: -90 }); // Set data // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data series.data.setAll([<?= $report_data;?>]); series.appear(1000, 100); </script> </div> </div> </div> <center> docs : https://www.amcharts.com/demos/pie-chart/ <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/