เนื้อหาในตอนนี้ จะแสดงแนวทางการดึงข้อมูลจากฐานข้อมูล
มาแสดงในรูปแบบกราฟด้วย highchart
sql ตาราง tbl_sell สำหรับทดสอบ
CREATE TABLE `tbl_sell` ( `id_sell` int(11) NOT NULL auto_increment, `name` varchar(100) NOT NULL, `qty` int(11) NOT NULL, `date_sell` date NOT NULL, PRIMARY KEY (`id_sell`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=13 ; -- -- Dumping data for table `tbl_sell` -- INSERT INTO `tbl_sell` VALUES (1, 'สินค้า A', 49, '2015-01-01'); INSERT INTO `tbl_sell` VALUES (2, 'สินค้า A', 71, '2015-02-01'); INSERT INTO `tbl_sell` VALUES (3, 'สินค้า A', 106, '2015-03-01'); INSERT INTO `tbl_sell` VALUES (4, 'สินค้า A', 129, '2015-04-01'); INSERT INTO `tbl_sell` VALUES (5, 'สินค้า A', 144, '2015-05-01'); INSERT INTO `tbl_sell` VALUES (6, 'สินค้า A', 176, '2015-06-01'); INSERT INTO `tbl_sell` VALUES (7, 'สินค้า A', 135, '2015-07-01'); INSERT INTO `tbl_sell` VALUES (8, 'สินค้า A', 148, '2015-08-01'); INSERT INTO `tbl_sell` VALUES (9, 'สินค้า A', 216, '2015-09-01'); INSERT INTO `tbl_sell` VALUES (10, 'สินค้า A', 194, '2015-10-01'); INSERT INTO `tbl_sell` VALUES (11, 'สินค้า A', 95, '2015-11-01'); INSERT INTO `tbl_sell` VALUES (12, 'สินค้า A', 54, '2015-12-01');
ตารางฐานข้อมูลประกอบการอธิบาย
| id_sell | name | qty | date_sell |
| 1 | สินค้า A | 49 | 2015-01-01 |
| 2 | สินค้า A | 71 | 2015-02-01 |
| 3 | สินค้า A | 106 | 2015-03-01 |
| 4 | สินค้า A | 129 | 2015-04-01 |
| 5 | สินค้า A | 144 | 2015-05-01 |
| 6 | สินค้า A | 176 | 2015-06-01 |
| 7 | สินค้า A | 135 | 2015-07-01 |
| 8 | สินค้า A | 148 | 2015-08-01 |
| 9 | สินค้า A | 216 | 2015-09-01 |
| 10 | สินค้า A | 194 | 2015-10-01 |
| 11 | สินค้า A | 95 | 2015-11-01 |
| 12 | สินค้า A | 54 | 2015-12-01 |
1. สร้าง chartoptions.js กำหนดรูปแบบของกราฟ
var chartOptions={
chart: {
type: 'column'
},
title: {
text: 'จำนวนสินค้า A ที่ขายได้แยกรายเดือน'
},
subtitle: {
text: 'ที่มา: แสดงหัวข้อย่อย'
},
xAxis: {
categories: [
'ม.ค.',
'ก.พ.',
'มี.ค.',
'เม.ย.',
'พ.ค.',
'มิ.ย.',
'ก.ค.',
'ส.ค.',
'ก.ย.',
'ต.ค.',
'พ.ย.',
'ธ.ค.'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'จำนวน (ชิ้น)'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
}
}
2. โครงสร้างไฟล์ทดสอบ highcharts_db.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Highcharts</title>
</head>
<body>
<div style="width:80%;margin:auto;">
<div id="hc_container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.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 src="chartoptions.js"></script>
<script type="text/javascript">
$(function () {
// ดึงข้อมูลจากฐานข้อมูลสร้างตัวแปร object series ข้อมูลสำหรับใช้งาน
$.getJSON( "series_db.php",{
year:'2015' // ส่งค่าตัวแปร ไปถ้ามี ในที่นี้ ส่งปีไป เพราะจะดูข้อมูลรายเดือนของปีที่ก่ำหนด
},function(data) {
var dataSeries=data; // รับค่าข้อมูลตัวแปร object series
$('#hc_container').highcharts(
$.extend(chartOptions,{
series:dataSeries
})
);
});
});
</script>
</body>
</html>
3. สร้างไฟล์ดึงข้อมูลจากฐานข้อมูลสร้างรูปแบบ json object สำหรับ highcharts
ไฟล์ series_db.php
<?php
header("Content-type:application/json; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// เชื่อมต่อฐานข้อมูล
$link=mysql_connect("localhost","root","") or die("error".mysql_error());
mysql_select_db("test",$link);
mysql_query("set character set utf8");
$more_q="";
if(isset($_GET['year']) && $_GET['year']!=""){
$more_q.="AND DATE_FORMAT(date_sell,'%Y') ='".$_GET['year']."' ";
}
$q="
SELECT SUM(qty) as sum_qty FROM tbl_sell
WHERE 1 $more_q
GROUP BY DATE_FORMAT(date_sell,'%Y-%m')
ORDER BY date_sell
";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
$json_data[]=intval($rs['sum_qty']); // ใช้ intval ฟังชั่นเพื่อกำหนดค่าเป็นตัวเลข
}
// จัดรูปแบบข้อมูลก่อนแปลงเป็น json object
$json_series[]=array(
"name"=>"สินค้า A",
"data"=>$json_data
);
$json= json_encode($json_series); // แปลงข้อมูล array เป็น ข้อความ json object นำไปใช้งาน
// ทำให้ json ไฟล์รองรับ callback function สำหรับ cross domain
if(isset($_GET['callback']) && $_GET['callback']!=""){
echo $_GET['callback']."(".$json.");";
}else{
echo $json;
}
exit;
?>
ตัวอย่างผลลัพธ์ที่ได้
เนื้อหาที่เกี่ยวข้อง