วันเสาร์ที่ 12 มกราคม พ.ศ. 2556

สอนประยุกต์ใช้ Google Chart Tools กับการแสดงรายงานสรุปยอดขายประจำเดือน (PHP MySQL)

       วันนี้ได้ลองประยุกต์ใช้ Google Chart Tools ในรายการสรุปยอดขายประจำเดือนดูครับ ทำให้รายงานมีสีสันและดูเข้าใจง่ายขึ้นครับ ว่ารายได้ในแต่ละเดือนมีแนวโน้มเป็นยังไงบ้าง ความจริงแล้วต้องมีรายงานประจำวันและรายงานประจำปีอีกครับที่ต้องทำ โดยใช้หลักการดึงข้อมูลจากฐานข้อมูลเดียวกันครับ เพียงแค่เปลี่ยนข้อมูลที่จะเอามาแสดงเท่านั้นว่าจะแสดงแบบวันหรือเดือนหรือปีครับ บทความนี้จะสอนฉพาะรายงานประจำเดือนก่อนครับ ถ้ามีเวลาผมจะสอนแสดงรายงานให้ครบทุกรายงานเลยครับ
      เมื่อเราได้เครื่องมือสร้าง Chart มาแล้ว ก็คือ Google Chart Tools ต่อมาให้เราเลือกรูปแบบกราฟให้เหมาะสมกับรายงานครับ โดยผมได้เลือก กราฟแบบแท่งแนวตั้งครับ เพราะจะทำให้เห็นแนวโน้มยอดขายจากซ้ายไปขวาครับ ว่ามีเพิ่มหรือลดลงไปเท่าไหร่ หรืออาจใช้กราฟแท่งแนวนอนก็ได้ครับแล้วแต่ความชอบ และกราฟแบบแนวตั้งและแนวนอนมันจะรองรับจำนวนแท่งของกราฟได้แตกต่างกันครับ กราฟแนวตั้งจะรองรับค่อนข้างจำกัดเพราะเราต้องFixความกว้างให้กับหน้าเว็บ ส่วนกราฟแนวนอนถ้าเราไม่Fixความสูง มันก็จะสามารถแสดงกราฟได้ไม่จำกัดเลยครับ ดังนั้นที่ผมเลือกกราฟแท่งตั้งเพราะผมรู้ข้อมูลว่ามันแสดงแค่ 12 แท่งเท่านั้น ก็คือเดือนทั้ง12เดือนนั้นเองครับ
    สำหรับฐานข้อมูลที่ใช้มาจากที่นี่เลยครับ-> http://php-for-ecommerce.blogspot.com/p/blog-page_18.html
ซึ่งจะมีเทเบิล tb_order,tb_orderview
tb_order = เอาไว้เก็บข้อมูลการสั่งซื้อ เช่น เลขที่ใบสั่งซื้อ,สั่งซื้อวันที่,ผู้สั่งซื้อ,สถานะการสั่งซื้อ (ยังไม่ชำระเงิน,ชำระเงินแล้ว/รอการจัดส่ง,จัดส่งสินค้าเรียบร้อยแล้ว)
tb_orderview = เก็บรายละเอียดการสั่งซื้อซึ่งจะแยกย่อยมาจาก tb_order โดยมีฟิลด์ od_id Join กับ 2 เทเบิลนี้อยู่ครับ
โดยมีข้อมูลเช่น รหัสสินค้าที่สั่งซื้อ,จำนวนที่สั่งซื้อ,ราคา
หรือใช้โค๊ดSQLข้างล่างนี้เลยก็ได้ครับ

