PHP PDO MySQL : Multiple Line Chart, แสดงกราฟเส้น (มากกว่า 1 เส้น)

สวัสดีครับ ในบทความนี้จะแจก PHP PDO MySQL : Workshop Multiple Line Chart. แสดงกราฟเส้นเปรียบเทียบรายได้รายปี-ข้อมูลแยกตามเดือน โดยดึงข้อมูลจากตาราง ฝึกไว้ครับ เผื่อได้ทำ

ขอแนะนำระบบพร้อมใช้ ราคาถูก ได้ Code + Database ทั้งหมด
1.เว็บอีคอมเมิร์ช คลิก
2.เว็บ FOOD POS ขายอาหารหน้าร้าน คลิก
3.เว็บ Coffee POS ขายกาแฟหน้าร้าน คลิก
4.เว็บบริษัท / เว็บองค์กร คลิก
5.ระบบหอพัก โปรแกรมหอพัก คลิก
6.ระบบยืมคืน เบิกจ่ายพัสดุ ครุภัณฑ์ คลิก
7.ระบบแจ้งซ่อมสำหรับองค์กร คลิก
8.ระบบฐานข้อมูลวิจัย คลังข้อมูลวิจัย ฐานข้อมูลวิทยานิพนธ์ Research Corpus คลิก
9.ระบบสอบออนไลน์ คลิก
10.ระบบอื่นๆ เพิ่มเติม คลิก

ขอแนะนำระบบข้อสอบออนไลน์ , ระบบคลังข้อสอบ, โปรแกรมสอบเก็บคะแนน PHP PDO Online Testing System
ขอบเขตระบบ
*ผู้ดูแลระบบ
-ล็อคอิน
-จัดการข้อมูลผู้ดูแลระบบ (เพิ่ม ลบ แก้ไข แก้รหัสผ่าน)
-จัดการข้อมูลวิชา/ตัวเลือก/เฉลย (เพิ่ม ลบ แก้ไข)
-ดูผลสอบรายบุคคล
-ดูรายงาน (Dashboard) รูปแบบกราฟเส้นแสดงจำนวนการเข้าสอบแต่ละวัน

*ผู้ใช้ทั่วไป
-ดูรายวิชาที่เปิดสอบ
-เข้าสอบและดูรายงานผลการสอบ

*ระบบพัฒนาจากอะไร
-ภาษา PHP PDO ฐานข้อมูลใช้ MySQL
-รองรับการทำงาน PHP7 – PHP8
-Frontend หน้าบ้านใช้ Bootstrap4, หลังบ้านใช้ AdminLTE v3
-ระบบสามารถนำไปต่อยอดได้ ใช้จริงได้ แก้ได้ เขียนเพิ่มได้

demo : https://devbanban.com/app/e-test/

ค่าตัว 7000 บาท ได้ Code & Database ทั้งหมด
สนใจ inbox มาที่ https://www.facebook.com/sornwebsites

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

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

PHP PDO
SQL : SELECT, SUM, WHERE, GROUP BY & ORDER BY
highcharts
HTML

มาเริ่มทำ workshop กันครับ *มีคอมเม้นอยู่ในโค้ด

0. ข้อจำกัดของ Workshop นี้คือ คิวรี่ข้อมูลแยกตามปี ข้อเสียคือต้องคิวรี่หลายครั้งตามจำนวนของปีที่ต้องการให้แสดง ส่วนคิวรี่ครั้งเดียวแสดงได้หลายปีอยู่ระหว่างศึกษาครับ หรือใครมีตัวอย่างก็ inbox มาแนะนำกันได้ครับ

1. รวม Workshop PHP PDO ก่อนหน้าคลิก

2. ตารางข้อมูลตัวอย่างจะชื่อ tbl_sales ให้สร้างฐานข้อมูลก่อนครับ เช่น ฐานข้อมูลชื่อ workshop_pdo จากนั้นไปที่เมนู sql คัดลอกโค้ดไปวางและ go

*ข้อมูลตัวอย่างมีให้ 2 ปี คือ ปี 2021 และ 2022

