เมื่อเราได้เครื่องมือสร้าง 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 มันฟ้องว่าไม่ได้ประกาศครับ
ตอบลบ