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 icon smile Vẽ biểu đồ dễ dàng với Google Chart API 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 icon smile Vẽ biểu đồ dễ dàng với Google Chart API

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:

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

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.

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

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:

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

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

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

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 1Tháng 2Tháng 3Tháng 4
Visits1.0371.1162.4393.868
Pageviews4.1525.9515.1837.641
Visitors7808571.9243.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:

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

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

Live demo

Đoạn mã HTML như sau:

<!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>

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

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

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:

//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);
}

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

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

Tiếp đó, load Google Visualization API

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

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 icon smile Vẽ biểu đồ dễ dàng với Google Chart API

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

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 đó.

//define columns
dataTable.addColumn('string','Month');
dataTable.addColumn('number', 'Visits');

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

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

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,..

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

Sau đó vẽ biểu đồ:

//draw our chart
chart.draw(dataTable, options);

Kết quả:

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

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 icon smile Vẽ biểu đồ dễ dàng với Google Chart API

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

[/tip]

About Author

Tuấn Anh

Là một người đam mê lập trình, hiện tập trung mảng phát triển ứng dụng web dựa trên nền tảng của WordPress. Đồng thời, nhằm đạt sự trọn vẹn trong công việc freelance, tôi đang học đồ hoạ, để có thể tự mình thiết kế layout, logo và những thứ khác liên quan đến đồ họa. Mục tiêu vài năm tới: Tôi sẽ là Full Web Developer = Graphics Design + Coding. Vietcoding Blog viết về WordPress, chia sẻ kinh nghiệm, mẹo vặt, viết plugin, làm theme và ôm ấp ý tưởng viết một Web Application Framework dựa trên WordPress. Đồ hoạ là chuyên mục đang được chuẩn bị trong tương lai.



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

  1. 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 =-.

    1. 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(

  2. Tùng Lâm says:

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

    1. Đều đúng cả bác ợ :D

  3. 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ỳ[email protected]´s last blog ..Wp Basic #2: Cài đặt WordPress =-.

    1. 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… :)

  4. Pavel says:

    Đã 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. :D
    .-= Pavel´s last blog ..Tùy chỉnh footer trong blogspot =-.

  5. Tuan Anh says:

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

  6. Trần Đức Thông says:

    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.

    1. memeteacher.blogspot.com says:

      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.

  7. Thanh says:

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

  8. nhathong1204 says:

    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

    1. Thông tin rất hữu ích ! Cám ơn bạn :)


Got Something To Say:

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