PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สร้างกราฟแนวตั้ง ดึงข้อมูลจากฐานข้อมูล ใน google chart

09 December 2014 By


เนื้อหาตอนนี้ จะให้แนวทางในการประยุกต์ ดึงข้อมูลจากฐานข้อมูล
ซึ่งโดยทั่วไปชุดข้อมูลในฐานข้อมูล จะเป็นลักษณะเรียกกันเป็นแถวๆ 
แต่การใช้งานใน google chart เพื่อสร้างกราฟแนวตั้ง จะมีการนำข้อมูล
มาเปรียบเทียบ ชุดข้อมูล จึงมาลักษณะเป็นแบบ คล้ายๆ matrix หรือ array
หลายมิติ 
ดังนั้นการดึงข้อมูลมาแสดงโดยตรงแบบง่าย จะไม่สามารถทำได้ หรือมีขึ้นตอน
ที่ซับซ้อนเกินไป
ตัวอย่างชุดข้อมูลที่ใช้ในการสร้างกราฟแนวตั้ง อย่างง่าย
 
    // สร้างตัวแปร array เก็บค่า ข้อมูล
    var dataArray1=[
      ['ปี', 'ยอดขาย', 'ค่าใช้จ่าย'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]            
    ];
 
ดูรูปแบบการสร้างกราฟอย่างง่ายในตัวอย่างตอนก่อนหน้าที่
 
แนะนำ สร้างกราฟแนวตั้ง ด้วย google chart อย่างง่าย 
http://www.ninenik.com/content.php?arti_id=592 via @ninenik
 
ทีนี้เรามาลองทดสอบดึงข้อมูลจากฐานข้อมูลดูกันบ้าง สมมติเรามีชุดฐานข้อมูล
การขายสินค้า 3 ชนิด คือ A B และ C โดยมียอดจำนวนที่ขายได้ ของแต่ละรายการ
ในแต่ละเดือนตาม โครงสร้างฐานข้อมูลด้านล่าง
 
