เนื้อหาตอนนี้ จะให้แนวทางในการประยุกต์ ดึงข้อมูลจากฐานข้อมูล
ซึ่งโดยทั่วไปชุดข้อมูลในฐานข้อมูล จะเป็นลักษณะเรียกกันเป็นแถวๆ
แต่การใช้งานใน google chart เพื่อสร้างกราฟแนวตั้ง จะมีการนำข้อมูล
มาเปรียบเทียบ ชุดข้อมูล จึงมาลักษณะเป็นแบบ คล้ายๆ matrix หรือ array
หลายมิติ
ดังนั้นการดึงข้อมูลมาแสดงโดยตรงแบบง่าย จะไม่สามารถทำได้ หรือมีขึ้นตอน
ที่ซับซ้อนเกินไป
ตัวอย่างชุดข้อมูลที่ใช้ในการสร้างกราฟแนวตั้ง อย่างง่าย
1 2 3 4 5 6 7 8 | // สร้างตัวแปร array เก็บค่า ข้อมูลvar dataArray1=[ ['ปี', 'ยอดขาย', 'ค่าใช้จ่าย'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]; |
ดูรูปแบบการสร้างกราฟอย่างง่ายในตัวอย่างตอนก่อนหน้าที่
แนะนำ สร้างกราฟแนวตั้ง ด้วย google chart อย่างง่าย
https://www.ninenik.com/content.php?arti_id=592 via @ninenik
ทีนี้เรามาลองทดสอบดึงข้อมูลจากฐานข้อมูลดูกันบ้าง สมมติเรามีชุดฐานข้อมูล
การขายสินค้า 3 ชนิด คือ A B และ C โดยมียอดจำนวนที่ขายได้ ของแต่ละรายการ
ในแต่ละเดือนตาม โครงสร้างฐานข้อมูลด้านล่าง
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 41 42 43 44 45 46 47 48 | 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'); |
โดยจากฐานข้อมูลข้างเรา สิ่งที่เราต้องการ มีรุปแบบดังนี้
1 2 3 4 5 6 7 | var dataArray1=[ ['เดือน', 'สินค้า A', 'สินค้า B', 'สินค้า C'], ['ม.ค.', ยอดรวม A,ยอดรวม B,ยอดรวม C], ['ก.พ.', ยอดรวม A,ยอดรวม B,ยอดรวม C], ['มี.ค.', ยอดรวม A,ยอดรวม B,ยอดรวม C], [........... ไปเรื่อยๆ จนครบ 12 เดือน ...... ] ]; |
ดูตัวอย่างผลลัพธ์ ก่อนเริ่ม
เราจะสร้างไฟล์เพื่อสร้างข้อมูลจากฐานข้อมูลได้ดัง
ไฟล์ gen_data_chart.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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <?phpheader("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 คำอธิบายแสดงในโค้ด
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 41 42 43 44 45 46 47 48 49 50 | <!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">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> |
เนื้อหาที่เกี่ยวข้อง