google chart API support

1. GOOGLE CHART API
SVTH:
1041034 - Phạm Quang Đô
1041058 – Nguyễn Phát Huy
1041134 – Đỗ Thị Kim Thoa
GVHD:
Nguyễn Huy Khánh
12/18/2012 1

2. Nội Dung
Giới Thiệu
Tham số
Chart Type
Chart Size
Chart Data
Tham Số Khác
POST Request
Nội Dung
12/18/2012 2

3. Giới Thiệu
 Google Chart API (GCA) : Web API của Google.
 Với một URL có cấu trúc, GCA trả về hình ảnh của biểu
đồ tương ứng.
 GCA hỗ trợ các loại : line chart, pie chart, bar chart, venn
chart, radar chart, .....
12/18/2012 3

4. Giới Thiệu
12/18/2012 4

5. Giới Thiệu
 Ví dụ:
 Phân tích một URL đơn giản tạo nên biểu đồ hình tròn sau:
http://chart.apis.google.com/chart?chs=300x130&ch
t=p3&chco=FF9900|76A4FB|3399CC|3366CC&chd
=s:Uf9a&chdl=January|February|March|April&chtt=P
ham+Quang+Do
12/18/2012 5

6. Giới Thiệu
 Ví dụ:
http://chart.apis.google.com/chart?chs=300x130&cht
=p3&chco=FF9900|76A4FB|3399CC|3366CC&chd=
s:Uf9a&chdl=January|February|March|April&chtt=P
ham+Quang+Do
 http://chart.apis.google.com/chart?
 chs=300x130
 cht=p3
 chco=FF9900|76A4FB|3399CC|3366CC
 chd=s:Uf9a
 chdl=January|February|March|April
 chtt=Pham+Quang+Do
12/18/2012 6

7. Giới Thiệu
Các Bước Thực Hiện
– Xác định loại biểu đồ
– Tạo và định dạng số liệu
– Xác định kích thước biểu đồ
– Xác định những thuộc tính khác
– Xác định dùng GET hay POST request
– Tạo URL
12/18/2012 7

8. Nội Dung
Giới Thiệu
Tham số GCA
Chart Size
Chart Type
Chart Data
Tham Số Khác
POST Request
Nội Dung
12/18/2012 8

9. Nội Dung
Giới Thiệu
Tham số GCA
Chart Size
Chart Type
Chart Data
Tham Số Khác
POST Request
Nội Dung
12/18/2012 9

10. Chart Size(chs)
chs=<width>x<height>
• Chiều rộng và chiều cao tính bằng pixel. Giá trị tối đa
là 1,000.
• Chiều ngang x chiều cao không được vượt quá
300,000.
12/18/2012 10

11. Nội Dung
Giới Thiệu
Tham số GCA
Chart Size
Chart Type
Chart Data
Tham Số Khác
POST Request
Nội Dung
12/18/2012 11

12. Chart Type(cht)
cht=<type>[:nda]
• <type>: là giá trị của tất cả các loại biểu đồ được
Google Chart API hỗ trợ
• ―:nda‖.Có thể thêm giá trị này vào để ẩn đi các trục tọa
độ mặc định của từng loại biều đồ
12/18/2012 12

13. Chart Type(cht)
cht=<type>[:nda]
• <type>: là giá trị của tất cả các loại biểu đồ được
Google Chart API hỗ trợ
• ―:nda‖:Có thể thêm giá trị này vào để ẩn đi các trục tọa
độ mặc định của từng loại biều đồ
12/18/2012 13

14. Chart Type(cht)
Pie chart:cht=p Venne Diagram:cht=v
12/18/2012 14

15. Chart Type(cht)
• https://developers.google.com/chart/image/docs/gallery
/chart_gall?hl=vi-VN
12/18/2012 15

16. Chart Data(chd)
1. Basic text format
2. Text format with automatic scaling
3. Text format with custom scaling.
4. Simple encoding format
5. Extended encoding format .
6. Data Scaling and Axis Scaling.
12/18/2012 16

17. Chart Data(chd)
1. Basic text format.
chd=t:val,val,val|val,val,val...
– Chd=t:<data>
– Miền giá trị : 0100.
– Giá trị < 0 : giá trị bị bỏ qua.
– Giá trị > 100: Giá trị = 100.
– Ký tự ‘_’ : ký tự null (tương đương giá trị bị bỏ qua).
– Mỗi dãy số là 1 hay nhiều giá trị được phân cách bằng
dấu ‘,’.
– Phân cách giữa những dãy số bằng ‘|’.
12/18/2012 17

18. Chart Data(chd)
1. Basic text format.
 Ví dụ:
• chd=t:_,30,-30,50,80,200
12/18/2012 18

19. Chart Data(chd)
2. Text format with automatic scaling.
chd=t:val,val,val...
chds=a
• Biểu đồ này sẽ điều chỉnh để các giá trị lớn nhất là ở
phía trên cùng của biểu đồ và nhỏ nhất (hoặc không, nếu
tất cả các giá trị lớn hơn không) sẽ được ở phía dưới.
12/18/2012 19

20. Chart Data(chd)
2. Text format with automatic scaling.
• Ví dụ:
– chd=t:-5,30,-30,50,80,200
chds=a
12/18/2012 20

