Vẽ biểu đồ dễ dàng với Google Chart API

Thỉnh thoảng bạn viết một bài thống kê phân tích kèm với hàng tá những bảng số liệu. Bạn định nhét tất tần tật vào bài ? Tất nhiên là không nên thế , trừ phi bạn có ý định làm rối mắt người đọc 🙂 Giải pháp tốt nhất trong trường hợp này là bạn hình tượng hoá những bảng số liệu bằng biểu đồ – những biểu đồ “biết nói”.

Tuy vậy, trên môi trường web thì biểu đồ chưa được hỗ trợ nhiều, trừ phi bạn sử dụng những thư viện hỗ trợ của các hãng thứ 3. Những thư viện này miễn phí thì không đáp ứng nhu cầu của bạn, còn có phí thì lại quá đắt. Thông thường cho dễ dàng, chúng ta thường dùng những công cụ hỗ trợ vẽ biểu đồ từ số liệu cho sẵn – phổ biến nhất là Microsoft Excel” – rồi xuất ra định dạng hình ảnh đưa lên web. Cách làm này có :

Ưu điểm:
– Thao tác nhanh chóng, dễ dàng.
– Biểu đồ đẹp và đa dạng.

Nhược điểm:
– Vấn đề bản quyền đối với sản phẩm Office
– Mỗi khi số liệu thay đổi, bạn phải tốn công cập nhật lại hình ảnh biểu đồ lên web.

Thật là tốt biết bao nếu có một dịch vụ hỗ trợ webmaster vẽ biểu đồ trực tuyến. Buổi sáng nay tình cờ Việt Coding đã tìm ra. Đó chính là Google Chart API (GCA) của Google.

The Google Chart API is an extremely simple tool that lets people easily create a chart from some data and embed it in a web page. Google creates a PNG image of a chart from data and formatting parameters in an HTTP request. Many types of charts are supported, and by making the request into an image tag, people can simply include the chart in a web page.

Originally it was an internal tool to support rapid embedding of charts within Google’s own applications (like Google Finance for example). Google figured it would be a useful tool to open up to web developers. It officially launched on December 6, 2007.[1]
Currently, line, bar, pie, and radar charts, as well as Venn diagrams, scatter plots, sparklines, maps, google-o-meters, and QR codes are supported.

(Trích WikiPedia)

Theo những thông tin trên thì Google Chart API đã có từ khá lâu (từ tháng 6/2007) tuy nhiên ở Việt Nam ít thấy sử dụng và cho đến nay cũng chưa thấy một bài viết nào về vấn đề này. Vậy Việt Coding xin đi tiên phong vậy 🙂

GCA có 2 dạng biểu đồ là biểu đồ hình (Image Chart)  và biểu đồ tương tác (Interactive Chart). Theo Việt Coding thì có thể hiểu đơn giản như sau:
[tip]Biểu đồ hình: tạo ra ảnh của biểu đồ từ số liệu ở dạng ảnh tĩnh.[/tip]
Biểu đồ hình sử dụng rất đơn giản. Trước hết chúng ta hãy thử xem một thống kê nho nhỏ của Việt Coding:

Các bạn đừng quan tâm đến số liệu trên đồ thị, nó chỉ mang ý nghĩa minh hoạ thôi :D. Thay vào đó, bạn hãy chú ý đến biểu đồ. Biểu đồ này được tạo tự động từ một liên kết cực kỳ đơn giản:

http://chart.apis.google.com/chart?cht=p3&chs=450×200&chd=t:0.64,42.6,2.82,5&chl=Smowtion|Google Adsense|Branchr|Others&chtt=VietCoding Earning 4/2010&chco=4D89F9

Chỉ cần chèn vào phần thuộc tính src của thẻ <img> là chúng ta có được biểu đồ như hình minh hoạ trên.