CREATE TABLE `tbl_sale` (
  `sale_id` int(11) NOT NULL auto_increment,
  `name` varchar(50) collate utf8_unicode_ci NOT NULL,
  `quantity` int(11) NOT NULL,
  `date` date NOT NULL,
  PRIMARY KEY  (`sale_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=37 ;

-- 
-- Dumping data for table `tbl_sale`
-- 

INSERT INTO `tbl_sale` VALUES (1, 'A', 220, '2014-01-01');
INSERT INTO `tbl_sale` VALUES (2, 'A', 400, '2014-02-01');
INSERT INTO `tbl_sale` VALUES (3, 'A', 250, '2014-03-01');
INSERT INTO `tbl_sale` VALUES (4, 'A', 500, '2014-04-01');
INSERT INTO `tbl_sale` VALUES (5, 'A', 400, '2014-05-01');
INSERT INTO `tbl_sale` VALUES (6, 'A', 800, '2014-06-01');
INSERT INTO `tbl_sale` VALUES (7, 'A', 300, '2014-07-01');
INSERT INTO `tbl_sale` VALUES (8, 'A', 200, '2014-08-01');
INSERT INTO `tbl_sale` VALUES (9, 'A', 200, '2014-09-01');
INSERT INTO `tbl_sale` VALUES (10, 'A', 170, '2014-10-01');
INSERT INTO `tbl_sale` VALUES (11, 'A', 750, '2014-11-01');
INSERT INTO `tbl_sale` VALUES (12, 'A', 550, '2014-12-01');
INSERT INTO `tbl_sale` VALUES (13, 'B', 300, '2014-01-01');
INSERT INTO `tbl_sale` VALUES (14, 'B', 300, '2014-02-01');
INSERT INTO `tbl_sale` VALUES (15, 'B', 600, '2014-03-01');
INSERT INTO `tbl_sale` VALUES (16, 'B', 400, '2014-04-01');
INSERT INTO `tbl_sale` VALUES (17, 'B', 700, '2014-05-01');
INSERT INTO `tbl_sale` VALUES (18, 'B', 800, '2014-06-01');
INSERT INTO `tbl_sale` VALUES (19, 'B', 900, '2014-07-01');
INSERT INTO `tbl_sale` VALUES (20, 'B', 400, '2014-08-01');
INSERT INTO `tbl_sale` VALUES (21, 'B', 300, '2014-09-01');
INSERT INTO `tbl_sale` VALUES (22, 'B', 200, '2014-10-01');
INSERT INTO `tbl_sale` VALUES (23, 'B', 100, '2014-11-01');
INSERT INTO `tbl_sale` VALUES (24, 'B', 190, '2014-12-01');
INSERT INTO `tbl_sale` VALUES (25, 'C', 200, '2014-01-01');
INSERT INTO `tbl_sale` VALUES (26, 'C', 230, '2014-02-01');
INSERT INTO `tbl_sale` VALUES (27, 'C', 100, '2014-03-01');
INSERT INTO `tbl_sale` VALUES (28, 'C', 230, '2014-04-01');
INSERT INTO `tbl_sale` VALUES (29, 'C', 490, '2014-05-01');
INSERT INTO `tbl_sale` VALUES (30, 'C', 220, '2014-06-01');
INSERT INTO `tbl_sale` VALUES (31, 'C', 190, '2014-07-01');
INSERT INTO `tbl_sale` VALUES (32, 'C', 260, '2014-08-01');
INSERT INTO `tbl_sale` VALUES (33, 'C', 530, '2014-09-01');
INSERT INTO `tbl_sale` VALUES (34, 'C', 450, '2014-10-01');
INSERT INTO `tbl_sale` VALUES (35, 'C', 120, '2014-11-01');
INSERT INTO `tbl_sale` VALUES (36, 'C', 320, '2014-12-01');
 
 
โดยจากฐานข้อมูลข้างเรา สิ่งที่เราต้องการ มีรุปแบบดังนี้
 
    var dataArray1=[
      ['เดือน', 'สินค้า A', 'สินค้า B', 'สินค้า C'],
      ['ม.ค.',  ยอดรวม A,ยอดรวม B,ยอดรวม C],
      ['ก.พ.',  ยอดรวม A,ยอดรวม B,ยอดรวม C],
      ['มี.ค.',  ยอดรวม A,ยอดรวม B,ยอดรวม C],
      [........... ไปเรื่อยๆ จนครบ 12 เดือน ...... ]            
    ];    
 
ดูตัวอย่างผลลัพธ์ ก่อนเริ่ม
 
 
เราจะสร้างไฟล์เพื่อสร้างข้อมูลจากฐานข้อมูลได้ดัง 
ไฟล์ gen_data_chart.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);  
// ส่วนติดต่อกับฐานข้อมูล
mysql_connect("localhost","root","") or die("Cannot connect the Server");     
mysql_select_db("test") or die("Cannot select database");     
mysql_query("set character set utf8");   
?>
<?php
// ในที่นี้เราจะใช้เป็นเดือน จึงมีการสร้าง array เก็บค่าเดือน
$thai_month=array(   
"ม.ค.",     
"ก.พ.",     
"มี.ค.",     
"เม.ย.",     
"พ.ค.",     
"มิ.ย.",      
"ก.ค.",     
"ส.ค.",     
"ก.ย.",     
"ต.ค.",     
"พ.ย.",     
"ธ.ค."                       
);  
// สร้างฟังก์ชั่น หายอดจำนวนที่ขายได้รวม ในแต่ละเดือน ของสินค้าใดๆ
// โดยจะสิ่งชื่อสินค้า และปี เข้าไปเพื่อตรวจสอบ และสร้างค่าตัวแปร array 
// ชุดข้อมูล
function getData($val,$year){
    $arr_data=array();
    // คำสั่ง sql เปลี่ยนไปตามความเหมาะสม ขึ้นกับว่าเป็นข้อมูลประเภทไหน
    // และต้องการใช้ข้อมูลในลักษณะใด ในที่นี้ เป็นการหายอดรวม ของสินค้า
    // แต่ละรายการ ในแต่ละเดือน ของปี ที่ส่งค่าตัวแปรมา 
    $q="
    SELECT 
    SUM(quantity) as total_quantity 
    FROM tbl_sale WHERE name='".$val."' AND date LIKE '".$year."%'
    GROUP BY DATE_FORMAT( DATE,  '%Y-%m-01' ) 
    ";    
    $qr=mysql_query($q);
    while($rs=mysql_fetch_array($qr)){    
        $arr_data[]=$rs['total_quantity'];
    }
    return $arr_data;  // ส่งค่ากลับชุด array ข้อมูล
}
// สร้างชุด array ข้อมูลของสินค้า A ปี เป็นตัวแปร $_GET['year'] ที่เราส่งมาในที่นี้คือปี 2014
$col_A=getData('A',$_GET['year']); // สร้างชุด array ข้อมูลของสินค้า A
$col_B=getData('B',$_GET['year']); // สร้างชุด array ข้อมูลของสินค้า B
$col_C=getData('C',$_GET['year']); // สร้างชุด array ข้อมูลของสินค้า C
// กำหนดตัวแปร $i ไว้อ้างอิง key ของชุดข้อมูล array
$i=0;
$q="
SELECT 
sale_id 
FROM tbl_sale 
GROUP BY DATE_FORMAT( DATE,  '%Y-%m-01' ) 
";
// การ query จะใช้ group by เดียวกัน เพื่อให้ key ของข้อมูล array ตรงและสัมพันธ์กัน
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
	$json_data[]=array(
        $thai_month[$i],  // สร้างข้อมูลแถวที่สองขึั้นไป คอลัมน์แรก อันนี้คือ เดือนย่อ
        intval($col_A[$i]),  // สร้างข้อมูลแถวที่สองขึั้นไป คอลัมน์ที่สอง ข้อมูลยอดรวมของ สินค้า A
        intval($col_B[$i]),  // สร้างข้อมูลแถวที่สองขึั้นไป คอลัมน์ที่สาม ข้อมูลยอดรวมของ สินค้า B
        intval($col_C[$i])  // สร้างข้อมูลแถวที่สองขึั้นไป คอลัมน์ที่สี่ ข้อมูลยอดรวมของ สินค้า C
	);	
    $i++; // เพื่ม key ของตัวแปร arrray
}
// ใส่ชุดข้อมูลแถวแรกเข้าไปในตัวแปร array 
array_unshift($json_data,array("เดือน","สินค้า A","สินค้า B","สินค้า C"));
$json= json_encode($json_data); // แปลงข้อมูล array เป็น ข้อความ json object นำไปใช้งาน
echo $json;
?>
 
ต่อไปมาดูการเรียกใช้งานข้อมูล ที่ได้จากไฟล์ gen_data_chart.php
ไฟล์ google_chart_db.php  คำอธิบายแสดงในโค้ด

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div style="margin:auto;width:80%;">
<div id="chart_div" style="margin:auto;width: 850px; height: 400px;"></div>  
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
    
    // ตั้งค่าต่างๆ ของกราฟ
    var options = { 
        title: "หัวข้อกราฟแนวตั้ง",
        hAxis: {title: 'ข้อความแนวนอน', titleTextStyle: {color: 'red'}},
        vAxis: {title: 'ข้อความแนวตั้ง', titleTextStyle: {color: 'blue'}},
        width: 850,
        height: 400,
        bar: {groupWidth: "70%"},
        legend: { position: 'right', maxLines: 3 },
        tooltip: { trigger: 'select' }
    };    
    
    // ดึงข้อมูลจากฐานข้อมูลสร้างตัวแปร array ข้อมูลสำหรับใช้งาน
    $.getJSON( "gen_data_chart.php",{ 
        year:'2014' // ส่งค่าตัวแปร ไปถ้ามี ในที่นี้ ส่งปีไป เพราะจะดูข้อมูลรายเดือนของปีที่ก่ำหนด
    },function( data ) { 
            dataArray=data; // รับค่าข้อมูล เก็บไว้ในตัวแปร array
        
            // แปลงข้อมูลจาก array สำหรับใช้ในการสร้าง กราฟ
            var data = google.visualization.arrayToDataTable(dataArray);

            // สร้างกราฟแนวตั้ง แสดงใน div id = chart_div
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);  // สร้างกราฟ
        
    });
    
}
</script>       
</body>
</html>


 

Tags:: google chart





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