21. Chart Data(chd)
3. Text format with custom scaling.
chd=t:val,val,val
chds=<series_1_min>,<series_1_max>
• <series_1_min> :Giá trị nhỏ nhất có thể của dãy dữ liệu
thứ 1. Những giá trị trong dãy 1 nhỏ hơn giá trị này sẽ bị
bỏ qua.
• <series_1_max> :Giá trị lớn nhất có thể của dãy dữ liệu
thứ 1. Những giá trị trong dãy 1 lớn hơn giá trị này = giá
trị này.
12/18/2012 21

22. Chart Data(chd)
3. Text format with custom scaling.
• Ví dụ:
– chd=t:30,-60,50,120,80,-90&
chds=-60,140
12/18/2012 22

23. Chart Data(chd)
4. Simple encoding format.
chd=s: <series_1> ,..., <series_n>
• VD: chd=s:BTb19_,Mn5tzb
• Simple encoding format là một định dạng dữ liệu cho
phép bạn thể hiện các giá trị nguyên từ 061.
• Dữ liệu sẽ được chuyển thành chuỗi ký tự chữ và số.
12/18/2012 23

24. Chart Data(chd)
4. Simple encoding format.
• Mỗi dãy là 1 chuỗi, giữa các dãy là ‗,‘ để phân cách, sẽ
ko có phân cách giữa các phân tử trong dãy. Cụ thể sẽ
mã hóa như sau:
• A—Z : A = 0, B = 1, và tiếp cho đến Z = 25
• a—z : a = 26, b = 27, và tiếp cho đến z = 51
• 0—9, : 0 = 52 và tiếp cho đến 9 = 61
• Ký tự (_) là giá trị bị bỏ qua
12/18/2012 24

25. Chart Data(chd)
4. Simple encoding format.
• Ví dụ:
– chd=t:1,19,27,53,61,-1|12,39,57,45,51,27
– chd=s:BTb19_,Mn5tzb
12/18/2012 25

26. Chart Data(chd)
5. Extended encoding format.
chd=e: <series_1> ,...,<series_n>
 Extended encoding format có miền giá trị là 0-4095, và
mã hóa bằng 2 ký tự chữ-số.
 Mỗi dãy là 1 chuỗi, giữa các dãy là ‗,‘ để phân cách, sẽ
ko có phân cách giữa các phần tử trong dãy.
12/18/2012 26

27. Chart Data(chd)
5. Extended encoding format.
• Những ký tự được có thể có trong dãy sau khi mã hóa:
• A—Z
• a—z
• 0—9
• period (.)
• hyphen (-)
• Missing values are indicated with a double underscore
(__).
12/18/2012 27

28. Chart Data(chd)
5. Extended encoding format.
• Cụ thể sẽ mã hóa như sau:
• AA = 0, AB = 1, ...,AZ = 25
• Aa = 26, Ab = 27, …,Az = 51
• A0 = 52, A1 = 53, …,A9 = 61
• A- = 62, A. = 63
• .- = 4094, .. = 4095
12/18/2012 28

29. Chart Data(chd)
5. Extended encoding format.
• Ví dụ:
– chd=t:90,1000,2700,3500|3968,-1,1100,250
– chd=e:BaPoqM2s,-A__RMD6
https://developers.google.com/chart/image/docs/data_formats?hl=vi-VN
12/18/2012 29

30. Chart Data(chd)
6. Data Scaling and Axis Scaling.
 Dữ liệu thường sẽ được thay đổi theo 1 tỷ lệ nào đó với
những kiểu định dạng dữ liệu được quy định, tuy nhiên,
những thông số trên các trục tọa độ lại được tính hoàn
toàn độc lập với việc thay đổi dữ liệu trên. Từ đây,
chúng ta cần phải thay đổi thông số trên trục tọa độ.
12/18/2012 30

31. Chart Data(chd)
6. Data Scaling and Axis Scaling.
Bartchart
Pie Chart
12/18/2012 31

32. Chart Data(chd)
6. Data Scaling and Axis Scaling.
chxr = x,y,z,t
x: 0 hoặc khác 0
y: Vị trí bắt đầu trục X.
z: Giá trị max của trục Y
t: Khoảng cách đơn vị
VD: chxr = 0,-10,60,10
12/18/2012 32

33. Nội Dung
Giới Thiệu
Tham số
Chart Type
Chart Size
Chart Data
Tham Số Khác
POST Request
Nội Dung
12/18/2012 33

34. Tham Số Khác
 chco : Tô màu cho biểu đồ.
 chtt : Thêm phần tiêu đề.
 chdl : Chú thích các thành phần biểu đồ.
 chl : Gán label cho slice trong pie chart.
 Chp:xoay dịch chart.
 Chdls:chỉnh màu và size cho ghi chú.
 Chma:canh lề cho biểu đồ
…
http://code.google.com/apis/chart/docs/chart_params
.html
12/18/2012 34

35. Nội Dung
Giới Thiệu
Tham số
Chart Type
Chart Size
Chart Data
Tham Số Khác
POST Request
Nội Dung
12/18/2012 35

36. Post Request
 Sử dụng GET request thì đơn giản
nhưng chỉ giới hạn có 2K ký tự.
 Google Chart API cho phép sử dụng
POST RequestLên đến 16K kí tự.
 POST request có thể được dùng bởi:
 JavaScript
 PHP
12/18/2012 36

37. Ví dụ minh họa
12/18/2012 37

38. Thanks You
12/18/2012 38