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

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
highcharts chart export กราฟ

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ highcharts chart export กราฟ

ดูแล้ว 7,097 ครั้ง


จากเนื้อหาตอนที่แล้ว เราได้เข้าใจหลักการดึงข้อมูลจากฐานข้อมูลมาสร้าง
เป็น series หรือชุดข้อมูลสำหรับ highcharts เบื้องต้นอย่างง่าย
 
ดึงข้อมูลจากฐานข้อมูล มาแสดงใน highcharts เบื้องต้น 
 
 
แต่ในการใช้งานจริง เราจะพบว่า ข้อมูลนั้นเป็นไปได้ที่จะมีไม่ครบ คอลัมน์
เช่น เรามีคอลัมน์เดือนทั้งหมด 12 คอลัมน์ และมีข้อมูลครบทุกเดือน
กราฟของเราจะทำงานถูกต้อง 
แต่ถ้าเรามีบางเดือน ไม่มีข้อมูล ก็จะเป็นผลให้ชุดข้อมูล มีจำนวนไม่ถึง 12
กราฟก็จะทำงานไม่ถูกต้อง ดังนั้นเนื้อหาในตอนนี้ จะเป็นแนวทางการแก้ไข
ปัญหาดังกล่าว รวมถึงการเพิ่มเติมในส่วนของการแสดงข้อมูลเปรียบเทียบ
สินค้าตั้งแต่ 2 รายการขึ้นไปมาแสดง
 
คำสั่ง sql ตาราง tbl_sell (มีเพิ่มส่วนของสินค้า B เข้ามาสองรายการลำดับที่ 13 และ 14)
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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 เล็กน้อย ปรับหัวข้อใหม่เป็นเปรียบเทียบรายการ
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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 เหมือนเดิมจากตอนที่แล้ว
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?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 หากรูปแบบงานอื่น ที่มีจำนวนคอลัมน์หรือเงื่อนไข
    ต่างไปจากนี้ ต้องปรับค่าใหม่ให้เหมาะสมตามแต่รูปแบบนั้น
 
ตัวอย่างผลลัพธ์ที่ได้
 


 


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 13-11-2018


กรณีใช้งาน mysqli

โค้ดไฟล์ dbconnect.php
 
1
2
3
4
5
6
7
8
9
10
11
<?php 
$mysqli = new mysqli("localhost", "root","","test"); 
/* check connection */
if ($mysqli->connect_errno) { 
    printf("Connect failed: %sn", $mysqli->connect_error); 
    exit(); 
} 
if(!$mysqli->set_charset("utf8")) { 
    printf("Error loading character set utf8: %sn", $mysqli->error); 
    exit(); 
}
 
 
ไฟล์ series_db.php
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?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);
require_once("inc/dbconnect.php");
$json_data = array();
 
$more_sql = "";
$_year = (isset($_GET['year']) && trim($_GET['year'])!="")?trim($_GET['year']):NULL;
if(!empty($_year)){
    $more_sql.= "AND DATE_FORMAT(date_sell,'%Y') ='".$_year."' ";
}
// การเรียงข้อมูลหรือ order by ควรใช้ id สินค้าค้าหรือชื่อสินค้า และ วันที่
$sql = "
SELECT name,date_sell,SUM(qty) as sum_qty FROM tbl_sell
WHERE 1 $more_sql
GROUP BY name,DATE_FORMAT(date_sell,'%Y-%m')
ORDER BY name,date_sell
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $char_month=substr($row['date_sell'],5,2);  // หาตัวเลขสองตัวระบุเดิอน เช่น 01,12,11
        $arr_name[$row['name']]=$row['name'];  // เก็บชื่อสินค้า key เป็นไปได้ให้ใช้ id แทนชื่อจะดีกว่า
        $json_data[$row['name']][$char_month]=intval($row['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,...
        );       
    }
}
// แปลง array เป็นรูปแบบ json string 
if(isset($json_data)){ 
    $json= json_encode($json_series);   
    if(isset($_GET['callback']) && $_GET['callback']!=""){   
    echo $_GET['callback']."(".$json.");";       
    }else{   
    echo $json;   
    }   
}
?>


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง



Tags:: chart กราฟ export highcharts




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

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



( หรือ เข้าใช้งานผ่าน Social Login )




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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