-- โครงสร้างตาราง `tb_order`
-- 
CREATE TABLE `tb_order` (
  `od_id` int(10) NOT NULL auto_increment COMMENT 'รหัสการสั่งซื้อ',
  `mb_user` varchar(50) default NULL COMMENT 'Usernameของสมาชิก',
  `od_date` date default NULL COMMENT 'วันที่สั่งซื้อ',
  `od_status` char(1) default '1',
  PRIMARY KEY  (`od_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=14 ;

-- 
-- dump ตาราง `tb_order`
-- 

INSERT INTO `tb_order` VALUES (2, 'ladygaga', '2012-01-01', '3');
INSERT INTO `tb_order` VALUES (1, 'ladygaga', '2012-02-03', '3');
INSERT INTO `tb_order` VALUES (3, 'tiger', '2012-03-10', '3');
INSERT INTO `tb_order` VALUES (4, 'tiger', '2013-01-01', '3');
INSERT INTO `tb_order` VALUES (7, 'tiger', '2013-02-10', '3');
INSERT INTO `tb_order` VALUES (8, 'ladygaga', '2012-04-02', '3');
INSERT INTO `tb_order` VALUES (9, 'tiger', '2012-06-23', '3');
INSERT INTO `tb_order` VALUES (10, 'tiger', '2012-09-01', '3');
INSERT INTO `tb_order` VALUES (11, 'ladygaga', '2012-12-12', '3');
INSERT INTO `tb_order` VALUES (12, 'chai', '2013-01-11', '1');
INSERT INTO `tb_order` VALUES (13, 'tip', '2013-01-08', '2');

-- --------------------------------------------------------

-- 
-- โครงสร้างตาราง `tb_orderview`
-- 

CREATE TABLE `tb_orderview` (
  `odv_id` int(11) NOT NULL auto_increment COMMENT 'รหัสรายละเอียดสั่งซื้อ',
  `od_id` int(10) default NULL COMMENT 'รหัสสั่งซื้อ',
  `pd_id` int(11) default NULL COMMENT 'รหัสสินค้าที่สั่งซื้อ',
  `odv_amount` int(5) default NULL COMMENT 'จำนวนที่สั่งซื้อ',
  `odb_price` float(9,2) default NULL COMMENT 'ราคาต่อชิ้น',
  PRIMARY KEY  (`odv_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=33 ;

-- 
-- dump ตาราง `tb_orderview`
-- 

INSERT INTO `tb_orderview` VALUES (30, 11, 5, 10, 650.00);
INSERT INTO `tb_orderview` VALUES (29, 10, 22, 4, 1300.00);
INSERT INTO `tb_orderview` VALUES (28, 9, 19, 3, 2000.00);
INSERT INTO `tb_orderview` VALUES (27, 8, 3, 3, 139.00);
INSERT INTO `tb_orderview` VALUES (26, 7, 1, 1, 1190.00);
INSERT INTO `tb_orderview` VALUES (25, 3, 3, 3, 139.00);
INSERT INTO `tb_orderview` VALUES (24, 6, 1, 2, 1190.00);
INSERT INTO `tb_orderview` VALUES (23, 5, 1, 6, 1190.00);
INSERT INTO `tb_orderview` VALUES (22, 2, 2, 2, 79.00);
INSERT INTO `tb_orderview` VALUES (21, 4, 19, 3, 950.00);
INSERT INTO `tb_orderview` VALUES (20, 2, 20, 3, 259.00);
INSERT INTO `tb_orderview` VALUES (19, 1, 2, 1, 79.00);
INSERT INTO `tb_orderview` VALUES (18, 1, 1, 1, 1190.00);
INSERT INTO `tb_orderview` VALUES (31, 12, 2, 1, 1234.00);
INSERT INTO `tb_orderview` VALUES (32, 13, 34, 12, 690.00);

สร้างไฟล์ report_ revenue_month.php พิมพ์โค๊ดตามนี้เลยครับ

<?php
$conn=mysql_connect('localhost','root','root');//เชื่อมต่อกับฐานข้อมูล
mysql_select_db('db_exshop1');//เลือกฐานข้อมูล
mysql_query('SET NAMES UTF8');//เซตให้รองรับภาษาไทย
//ตัวแปร $month เอาไว้เก็บค่าเดือนทั้งหมด เราจะเอาไว้วนลูปแสดงในตารางครับ
$month=array(1=>'มกราคม',2=>'กุมภาพันธ์',3=>'มีนาคม',4=>'เมษายน',5=>'พฤษภาคม',6=>'มิถุนายน',
7=>'กรกฎาคม',8=>'สิงหาคม',9=>'กันยายน',10=>'ตุลาคม',11=>'พฤศจิกายน',12=>'ธันวาคม');
$sql="SELECT
 DATE_FORMAT(tb_order.od_date,'%c') as month,
SUM(tb_orderview.odv_amount * tb_orderview.odb_price) AS totalRevenue
FROM
tb_order
Left Join tb_orderview ON tb_order.od_id = tb_orderview.od_id WHERE tb_order.od_status=3 ";
// tb_order.od_status=3  3 หมายถึง จัดส่งสินค้าเรียบร้อยแล้ว ซึ่งหมายถึงกระบวนการสั่งซื้อได้เสร็จสิ้นสมบรูณ์แล้วนั่นเอง
// 1=ยังไม่ชำระเงิน,2=ชำระเงินแล้ว/รอจัดส่ง,3=ชำระเงิน/จัดส่งสินค้าเรียบร้อยแล้ว 
if(!empty($_GET['year'])){//หากมีการเลือกปี ให้แสดงยอดขายของเดือนที่อยู่ในปีนั้นๆ
    $getYear=$_GET['year'];
 $sql.=" AND YEAR(tb_order.od_date)='".$getYear."'";
}else{//หากไม่เลือกอะไร ให้แสดงยอดขายในปีปัจจุบัน
    $getYear=date('Y');
 $sql.=" AND YEAR(tb_order.od_date)='".$getYear."'";
}
$sql.=" GROUP BY YEAR(tb_order.od_date), MONTH(tb_order.od_date) ORDER BY DATE_FORMAT(tb_order.od_date,'%m') ASC ";
//ผลลัพธ์ที่ได้จะเป็น  เดือนที่กับรายได้รวมของเดือน เช่น 1 | 1000 หมายถีงรายได้รวมของเดือนที่ 1 คือ 1,000 บาท
$rs_report=mysql_query($sql) or die(mysql_error());
$chart="['ประจำเดือน','รายได้']";
while($show_report=mysql_fetch_assoc($rs_report)){//ดึงข้อมูลที่ได้จากฐานข้อมูลมาเก็บไว้ในตัวแปรแบบอาเรย์ ($report_arr)
     $report_arr[$show_report['month']]=$show_report['totalRevenue'];
}
foreach($month as $key_m => $val_m){
 $chart.=",['".$val_m."',".($report_arr[$key_m]*1)."]";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>สรุปยอดขายประจำเดือน</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([<?=$chart?>]);
        var options = {
          title: 'สรุปยอดขายประจำเดือน',
     vAxis: {title: "Revenue"},
            hAxis: {title: "Month"},
   isStacked: true,
    'legend': 'none',
        }
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_show'));
        chart.draw(data, options);
      }
    </script>
<style type="text/css">
body{
font-size:13px;
font-family:Tahoma, Geneva, sans-serif; 
color:#333;
}
</style>
</head>

<body>
    <div align="center"><h3>รายงานสรปยอดขายประจำเดือน<br /><br />
</h3></div>
<div align="center">
      <form id="form1" name="form1" method="get" action="">
        <label for="month"></label>
        เลือกปี 
        <select name="year" id="year">
        <?php for($year=2010;$year<=date('Y');$year++){?>
        <option value="<?=$year?>" <?=$getYear==$year?'selected':'' ?>><?=($year+543)?></option>
        <?php  }?>
        </select>
        <input type="submit" name="btsearch" id="btsearch" value="ค้นหารายงาน" />
  </form>
    </div>    
    <table width="100%" border="0">
      <tr>
        <td align="center"><div id="chart_show" style="width:750px;height:500px;" ></div></td>
      </tr>
      <tr>
        <td><table width="450" border="0" align="center" cellpadding="3" cellspacing="1">
  <tr>
    <td width="426" align="center" bgcolor="#91C6D5"><strong>เดือน</strong></td>
    <td width="214" align="center" bgcolor="#91C6D5"><strong>ยอดขาย</strong></td>
  </tr>
  <?php  
  $totalRevenue=0;
  foreach($month as $key_m => $val_m){
   $totalRevenue+=$report_arr[$key_m];
  ?>
  <tr>
    <td align="center" bgcolor="#E8E8E8"><?=$val_m?></td>
    <td align="center" bgcolor="#E8E8E8"><?=number_format(($report_arr[$key_m]),2,'.',',')?></td>
  </tr>
  <?php } ?>
  <tr>
    <td align="right"><strong>รายได้รวมทั้งหมด</strong></td><td align="center"><b><?=number_format($totalRevenue,2,'.',',')?></b></td></tr>
</table></td>
      </tr>
    </table>
</body>
</html>
<?php  mysql_close($conn);?>

      บทความนี้ ผมได้ใช้เวลาทำหลายชั่วโมงเลยครับ เพราะต้องเสียเวลากับ Google Chart สิ่งที่ผมต้องการและยังทำไม่ได้คือ สลับสีแท่งกราฟ, แสดงข้อมูลบนแท่งกราฟ ซึ่งผมได้ลองเสิร์ทดูแล้ว ได้ข้อสรุปว่า มันทำได้เฉพาะกับกราฟที่เป็นรูปภาพเท่านั้นครับ ศึกษาได้จากที่นี่ครับ -> https://developers.google.com/chart/image/
     สุดท้ายนี้ผมได้เขียนคอมเม้นท์อธิบายไว้ในโค๊ดเอาไว้เรียบร้อยแล้วนะครับ แต่ถ้ายังสงสัยสามารถสอบถามได้จากกล่องคอมเม้นท์ด้านล่างได้เลยครับ

5 ความคิดเห็น :

  1. ขอบคุณมากๆครับ

    ตอบลบ
    คำตอบ
    1. ด้วยความยินดีครับผม ต้องขออภัยที่ตอบช้าไปหน่อยครับ ^___^

      ลบ
  2. ความคิดเห็นนี้ถูกผู้เขียนลบ

    ตอบลบ
  3. ไม่ระบุชื่อ19 มกราคม 2558 02:29

    เลือกแสดงปีก่อนหน้าไม่ได้ค่ะ

    ตอบลบ
  4. $report_arr มันฟ้องว่าไม่ได้ประกาศครับ

    ตอบลบ