PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

10 June 2015 By
ฐานข้อมูล export กราฟ highcharts

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



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

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








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



Tags:: highcharts กราฟ export ฐานข้อมูล




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

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


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



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


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