CREATE TABLE `tbl_sales` (
  `no` int(11) NOT NULL,
  `amount` int(11) NOT NULL COMMENT 'รวม',
  `dateCreate` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `tbl_sales` (`no`, `amount`, `dateCreate`) VALUES
(1, 1200, '2022-01-12'),
(2, 1500, '2022-01-31'),
(3, 6500, '2022-02-08'),
(4, 4500, '2022-02-22'),
(5, 1700, '2022-03-16'),
(6, 2500, '2022-03-30'),
(7, 9500, '2022-03-31'),
(8, 1500, '2022-04-20'),
(9, 6500, '2022-04-30'),
(10, 3500, '2022-05-10'),
(11, 300, '2022-05-25'),
(12, 3500, '2022-06-08'),
(13, 1300, '2022-06-29'),
(14, 8000, '2022-07-12'),
(15, 5000, '2022-07-31'),
(16, 4500, '2022-08-08'),
(17, 1700, '2022-08-31'),
(18, 3500, '2022-09-01'),
(19, 2700, '2022-09-22'),
(20, 5000, '2022-10-11'),
(21, 7000, '2022-10-25'),
(22, 1100, '2022-10-30'),
(23, 3100, '2022-11-01'),
(24, 2500, '2022-11-16'),
(25, 900, '2022-11-18'),
(26, 500, '2022-11-30'),
(27, 5000, '2022-12-07'),
(28, 2500, '2022-12-21'),
(29, 4500, '2022-12-28'),
(30, 1500, '2021-01-12'),
(31, 1700, '2021-01-31'),
(32, 1500, '2021-02-08'),
(33, 500, '2021-02-22'),
(34, 1900, '2021-03-16'),
(35, 2500, '2021-03-30'),
(36, 500, '2021-03-31'),
(37, 1900, '2021-04-20'),
(38, 700, '2021-04-30'),
(39, 2500, '2021-05-10'),
(40, 9700, '2021-05-25'),
(41, 600, '2021-06-08'),
(42, 700, '2021-06-29'),
(43, 500, '2021-07-12'),
(44, 100, '2021-07-31'),
(45, 200, '2021-08-08'),
(46, 1700, '2021-08-31'),
(47, 3500, '2021-09-01'),
(48, 9000, '2021-09-22'),
(49, 2200, '2021-10-11'),
(50, 1500, '2021-10-25'),
(51, 1100, '2021-10-30'),
(52, 3100, '2021-11-01'),
(53, 100, '2021-11-16'),
(54, 1500, '2021-11-18'),
(55, 700, '2021-11-30'),
(56, 500, '2021-12-07'),
(57, 4000, '2021-12-21'),
(58, 3500, '2021-12-28');

ALTER TABLE `tbl_sales`
  ADD PRIMARY KEY (`no`);
ALTER TABLE `tbl_sales`
  MODIFY `no` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=59;

CREATE TABLE `tbl_sales` (

`no` int(11) NOT NULL,

`amount` int(11) NOT NULL COMMENT 'รวม',

`dateCreate` date NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `tbl_sales` (`no`, `amount`, `dateCreate`) VALUES

(1, 1200, '2022-01-12'),

(2, 1500, '2022-01-31'),

(3, 6500, '2022-02-08'),

(4, 4500, '2022-02-22'),

(5, 1700, '2022-03-16'),

(6, 2500, '2022-03-30'),

(7, 9500, '2022-03-31'),

(8, 1500, '2022-04-20'),

(9, 6500, '2022-04-30'),

(10, 3500, '2022-05-10'),

(11, 300, '2022-05-25'),

(12, 3500, '2022-06-08'),

(13, 1300, '2022-06-29'),

(14, 8000, '2022-07-12'),

(15, 5000, '2022-07-31'),

(16, 4500, '2022-08-08'),

(17, 1700, '2022-08-31'),

(18, 3500, '2022-09-01'),

(19, 2700, '2022-09-22'),

(20, 5000, '2022-10-11'),

(21, 7000, '2022-10-25'),

(22, 1100, '2022-10-30'),

(23, 3100, '2022-11-01'),

(24, 2500, '2022-11-16'),

(25, 900, '2022-11-18'),

(26, 500, '2022-11-30'),

(27, 5000, '2022-12-07'),

(28, 2500, '2022-12-21'),

(29, 4500, '2022-12-28'),

(30, 1500, '2021-01-12'),

(31, 1700, '2021-01-31'),

(32, 1500, '2021-02-08'),

(33, 500, '2021-02-22'),

(34, 1900, '2021-03-16'),

(35, 2500, '2021-03-30'),

(36, 500, '2021-03-31'),

(37, 1900, '2021-04-20'),

(38, 700, '2021-04-30'),

(39, 2500, '2021-05-10'),

(40, 9700, '2021-05-25'),

(41, 600, '2021-06-08'),

(42, 700, '2021-06-29'),

(43, 500, '2021-07-12'),

(44, 100, '2021-07-31'),

(45, 200, '2021-08-08'),

(46, 1700, '2021-08-31'),

(47, 3500, '2021-09-01'),

(48, 9000, '2021-09-22'),

(49, 2200, '2021-10-11'),

(50, 1500, '2021-10-25'),

(51, 1100, '2021-10-30'),

(52, 3100, '2021-11-01'),

(53, 100, '2021-11-16'),

(54, 1500, '2021-11-18'),

(55, 700, '2021-11-30'),

(56, 500, '2021-12-07'),

(57, 4000, '2021-12-21'),

(58, 3500, '2021-12-28');

ALTER TABLE `tbl_sales`

ADD PRIMARY KEY (`no`);

ALTER TABLE `tbl_sales`

MODIFY `no` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=59;

3.สร้างโฟลเดอร์สำหรับทดสอบ เช่น ชื่อโฟลเดอร์ workshop_pdo *สำหรับคนที่เพิ่งฝึกยังไม่เข้าใจข้อนี้ว่าต้องสร้างไว้ที่ไหน ให้ดูคลิปชุดนี้ก่อน รวมคลิปสอนปรับพื้นฐาน ภาษา php ฟรี 100 คลิป ++ https://devbanban.com/?p=3940

4.ไฟล์ workshop multiple-line-chart.php สามารถเปลี่ยนชื่อไฟล์ได้ เช่น devbanban.php เป็นต้น *มีคอมเม้นใน code

<?php
$servername = "localhost";
$username = "root";
$password = "yourpassword"; //ไม่ได้ตั้งรหัสผ่านก็ลบ yourpassword ออก

try {
  $conn = new PDO("mysql:host=$servername;dbname=workshop_pdo;charset=utf8", $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();
}

//คิวรี่ข้อมูลแยกตามปี  ข้อเสียคือต้องคิวรี่หลายครั้ง *ส่วนคิวรี่ครั้งเดียวได้หลายปีเลย ยังไม่ได้ทำครับ
//2021    
     $stmty2021 = $conn->prepare("
                SELECT SUM(amount) AS t2021 
                FROM tbl_sales 
                WHERE year(dateCreate) = 2021 
                GROUP BY DATE_FORMAT(dateCreate, '%Y-%m')
                ORDER BY DATE_FORMAT(dateCreate, '%Y-%m') ASC
                ");
            $stmty2021->execute();
            $rs1 = $stmty2021->fetchAll();

            $t2021 = Array();
            foreach($rs1 as $rs1) {
                        $t2021[] = $rs1['t2021']; 
                    }
            //ตัดคอมม่าตัวสุดท้ายออก  
            $t2021 = implode(","  ,$t2021);

            //แสดงออกมาดู ลบออกภายหลังได้
            echo 'Year 2021 = '.$t2021 .'<br>'; 

//2022
            $stmty2022 = $conn->prepare("
                SELECT SUM(amount) AS t2022 
                FROM tbl_sales 
                WHERE year(dateCreate) = 2022 
                GROUP BY DATE_FORMAT(dateCreate, '%Y-%m')
                ORDER BY DATE_FORMAT(dateCreate, '%Y-%m') ASC
                ");
            $stmty2022->execute();
            $rs1 = $stmty2022->fetchAll();

            $t2022 = Array();
            foreach($rs1 as $rs1) {
                        $t2022[] = $rs1['t2022']; 
                    }
             //ตัดคอมม่าตัวสุดท้ายออก       
            $t2022 = implode(","  ,$t2022); 

            //แสดงออกมาดู ลบออกภายหลังได้
            echo 'Year 2022 = '.$t2022 .'<br>';

?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>PHP PDO MySQL multiple line chart by devbanban.com  2022</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<!-- ตั้งค่า -->
<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        //ชื่อกราฟ
        title: {
            text: 'เปรียบเทียบรายได้รายปี ',
            x: -20 //center
        },
        //แนวนอน เปลี่ยนเป็นเดือนภาษาไทยได้นะ
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        //ชื่อข้อมูลแนวตั้ง
        yAxis: {
            title: {
                text: ' จำนวนเงิน (บาท)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ' บาท'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [

        {
            name: '2021',
            data: [<?=$t2021;?>]
        }, 
        {
            name: '2022',
            data: [<?=$t2022;?>]
        }
        ]
    });
});
</script>

</head>
<body>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<center>Code & data for Workshop from devbanban.com 2022 </center>
</body>
</html>

<!--
- คอร์สออนไลน์ https://devbanban.com/?p=2867
- ระบบพร้อมใช้  https://devbanban.com/?p=4425
-->

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

<?php

$servername = "localhost";

$username = "root";

$password = "yourpassword"; //ไม่ได้ตั้งรหัสผ่านก็ลบ yourpassword ออก

try {

$conn = new PDO("mysql:host=$servername;dbname=workshop_pdo;charset=utf8", $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();

}

//คิวรี่ข้อมูลแยกตามปี ข้อเสียคือต้องคิวรี่หลายครั้ง *ส่วนคิวรี่ครั้งเดียวได้หลายปีเลย ยังไม่ได้ทำครับ

//2021

$stmty2021 = $conn->prepare("

SELECT SUM(amount) AS t2021

FROM tbl_sales

WHERE year(dateCreate) = 2021

GROUP BY DATE_FORMAT(dateCreate, '%Y-%m')

ORDER BY DATE_FORMAT(dateCreate, '%Y-%m') ASC

");

$stmty2021->execute();

$rs1 = $stmty2021->fetchAll();

$t2021 = Array();

foreach($rs1 as $rs1) {

$t2021[] = $rs1['t2021'];

}

//ตัดคอมม่าตัวสุดท้ายออก

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

//แสดงออกมาดู ลบออกภายหลังได้

echo 'Year 2021 = '.$t2021 .'<br>';

//2022

$stmty2022 = $conn->prepare("

SELECT SUM(amount) AS t2022

FROM tbl_sales

WHERE year(dateCreate) = 2022

GROUP BY DATE_FORMAT(dateCreate, '%Y-%m')

ORDER BY DATE_FORMAT(dateCreate, '%Y-%m') ASC

");

$stmty2022->execute();

$rs1 = $stmty2022->fetchAll();

$t2022 = Array();

foreach($rs1 as $rs1) {

$t2022[] = $rs1['t2022'];

}

//ตัดคอมม่าตัวสุดท้ายออก

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

//แสดงออกมาดู ลบออกภายหลังได้

echo 'Year 2022 = '.$t2022 .'<br>';

<!DOCTYPE html>

<html>

<head>

<title>PHP PDO MySQL multiple line chart by devbanban.com 2022</title>

$(function () {

$('#container').highcharts({

//ชื่อกราฟ

title: {

text: 'เปรียบเทียบรายได้รายปี ',

x: -20 //center

//แนวนอน เปลี่ยนเป็นเดือนภาษาไทยได้นะ

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

//ชื่อข้อมูลแนวตั้ง

yAxis: {

title: {

text: ' จำนวนเงิน (บาท)'

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

tooltip: {

valueSuffix: ' บาท'

legend: {

align: 'right',

verticalAlign: 'middle',

borderWidth: 0

series: [

{

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

{

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

}

]

});

</script>

</head>

<body>

<center>Code & data for Workshop from devbanban.com 2022 </center>

</body>

</html>

<!--

- คอร์สออนไลน์ https://devbanban.com/?p=2867

- ระบบพร้อมใช้ https://devbanban.com/?p=4425

-->

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

ลองเอาไปประยุกต์ใช้ดูครับ และฝากติดตาม 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 MySQL : Multiple Line Chart, แสดงกราฟเส้น (มากกว่า 1 เส้น)

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

Related

Related Post

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

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

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

You missed