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

Published by Việt Coding on

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:

Thu nhập tháng 4 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:

Thu nhập tháng 4 của Việt Coding

Để 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:

Tháng 1 Tháng 2 Tháng 3 Tháng 4
Visits 1.037 1.116 2.439 3.868
Pageviews 4.152 5.951 5.183 7.641
Visitors 780 857 1.924 3.095

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

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ả

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

[/tip]

Quảng cáo tài trợ


Việt Coding

Là một người đam mê lập trình, tôi vọc vạch đủ thứ liên quan đến lập trình cho thoả chí tò mò. Hiện làm chủ yếu ở mảng phát triển ứng dụng di động cho iOS và Android với React Native. Thỉnh thoảng vọc vạch mấy thứ liên quan đến Internet of Things như Smart Home. Đang nghịch mấy con Raspberry Pi và thấy nó cũng thú vị :)

17 Comments

Tôi Yêu Google · 15/05/2010 at 21:34

1 Bài viết hay và chi tiết. Cám ơn bác vì bài viết nhưng em lại thích dùng Excel hơn.
.-= Tôi Yêu Google´s last blog ..Ngày Nhà Giáo Hàn Quốc =-.

    Việt Coding · 16/05/2010 at 08:10

    Thế bác đổi tên lại thành “Tôi yêu Microsoft” đi, để cái tên “Tôi yêu Google” lại cho em 🙂 Em càng ngày càng yếu Gú rồi đấy bác ạ. Trừ cái vụ nó block Google Apps x(

Tùng Lâm · 15/05/2010 at 21:36

Mấy số liệu thống kê thu nhập và visitor kể trên có đúng không bác???

HuỳnhTrung@hutruc.com · 16/05/2010 at 13:44

Cảm ơn bác nhé, để suy nghĩ xem áp dụng nó vào đâu, việc gì cho thích hợp với mình đây.
.-= HuỳnhTrung@hutruc.com´s last blog ..Wp Basic #2: Cài đặt WordPress =-.

    Việt Coding · 16/05/2010 at 14:52

    Dùng được nhiều cho bloggers chuyên nghiệp như chúng ta ấy chứ bác. Thống kê tuần tháng quý năm, thống kê lượng khách, pageviews, thu nhập, thứ hạng… 🙂

Pavel · 17/05/2010 at 11:17

Đã nghe tên thằng này nhưng chưa bao giờ sử dụng nó. Mình cũng quen sử dụng MS Office để vẽ biều đồ thống kê rồi.
Khi nào cần vẽ một biểu đồ thống kê để đưa vào blog thì sẽ tìm tới bài này của bác. 😀
.-= Pavel´s last blog ..Tùy chỉnh footer trong blogspot =-.

Tuan Anh · 18/11/2011 at 00:13

Lấy dữ liệu động từ Database thì làm sao bác hả. Nhờ bác chỉ giúp nha!

Trần Đức Thông · 01/05/2012 at 21:12

Cái này lấy dữ liệu đông kiểu gì hả bác. Bác chỉ cho anh em biết với. Con nếu mà dữ liệu fix sẵn thế này thì xem biểu đồ cũng không có gì hay lắm. Vì mỗi lần thay đổi dữ liệu thì lại phải làm lại biểu đồ hả bác. Hy vọng nhận được câu trả lời của bác.

    memeteacher.blogspot.com · 12/06/2013 at 21:41

    mỗi lần thay đổi dữ liệu thì chắc chắn thay đổi biểu đồ rồi bạn. Còn dữ liệu động thì do API load dữ liệu khác thôi.

Thanh · 15/11/2012 at 21:27

Bai viet rất hay . cảm ơn vietcoding đã dành thời gian chia sẻ .
Thank very much !

nhathong1204 · 20/11/2012 at 10:49

vẽ biểu đồ e toàn xài api của http://www.highcharts.com/
vừa dễ hiểu, lấy dữ liệu động từ dbs cũng okie

Trung · 15/11/2014 at 08:35

Cho mình hỏi nếu dữ liệu đó là mình thống kê được từ cơ sở dữ liệu lên( nghĩa là dữ liệu đó thay đổi). Hiện tại mình đang sử entity framework theo mvc4 để thống kê dữ liệu sau đó muốn hiển thị biểu đồ nhưng không biết làm sao? Bạn nào biết chỉ giúp với, cảm ơn nhiều!

Tweets that mention Vẽ biểu đồ dễ dàng với Google Chart API | Việt Coding | CSharp, Delphi | ASP.NET, PHP, ASP, JSP | WordPres, VBulletin -- Topsy.com · 16/05/2010 at 23:43

[…] This post was mentioned on Twitter by TheShinichi. TheShinichi said: Vẽ biểu đồ dễ dàng với Google Chart API http://goo.gl/fb/8WEOp […]

Google Fonts API: Sử dụng phông chữ trực tiếp từ Google | Việt Coding | CSharp, Delphi | ASP.NET, PHP, ASP, JSP | WordPress, VBulletin · 20/05/2010 at 09:51

[…] như : Google Analytics, Webmaster Tools, FeedBuner, iGoogle, Reader, Website Optimizer, Blogger, Chart API, … và mới đây nhất là Google Font API. Google Fonts […]

[Tổng hợp] – Tuần III tháng 05 | Việt Coding | CSharp, Delphi | ASP.NET, PHP, ASP, JSP | WordPress, VBulletin · 22/05/2010 at 12:48

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

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax