รายงานแบบกราฟแท่ง php+mysqli+database+Chart.js

ตัวอย่างการออกรายงานยอดขายรายปีแบบกราฟแท่ง php+mysqli+database+Chart.js

ภาพตัวอย่าง

Example Data

CREATE TABLE `prdsales` (
  `s_id` int(11) NOT NULL,
  `totals` float(10,2) NOT NULL,
  `datesave` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `prdsales`
--

INSERT INTO `prdsales` (`s_id`, `totals`, `datesave`) VALUES
(1, 22.00, '2018-06-13'),
(3, 33.00, '2016-06-13'),
(4, 111.00, '2017-06-30'),
(5, 90.00, '2017-07-15'),
(6, 30000.00, '2018-01-05'),
(7, 200000.00, '2017-06-16'),
(8, 25500.00, '2017-06-07'),
(9, 4800.00, '2017-06-29'),
(10, 9999.00, '2017-06-16'),
(11, 5200.00, '2017-06-27'),
(12, 100000.00, '2016-07-03'),
(13, 50000.00, '2018-01-10'),
(14, 8500.00, '2018-01-09'),
(15, 70000.00, '2015-01-01'),
(16, 98000.00, '2015-01-01'),
(17, 50000.00, '2019-01-31'),
(18, 20000.00, '2019-01-31');


ALTER TABLE `prdsales`
  ADD PRIMARY KEY (`s_id`);

--
ALTER TABLE `prdsales`
  MODIFY `s_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=19;

CREATE TABLE `prdsales` (

`s_id` int(11) NOT NULL,

`totals` float(10,2) NOT NULL,

`datesave` date NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data for table `prdsales`

INSERT INTO `prdsales` (`s_id`, `totals`, `datesave`) VALUES

(1, 22.00, '2018-06-13'),

(3, 33.00, '2016-06-13'),

(4, 111.00, '2017-06-30'),

(5, 90.00, '2017-07-15'),

(6, 30000.00, '2018-01-05'),

(7, 200000.00, '2017-06-16'),

(8, 25500.00, '2017-06-07'),

(9, 4800.00, '2017-06-29'),

(10, 9999.00, '2017-06-16'),

(11, 5200.00, '2017-06-27'),

(12, 100000.00, '2016-07-03'),

(13, 50000.00, '2018-01-10'),

(14, 8500.00, '2018-01-09'),

(15, 70000.00, '2015-01-01'),

(16, 98000.00, '2015-01-01'),

(17, 50000.00, '2019-01-31'),

(18, 20000.00, '2019-01-31');

ALTER TABLE `prdsales`

ADD PRIMARY KEY (`s_id`);

ALTER TABLE `prdsales`

MODIFY `s_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=19;

Example Code PHP

<html>
<head>
    <meta charset="utf-8">
    <title>รายงานในแบบกราฟ by devbanban.com</title>
</head>
<?php
$con= mysqli_connect("localhost","root","password","db_name") or die("Error: " . mysqli_error($con));

mysqli_query($con, "SET NAMES 'utf8' ");
 
$query = "
SELECT SUM(totals) AS totol, DATE_FORMAT(datesave, '%Y') AS datesave
FROM prdsales 
GROUP BY DATE_FORMAT(datesave, '%Y%')
";
$result = mysqli_query($con, $query);
$resultchart = mysqli_query($con, $query);  


 //for chart
$datesave = array();
$totol = array();

while($rs = mysqli_fetch_array($resultchart)){ 
  $datesave[] = "\"".$rs['datesave']."\""; 
  $totol[] = "\"".$rs['totol']."\""; 
}
$datesave = implode(",", $datesave); 
$totol = implode(",", $totol); 
 
?>

<h3 align="center">รายงานในแบบกราฟ by devbanban.com</h3>
<table width="200" border="1" cellpadding="0"  cellspacing="0" align="center">
  <thead>
  <tr>
    <th width="10%">ปี</th>
    <th width="10%">ยอดขาย</th>
  </tr>
  </thead>
  
  <?php while($row = mysqli_fetch_array($result)) { ?>
    <tr>
      <td align="center"><?php echo $row['datesave'];?></td>
      <td align="right"><?php echo number_format($row['totol'],2);?></td> 
    </tr>
    <?php } ?>

</table>
<?php mysqli_close($con);?>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
<hr>
<p align="center">

 <!--devbanban.com-->

<canvas id="myChart" width="800px" height="300px"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [<?php echo $datesave;?>
    
        ],
        datasets: [{
            label: 'รายงานภาพรวม แยกตามปี (บาท)',
            data: [<?php echo $totol;?>
            ],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>  
</p> 
  <!--devbanban.com-->
</html>

100

101

102

103

<html>

<head>

<title>รายงานในแบบกราฟ by devbanban.com</title>

</head>

<?php

$con= mysqli_connect("localhost","root","password","db_name") or die("Error: " . mysqli_error($con));

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

$query = "

SELECT SUM(totals) AS totol, DATE_FORMAT(datesave, '%Y') AS datesave

FROM prdsales

GROUP BY DATE_FORMAT(datesave, '%Y%')

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

$resultchart = mysqli_query($con, $query);

//for chart

$datesave = array();

$totol = array();

while($rs = mysqli_fetch_array($resultchart)){

$datesave[] = "\"".$rs['datesave']."\"";

$totol[] = "\"".$rs['totol']."\"";

}

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

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

<h3 align="center">รายงานในแบบกราฟ by devbanban.com</h3>

<thead>

<tr>

<th width="10%">ยอดขาย</th>

</tr>

</thead>

<?php while($row = mysqli_fetch_array($result)) { ?>

<tr>

</tr>

<?php } ?>

</table>

<?php mysqli_close($con);?>

<hr>

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {

type: 'bar',

data: {

labels: [<?php echo $datesave;?>

datasets: [{

label: 'รายงานภาพรวม แยกตามปี (บาท)',

data: [<?php echo $totol;?>

backgroundColor: [

'rgba(255, 99, 132, 0.2)',

'rgba(54, 162, 235, 0.2)',

'rgba(255, 206, 86, 0.2)',

'rgba(75, 192, 192, 0.2)',

'rgba(153, 102, 255, 0.2)',

'rgba(255, 159, 64, 0.2)'

borderColor: [

'rgba(255,99,132,1)',

'rgba(54, 162, 235, 1)',

'rgba(255, 206, 86, 1)',

'rgba(75, 192, 192, 1)',

'rgba(153, 102, 255, 1)',

'rgba(255, 159, 64, 1)'

borderWidth: 1

}]

options: {

scales: {

yAxes: [{

ticks: {

beginAtZero:true

}

}]

}

});

</script>

</p>

</html>

อย่าลืมเอาไปพัฒนาต่อนะครับ devbanban.com

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

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

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

devbanban

รายงานแบบกราฟแท่ง php+mysqli+database+Chart.js

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

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

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พิศิษฐ์ บวรเลิศสุธี

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

Share this:

Related

Related Post

You missed