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

    // สร้างตัวแปร array เก็บค่า ข้อมูล
    var dataArray1=[
      ['ปี', 'ยอดขาย', 'ค่าใช้จ่าย'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]            
    ];

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 เดือน ...... ]            
    ];    

<?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;
?>

<!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() {
    
    // ตั้งค่าต่างๆ ของกราฟ ปรับแต่ง https://developers.google.com/chart/interactive/docs/gallery/columnchart
    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>