ฟรี ตัวอย่าง การเรียกข้อมูลมาแสดงบนกราฟวงกลม PHP MySQLi & Google Pie Chart

เป็นตัวอย่างที่ทำขึ้นมาแบบง่ายๆ ที่สามารถเรียกข้อมูลจากฐานข้อมูลมาแสดงบนกราฟวงกลม PHP MySQLi เพื่อประยุกต์ใช้ทำระบบรายงาน โค้ดดังกล่าวแจกให้เอาไปศึกษาและพัฒนาต่อยอดได้เต็มที่ครับ

ตัวอย่างกราฟวงกลมดังกล่าวมาจาก Google Charts สามารถศึกษากราฟรูปแบบอื่นๆ เพิ่มเติมได้ที่ https://developers.google.com/chart

สำหรับใครที่พึ่งฝึกภาษา PHP ไปดูคลิปชุดนี้ก่อนครับ *Basic PHP 100 คลิป ++

มาเริ่มต้นทำ Workshop กันครับ

1.เริ่มต้นที่สร้างฐานข้อมูล เช่น db_pie_chart และไปที่เมนู SQL เอาโค้ดชุดนี้ไปวางแล้ว Go ก็จะได้ตารางพร้อมข้อมูลตัวอย่าง *ใครยังไม่เข้าใจไปดูคลิปปรับพื้นฐานด้านบนก่อนครับ

*tbl_sales

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;

 
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;

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;

ขอแนะนำระบบแจ้งซ่อมราคา 8000 บาท ให้โค้ดทั้งหมด *เอาไปต่อยอดได้

2.full code piechart.php คำอธิบายอยู่ในคอมเม้นนะครับ

<?php
//เชื่อมต่อฐานข้อมูล
$condb= mysqli_connect("localhost","root","your_password","db_pie_chart") or die("Error: " . mysqli_error($condb));
mysqli_query($condb, "SET NAMES 'utf8' ");
 // คิวรี่ข้อมูลจากตาราง
$query = "SELECT product_type, SUM(amount) as total FROM tbl_sales GROUP BY product_type";
$result = mysqli_query($condb, $query);

    //นำข้อมูลที่ได้จากคิวรี่มากำหนดรูปแบบข้อมุลให้ถูกโครงสร้างของกราฟที่ใช้ *อ่าน docs เพิ่มเติม
    $datax = array();
    foreach ($result as $k) {
      $datax[] = "['".$k['product_type']."'".", ".$k['total']."]";
    }

    //cut last commar
    $datax = implode(",", $datax);
    //แสดงข้อมูลก่อนนำไปแสดงบนกราฟ 
    echo $datax; //ถ้าอยากเอาออก ก็ใส่ double slash ข้างหน้าครับ
?>
<html>
  <head>
    <!-- เรียก 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 $datax;?>
        ]);

        var options = {
          title: 'SALES REPORT'
        };

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

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

<?php

//เชื่อมต่อฐานข้อมูล

$condb= mysqli_connect("localhost","root","your_password","db_pie_chart") or die("Error: " . mysqli_error($condb));

mysqli_query($condb, "SET NAMES 'utf8' ");

// คิวรี่ข้อมูลจากตาราง

$query = "SELECT product_type, SUM(amount) as total FROM tbl_sales GROUP BY product_type";

$result = mysqli_query($condb, $query);

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

$datax = array();

foreach ($result as $k) {

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

}

//cut last commar

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

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

echo $datax; //ถ้าอยากเอาออก ก็ใส่ double slash ข้างหน้าครับ

<html>

<head>

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

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

<?php echo $datax;?>

]);

var options = {

title: 'SALES REPORT'

};

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

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

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

4.คู่มือ / User Guide

https://developers.google.com/chart/interactive/docs

เรียบร้อยครับ ลองเอาไปประยุกต์ใช้ดูครับ

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

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

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

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

devbanban

ฟรี ตัวอย่าง การเรียกข้อมูลมาแสดงบนกราฟวงกลม PHP MySQLi & Google Pie Chart

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

Related

Related Post

Laravel12 Free Code Basic CRUD

โปรแกรมหอพักและอพาร์ทเม้นท์ รายเดือน ราคาประหยัด พร้อมใช้งาน

อาจารย์ไอที เก่ง Coding Web Application ทำวิจัยเรื่องอะไรดี ??

You missed