[html]
<img src="http://chart.apis.google.com/chart?cht=p3&chs=450×200&chd=t:0.64,42.6,2.82,5&chl=Smowtion|Google Adsense|Branchr|Others&chtt=VietCoding Earning 4/2010&chco=4D89F9">
[/html]

Chúng ta hãy cùng phân tích các thành phần của liên kết trên:

http://chart.apis.google.com/chart?

Các tham số chèo vào sau dấu ?:

– cht=p3
Khai báo dạng biểu đồ mà bạn muốn sử dụng. Viết tắt của CHart Type. Bạn có thể tham khảo thêm các dạng biểu đồ khác. Ví dụ trên đây tôi dùng dạng Pie

–chs=450×200
Quy định kích thước của biểu đồ, viết tắt của CHart Size tính theo đơn vị pixel, width x height.

-chd=t:0.64,42.6,2.82,5
Khai báo dữ liệu cho biểu đồ (CHart Data). Ở đây tôi khai báo định dạng text (t) số liệu bao gồm: 0.64, 42.6, 2.82 và 5

-chl=Smowtion|Google Adsense|Branchr|Others
Khai báo CHart Label cho mỗi phần.

-chtt=VietCoding Earning 4/2010
Chart title

-chco=ff0000
Chart color ở định dạng rrggbb hexadecimal.

Trong ví dụ trên bạn có thể thêm màu sắc cho biểu đồ bằng cách sửa lại một chút khai báo phần chco như sau:

Để bạn có thể dễ dàng sử dụng dạng Image Chart này, Google cung cấp thêm cho chúng ta một công cụ có tên gọi là: Live Chart Playground.

Nó giúp chúng ta có thể thử nghiệm các định dạng của biểu đồ một cách thoải mái trước khi quyết định sử dụng sau đó chỉ cần copy liên kết mà nó đã tạo sẵn

http://chart.apis.google.com/chart?cht=bvs&chs=250×250&chd=t:37,16,39,68&chl=1|2|3|4&chtt=Viet+Coding+Visits+Stats&chxt=x,y

Theo Việt Coding nhận thấy, chỉ cần bạn chịu khó đọc và nắm được các tham số của các loại biểu đồ là có thể nhanh chóng sử dụng được ngay thôi :).

[tip]Biểu đồ tương tác: cho phép tuỳ biến biểu đồ nhiều hơn, và nó có thể tương tác với các thành phần khác (element) của trang web. Interactive Chart sử dụng Google Visualization API[/tip]

Interactive Chart so với Image Chart thì hơi khó dùng một chút, nó dành cho những webmaster biết một chút về coding nhưng bù lại, bạn dễ dàng cho ra lò những biểu đồ đẹp hơn, sinh động hơn rất nhiều.

Chúng ta xem xét bảng số liệu sau:

Bảng số liệu trên là thống kê số lượng Visits, Pageviews và Visitors của Việt Coding từ tháng 1 đến cuối tháng 4. Quả là một bảng số liệu khô khan so với biểu đồ sau:

Biểu đồ thống kê Việt Coding tháng 1-4/2010

Live demo

Đoạn mã HTML như sau:

[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Google Charts Tutorial</title>

<!– load Google AJAX API –>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!– Chèn đoạn code Javascript ở đây –>

</head>

<body>

<!–Divs for our charts –>
<div id="chart"></div>
<div id="Chart2"></div>

</body>
</html>
[/html]

Tiếp đến là đoạn mã Javascript

[js]
<script type="text/javascript">
//load the Google Visualization API and the chart
google.load(‘visualization’, ‘1’, {‘packages’:[‘columnchart’,’piechart’]});

//set callback
google.setOnLoadCallback (createChart);

//callback function
function createChart() {

//create data table object
var dataTable = new google.visualization.DataTable();

//define columns
dataTable.addColumn(‘string’,’Quarters’);
dataTable.addColumn(‘number’, ‘Visits’);
dataTable.addColumn(‘number’, ‘Pageviews’);
dataTable.addColumn(‘number’, ‘Visitors’);

//define rows of data
dataTable.addRows([
[‘1’, 1037, 4152, 780],
[‘2’, 1116, 5951, 857],
[‘3’, 2439, 5183, 1924],
[‘4’, 3868, 7641, 3095]
]);

//instantiate our chart objects

var chart = new google.visualization.ColumnChart (document.getElementById(‘chart’));

//define options for visualization
var options = {width: 800, height: 400, is3D: true, title: ‘VietCoding Stats’};

//draw our chart
chart.draw(dataTable, options);
}
</script>
[/js]

Có thể đoạn code trên khá là phức tạp với bạn, chúng ta sẽ đi từng bước với ví dụ khác đơn giản hơn:

[js]
//callback function
function createChart() {

//create data table object
var dataTable = new google.visualization.DataTable();

//define columns
dataTable.addColumn(‘string’,’VietCoding Visits’);
dataTable.addColumn(‘number’, ‘Visits’);

//define rows of data
dataTable.addRows([[‘1’,1037], [‘2’,1116],[‘3’,2439],[‘4’,3868]]);

//instantiate our chart object
var chart = new google.visualization.ColumnChart (document.getElementById(‘chart’));

//define options for visualization
var options = {width: 400, height: 240, is3D: true, title: ‘VietCoding Stats’};

//draw our chart
chart.draw(dataTable, options);
}
[/js]

Trước hết đảm bảo rằng bạn đã khai báo sử dụng thư viện của Google:

[html]
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
[/html]

Tiếp đó, load Google Visualization API

[js]
//load the Google Visualization API and the chart
google.load(‘visualization’, ‘1’, {‘packages’: [‘columnchart’]});
[/js]

Khai báo một bảng dữ liệu (DataTable) – Khái niệm này khá quen thuộc với .Net developer 🙂

[js]
//create data table object
var dataTable = new google.visualization.DataTable();
[/js]

Khai báo cột của DataTable, ở đây chúng ta có một cột lưu các tháng (dạng dữ liệu là chuỗi – string) và một cột lưu số lượng Visits (dạng số – number) ứng với tháng đó.

[js]
//define columns
dataTable.addColumn(‘string’,’Month’);
dataTable.addColumn(‘number’, ‘Visits’);
[/js]

Tiếp đến ta chèn dữ liệu vào bảng, tham số đầu tiên là tháng và tham số thứ 2 là lượt visits

[js]
//define rows of data
dataTable.addRows([[‘1’,1037], [‘2’,1116],[‘3’,2439],[‘4’,3868]]);
[/js]

Trường hợp muốn thêm tháng 5, 6 chúng ta chỉ cần thêm vào [‘5’, 4625], [‘6’, 6245]

Khai báo các tuỳ chọn (options) của biểu đồ, ví dụ như kích thước, tên,..

[js]
//define options for visualization
var options = {width: 400, height: 240, is3D: true, title: ‘VietCoding Stats’};
[/js]

Sau đó vẽ biểu đồ:

[js]
//draw our chart
chart.draw(dataTable, options);
[/js]

Kết quả:

Kết quả

Live demo

Google Chart API còn rất nhiều những tính năng mà trong khuôn khổ một bài viết hạn hẹp Việt  Coding không thể nêu hết, những phần đó dành cho các bạn khám phá. Biết đâu bạn sẽ bổ sung vào Google Visualization Gallery những mẫu biểu đồ mới tuyệt đẹp thì sao!

Việt Coding hi vọng bài viết này sẽ giúp ích nhiều cho các bạn, từ đây với “món” này trong tay, Việt Coding tin rằng những bài viết của các bạn sẽ càng sinh động hơn, rực rỡ hơn và đương nhiên là cuốn hút đọc giả hơn rồi 🙂

[tip]Một số liên kết quan trọng trong bài viết

• Google Chart Tools
• Chart Gallery
• Google Live Chart Playground
• Google Visualization Gallery

[/tip]