Google Charts เป็นเครื่องมือที่ใช้ในการสร้างแผนภูมิรูปภาพ หรือที่เราเรียกว่ากราฟ (Graphs) หรือชาร์ต (Charts) ที่เราเอาไว้นำเสนอรายงานต่างๆ ซึ่งบริการของ Google Charts นี้สามารถเรียกใช้ในรูปแบบของ Visualization API หรือส่วนต่อประสานโปรแกรมของ Google ที่จะแปลงข้อมูลจากฐานข้อมูลสถิติต่างๆ จากเว็บไซต์ของคุณให้แสดงผลออกมาเป็นรูปแบบแผนภูมิที่ เรียบง่าย ไปจนถึงรูปแบบที่มีลำดับขั้นของข้อมูลที่ซับซ้อน หรือมีขนาดใหญ่ โดยมีรูปแบบ Chart ที่ให้บริการมีมากมาย สามารถเลือกใช้ให้เหมาะสมกับการนำเสนอข้อมูลของเรา
เริ่มต้นแบบเร็วที่สุด โดย Copy โค๊ตแล้วทดสอบเลย ทำให้สามารถเรียนรู้ได้เร็วยิ่งขึ้น
ตัวอย่างที่ใช้ เป็น Pie Chart
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 4],
['Olives', 2],
['Zucchini', 6],
['Pepperoni', 8]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 4],
['Olives', 2],
['Zucchini', 6],
['Pepperoni', 8]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
ขั้นตอนการสร้าง Chart จะต้องโหลด Library ที่จำเป็น ได้แก่
- The Google JSAPI API
- The Google Visualization library
- The library for the chart itself.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
ใน Script ส่วนแรกจะเป็นการโหลด JSAP library. Script ต่อมาจะเป็นการโหลด Google Visualization และ Chart Library เมื่อทำการโค๊ดข้อมูลเสร็จเรียบร้อยแล้วก็มาถึงขั้นตอนการเตรียม data input เข้ามาแสดงผล
การเตรียม Data สำหรับสร้าง Chart
Google Chart Tools charts ต้องใช้ Data ที่หุ้มด้วย JavaScript Class โดยจะเรียกใช้ผ่าน google.visualization.DataTable
จากตัวอย่าง DataTable เป็น ตาราง 2 มิติ ประกอบด้วย rows และ column โดยแต่ละ rows และ colunm ก็จะประกอบไปด้วย datatype ที่แตกต่างกัน จากตัวอย่างประกอบด้วย
type : string
label : Toping
และ
type : number
label : Slices
เราสามารถที่จะปรับแต่ง data ได้ตลอดเวลา หรือแม้แต่เปลี่ยนจาก PieChart เป็น BarChart ก็ได้เพราะChart ทั้ง2 ที่กล่าวมาเป็น Chart 2 มิติเหมือนกัน
**ปล ตามความเข้าใจ มิติ คือ มิติของ ข้อมูลนะครับ ถ้ามี data input ที่เหมือนกันมักจะสามารถเปลี่ยนเป็น Chart รูปแบบอะไรก็ได้**
เรามาลองปรับเปลี่ยนให้เป็น Chart รูปแบบอื่นดีกว่า
ถ้าเราเปลี่ยนจาก PieChart เป็น BarChart
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
มาเป็นchart.draw(data, options);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
จะได้ผลลัพธ์เป็นchart.draw(data, options);
หรือเป็น ColumnChart
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
chart.draw(data, options);
rows หรือ column ต่อมา จะแสดง ค่า(Value)
ซึ่งรูปแบบ Chart จะซับซ้อนตามรูปแบบของข้อมูล (data format)
และที่เป็นที่นิยม คือการคิวรี่ข้อมูลบนเว็บไซต์ได้เลย เช่น การคิวรี่ข้อมูลของ GoogleSpreadsheet โดยใช้ google.visualization.Query เมื่อเราได้ผลลัพธ์เป็น DataTable กลับมาก็สามารถนำมาสร้าง Chart ที่ต้องการได้ทันที
วันนี้พอแค่ก่อนขอให้เรียนรู้ว่า Chart มีกี่แบบ แต่ละแบบใช้ DataTable แบบไหน กี่มิติ
บทหน้าจะกล่าวถึงการ จัดการ DataTable ว่าถ้ามีข้อมูลมากกว่า 2 มิติ ทำอย่างไร
อ้างอิง
https://google-developers.appspot.com/chart/
http://www.daydev.com/2011/api-google-charts.html
