PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

เปรียบเทียบสินค้า 2 รายการขึ้นไป แสดงใน highcharts

12 June 2015 By


จากเนื้อหาตอนที่แล้ว เราได้เข้าใจหลักการดึงข้อมูลจากฐานข้อมูลมาสร้าง
เป็น series หรือชุดข้อมูลสำหรับ highcharts เบื้องต้นอย่างง่าย
 
ดึงข้อมูลจากฐานข้อมูล มาแสดงใน highcharts เบื้องต้น 
http://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="http://code.highcharts.com/highcharts.js"></script>  
<script src="http://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 หากรูปแบบงานอื่น ที่มีจำนวนคอลัมน์หรือเงื่อนไข
    ต่างไปจากนี้ ต้องปรับค่าใหม่ให้เหมาะสมตามแต่รูปแบบนั้น
 
ตัวอย่างผลลัพธ์ที่ได้
 


 

Tags:: export highcharts กราฟ

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง