สอนประยุกต์ใช้ Google Chart Tools กับการแสดงรายงานสรุปยอดขายประจำเดือน (PHP MySQL)
เมื่อเราได้เครื่องมือสร้าง 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/
สุดท้ายนี้ผมได้เขียนคอมเม้นท์อธิบายไว้ในโค๊ดเอาไว้เรียบร้อยแล้วนะครับ แต่ถ้ายังสงสัยสามารถสอบถามได้จากกล่องคอมเม้นท์ด้านล่างได้เลยครับ
ขอบคุณมากๆครับ
ตอบลบด้วยความยินดีครับผม ต้องขออภัยที่ตอบช้าไปหน่อยครับ ^___^
ลบความคิดเห็นนี้ถูกผู้เขียนลบ
ตอบลบเลือกแสดงปีก่อนหน้าไม่ได้ค่ะ
ตอบลบ$report_arr มันฟ้องว่าไม่ได้ประกาศครับ
ตอบลบ