Sử dụng Google Chart API

Với các ứng dụng web thường phải hiển thị nhiều dữ liệu, chúng ta nên sử dụng các loại biểu đồ để trực quan hoá dữ liệu, giúp cho người đọc nhanh chóng nắm bắt được thông tin để ra quyết định. Thường thì các công cụ lập trình, nền tảng web, … đều có các thư viện để vẽ biểu đồ đồ hoạ, tuy nhiên việc này có khi nảy sinh một số vấn đề:

  • Mỗi nền tảng, ngôn ngữ lại có các lib khác nhau, sử dụng khác nhau, và kết quả ra nó cũng khác nhau
  • Lúc lib bị lỗi, không tương thích, … thì phải đi sửa
  • Tốn công tìm hiểu, tích hợp lib vào chương trình
  • Tốn công nâng cấp

Trong thời đại ngày nay, muốn tồn tại, phát triển nhanh chóng thì cần phải biết sử dụng các ưu điểm của SOA (kiến trúc hướng dịch vụ), làm web phải biết Mashup, … Do vậy bài viết này tôi giới thiệu với các bạn sử dụng Google Chart API để vẽ biểu đồ nhanh chóng, tốt, chuẩn

GCA là gì?

là sản phẩm của google, nên nói chung là tốt, dễ dùng vẽ biểu đồ

Chart with line in yellowDark gray line chart with pale gray background and chart area in a white to blue vertical linear gradient from bottom to top

Blue line chart with alternating gray and white stripes from left to rightThree lines on a chart; chart is shaded in green from bottom to first line, red from first to second line, dark blue from second to third line and pale blue from third line to top of the chart

one data set is colored in dark blue the second is stacked in pale blueVertical grouped bar chart in blue and black, bars and spaces are automatically sized

Three-dimensional pie chart with four segments where segment colors are interpolated from dark to pale orangeTwo concentric pie charts with four segments each, where segment colors are interpolated from dark to pale orange

Scatter plot with default blue circle data points in different sizes as defined by a third data setRadar chartMap of Africa

Google-o-meter with default red to green coloringQR code

GCA có lợi gì?

dễ dùng dễ học, và dùng rồi thì nhớ ngay thống nhất cách vẽ, cách sử dụng, dùng trong nền tảng, ngôn ngữ nào cũng xong

Không nên dùng GCA trong trường hợp nào?

  • desktop app: thường các ứng dụng desktop sẽ hiển thị kết quả ngay khi ta ra lệnh, nếu dùng GCA, việc hiển thị biểu đồ sẽ hơi chậm một chút, có thể gây nhiều khó chịu
  • không có internet tại máy sử dụng: nếu không có internet, không dùng được GCA, vì đây là mashup, là web service mà
  • yêu cầu biểu đồ với tính năng quá phức tạp, nhiều tầng lớp, nhiều tính năng cao cấp: GCA hiện đang phát triển, nên tính năng không phải là phong phú lắm. Nếu bạn muốn có đường xu hướng, đường dự báo, xếp lớp … tương đương với biểu đồ của MS Excel thì tạm thời chưa nên dùng GCA (Chú ý: nếu đặt yêu cầu tương đương Excel thì quá cao, hầu như rất ít lib biểu đồ có khả năng tương đương Excel, vì MS làm lib của Excel từ lâu, quá tốt và ổn định, phong phú đủ tính năng)

Dùng thế nào?

Bạn phi URL tới GCA, nó xuất ra ảnh dạng PNG cho bạn (URL có thể phi rất đơn giản bằng cách dùng thẻ img, đặt src=URL mà bạn muốn)

URL phải ở dạng sau: http://chart.apis.google.com/chart?&&

VD: http://chart.apis.google.com/chart?chs=250×100&chd=t:60,40&cht=p3&chl=guru|core

Trong đó:

  • bắt đầu bằng http://chart.apis.google.com/chart?
  • nối các tham số theo sau, phân cách bằng dấu &
  • chs=250×100 kích cỡ của biểu đồ, bằng pixel.
  • chd=t:60,40 dữ liệu để vẽ biểu đồ.
  • cht=p3 kiểu biểu đồ.
  • chl=guru|core nhãn trên biểu đồ.

Chú ý, khi nhúng URL trong thẻ HTML <img> , nhớ thay dấu & thành chuỗi ký tự escape & nhé.

Các tham số bắt buộc phải có khi vẽ biểu đồ là:

Kích cỡ

Ghi dạng chs=[chiều rộng]x[chiều dài] , tính bằng pixel

VD: chs=300×200

Kích cỡ lớn nhất GCA cho phép là một ảnh biểu đồ 300,000 pixels, và mỗi chiều không quá 1000pixels. Như vậy kích thước lớn nhất có thể là 1000×300, 300×1000, 600×500, 500×600, 800×375, and 375×800.

Với dạng biểu đồ maps, kích thước lớn nhất là 440×220

Dữ liệu

Phần Dữ liệu này phải nói là khá lằng nhằng, không đơn giản như khi ta vẽ biểu đồ bằng excel, cứ phi 100, 200, 3000 vào là xong. Do thời gian có hạn nên mời các bạn tự tìm hiểu lấy vậy.

Kiểu biểu đồ

Hiện thì GCA hỗ trợ các kiểu biểu đồ sau:

  • 1. Line charts
  • 2. Bar charts
  • 3. Pie charts Updated!
  • 4. Venn diagrams
  • 5. Scatter plots
  • 6. Radar charts
  • 7. Maps
  • 8. Google-o-meters
  • 9. QR codes

chỉnh kiểu bằng tham số cht=[kiểu]

.

2 thoughts on “Sử dụng Google Chart API

  1. Bài viết rất bổ ích.
    nhưng hình như cái này không vẽ được với data lớn.
    Ví dụ khi mình vẽ chart cho các giá trị sau: 1296,1295,1310,1324,1339,1322,1324,1330,1333,1347,1364,1360,1327,1345,1373,1376,1375,1396,1398,1396,1385,1400

    Thì nó chả ra cái gì cả😦

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s