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

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

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

ดูแล้ว 14,406 ครั้ง




เนื้อหาในตอนนี้ จะแสดงแนวทางการดึงข้อมูลจากฐานข้อมูล
มาแสดงในรูปแบบกราฟด้วย 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;
?>  

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


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


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


<?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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







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






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

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

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

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



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




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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