ดึงข้อมูลจากฐานข้อมูล มาแสดงใน highcharts เบื้องต้น

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

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

ดูแล้ว 15,490 ครั้ง




เนื้อหาในตอนนี้ จะแสดงแนวทางการดึงข้อมูลจากฐานข้อมูล
มาแสดงในรูปแบบกราฟด้วย highchart 
 
sql ตาราง tbl_sell สำหรับทดสอบ
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 กำหนดรูปแบบของกราฟ
 
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 ที่ขายได้แยกรายเดือน' 
        }, 
        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
<?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;
?>

 
 
ตัวอย่างผลลัพธ์ที่ได้
 


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 23-03-2020


โค้ดไฟล์ series_db.php ใช้งานรูปแบบ mysqli


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
<?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);    
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
require_once("dbconnect.php"); 
  
$json_series = array();
$more_q="";
if(isset($_GET['year']) && $_GET['year']!=""){
    $more_q.="AND DATE_FORMAT(date_sell,'%Y') ='".$_GET['year']."' ";
}
$sql = "
    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
";
// การ query จะใช้ group by เดียวกัน เพื่อให้ key ของข้อมูล array ตรงและสัมพันธ์กัน
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_series[] = intval($row['sum_qty']);  // ใช้ intval ฟังชั่นเพื่อกำหนดค่าเป็นตัวเลข
    }
}  
// จัดรูปแบบข้อมูลก่อนแปลงเป็น json object
$json_data[]=array(
    "name"=>"สินค้า A",
    "data"=>$json_series
);
// แปลง array เป็นรูปแบบ json string 
if(isset($json_data)){ 
    $json= json_encode($json_data);   
    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) ขอบคุณครับ