จากเนื้อหาตอนที่แล้ว เราได้เข้าใจหลักการดึงข้อมูลจากฐานข้อมูลมาสร้าง
เป็น series หรือชุดข้อมูลสำหรับ highcharts เบื้องต้นอย่างง่าย
ดึงข้อมูลจากฐานข้อมูล มาแสดงใน highcharts เบื้องต้น
https://www.ninenik.com/content.php?arti_id=641 via @ninenik
แต่ในการใช้งานจริง เราจะพบว่า ข้อมูลนั้นเป็นไปได้ที่จะมีไม่ครบ คอลัมน์
เช่น เรามีคอลัมน์เดือนทั้งหมด 12 คอลัมน์ และมีข้อมูลครบทุกเดือน
กราฟของเราจะทำงานถูกต้อง
แต่ถ้าเรามีบางเดือน ไม่มีข้อมูล ก็จะเป็นผลให้ชุดข้อมูล มีจำนวนไม่ถึง 12
กราฟก็จะทำงานไม่ถูกต้อง ดังนั้นเนื้อหาในตอนนี้ จะเป็นแนวทางการแก้ไข
ปัญหาดังกล่าว รวมถึงการเพิ่มเติมในส่วนของการแสดงข้อมูลเปรียบเทียบ
สินค้าตั้งแต่ 2 รายการขึ้นไปมาแสดง
คำสั่ง sql ตาราง tbl_sell (มีเพิ่มส่วนของสินค้า B เข้ามาสองรายการลำดับที่ 13 และ 14)
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=15 ; -- -- 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'); INSERT INTO `tbl_sell` VALUES (13, 'สินค้า B', 39, '2015-03-01'); INSERT INTO `tbl_sell` VALUES (14, 'สินค้า B', 75, '2015-06-01');
ตารางประกอบคำอธิบาย tbl_sell
| 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 |
| 13 | สินค้า B | 39 | 2015-03-01 |
| 14 | สินค้า B | 75 | 2015-06-01 |
1. เบื้องต้นแก้ไขไฟล์ chartoptions.js เล็กน้อย ปรับหัวข้อใหม่เป็นเปรียบเทียบรายการ
var chartOptions={
chart: {
type: 'column'
},
title: {
text: 'เปรียบเทียบสินค้า A และ B ที่ขายได้แยกรายเดือน'
},
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']."' ";
}
// การเรียงข้อมูลหรือ order by ควรใช้ id สินค้าค้าหรือชื่อสินค้า และ วันที่
$q="
SELECT name,date_sell,SUM(qty) as sum_qty FROM tbl_sell
WHERE 1 $more_q
GROUP BY name,DATE_FORMAT(date_sell,'%Y-%m')
ORDER BY name,date_sell
";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
$char_month=substr($rs['date_sell'],5,2); // หาตัวเลขสองตัวระบุเดิอน เช่น 01,12,11
$arr_name[$rs['name']]=$rs['name']; // เก็บชื่อสินค้า key เป็นไปได้ให้ใช้ id แทนชื่อจะดีกว่า
$json_data[$rs['name']][$char_month]=intval($rs['sum_qty']); // เก็บข้อมูลแต่ละเดือนถ้ามี
}
// จัดรูปแบบข้อมูลก่อนแปลงเป็น json object
// วนลูปแสดง array โดยยึด key ของชื่อสินค้า ซึ่งในที่นี้จะมีสินค้าสองรายการ
if(count($arr_name)>0){
foreach($arr_name as $val_name){ // วนลูปเพื่อใช้งาน ชื่อสินค้า
// เทคนิคการกำหนดข้อมูลให้ครบเดือน กรณีข้อมูลของบางเดือนไม่มีในฐานข้อมูล
for($i=1;$i<=12;$i++){
$char_chk=str_pad($i,2,"0",STR_PAD_LEFT);
if(!isset($json_data[$val_name][$char_chk])){ // ตรวจสอบ key เดือนไหนไม่มี
$json_data[$val_name][$char_chk]=0; // .ให้กำหนดค่าเป็น 0
}
}
ksort($json_data[$val_name]); // จัดเรียง key ข้อมูลใหม่ ให้ไล่จาก 01,02,....,11,12
$json_series[]=array(
"name"=>$val_name,
"data"=>array_values($json_data[$val_name]) // เปลี่ยน key เป็น 0,1,2,...
);
}
}
$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;
?>
จะเห็นว่าในส่วนของไฟล์ series_db.php เราจะมีการปรับการกำหนดค่าต่างๆ ให้เหมาะสม
รวมทั้งเทคนิคการกำหนดค่าให้กับชุดข้อมูลที่ขาดไปให้ครบตามจำนวนคอลัมน์
แนวทางนี้จะกับคอลัมน์ที่เป็น เดือน 12 หากรูปแบบงานอื่น ที่มีจำนวนคอลัมน์หรือเงื่อนไข
ต่างไปจากนี้ ต้องปรับค่าใหม่ให้เหมาะสมตามแต่รูปแบบนั้น
ตัวอย่างผลลัพธ์ที่ได้
เนื้อหาที่เกี่ยวข้อง