'구글 챠트'에 해당되는 글 2건

  1. 2009.05.29 구글 챠트 API (Google Chart API) - 1
  2. 2009.05.25 QR코드 사용하기 (Using QR Code)

구글은 다양한 서비스를 만드는것에 그치지 않고 일반인들이 자신의 서비스를 직접 이용할 수 있도록 거의 대부분의 경우 서비스에 대한 API를 제공해준다. 그 중 상당히 유용하게 사용할 수 있는것중에 하나가 Chart API이다.

이를 사용하면 동적으로 다양한 종류의 그래프를 매우 손 쉽게 그려서 웹 페이지에 보여줄 수 있게 된다.

'백문이 불여일run'이라고 직접 그래프를 만들어 보는것이 장황하게 설명하는것보다 빠를것 같다. 웹 브라우져의 주소창에 'http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World' 을 입력해보기 바란다.

위의 URL을 입력하고 엔터를 누르면 브라우져에 아래와 같은 그래프가 출력된다.


구글 챠트 API는 선 그래프, 막대 그래프, 파이챠트, 스캐터 그래프 등등 다양한 종류의 그래프를 그려줄 수 있으며 물론 각 그래프에 대해서 크기, 칼라, 라벨 등등 다양한 속성을 지정해 줄 수도 있다.

Chart API에서는 모든 데이터와 속성을 URL을 통해 전달해 준다.

URL의 포맷은 다음과 같다.

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&...&<parameter n>

여러개의 파라미터는 순서는 상관없고 각 파라미터는 '&'로 연결해준다. 각 파라미터는 속성=값 쌍으로 되어 있다.

위의 예제에서 사용한 URL은 다음과 같이 구성되어 있다.

http://chart.apis.google.com/chart?       Chart API의 위치

cht=p3                                                            그래프 타입

&

chs=250x100                                                   그래프의 크기(픽셀)

&

chd=t:60,40                                                      그래프의 데이터

&

chl=Hello|World                                               그래프 라벨

또한 이 URL을 html문서 내의 <img> 태그에 임베딩해서 해당 웹 페이지가 브라우져에 보여질 때 그래프도 같이 렌더링해서 보여지게 할 수도 있다.

이 경우 <img src="<URL>" /> 의 "<URL>" 부분에 넣어주면 되는데 주의할 점은 '&' 대신 '&amp'를 사용해 줘야 하는것에 주의해야 한다.

구글 Chart API에서 사용할 수 있는 속성은 여러가지가 있는데 그래프를 그리는 경우 항상 다음의 3개 속성은 필수로 지정되어야 한다.

- 타입 (cht)

- 크기 (chs)

- 데이터 (chd)

나머지 속성들은 그래프 타입에 따라 필수이거나 또는 옵션으로 지정해 줄 수 있다.


위의 표를 보면 각 그래프 타입별로 지정할 수 있는 속성의 종류를 알 수 있다. 단 QR chart인 경우 필수 3개 이외에 추가로 지정할 수 있는 속성이 없기 때문에 위의 도표에는 생략되어 있다. 이전 포스트에 보면 구글 챠트 API를 이용해서 QR Code를 만드는 예제를 볼 수 있다.

그래프의 크기는 'chs=<폭>x<높이>'로 지정해 준다. 단위는 픽셀이다. 지도를 제외한 나머지 그래프 타입의 경우 가능한 최대 면적은 30만 픽셀이다. 폭이나 높이의 최대값은 1000 픽셀이므로 그릴 수 있는 최대 크기의 그래프로는 1000x300, 300x1000, 600x500, 500x600, 800x375, 375x800 등등이 있다. (모두 폭에 높이를 곱하면 30만이다.)

단, 지도 타입은 최대 크기가 폭 440 픽셀에 높이 220 픽셀이다.


* 다음번 글에서는 데이터 속성의 포맷과 인코딩 방식에 대해 설명하겠다.

Posted by nautes

댓글을 달아 주세요

이전 포스트에서 QR 코드에 대해 설명했었는데 그에 대해 좀 더 이야기 해 보려고 한다.
아직까지 일본에서 정도로 광범위하게 사용되는건 아니어도 다른 나라에서도 QR코드가 조금씩 사용이 늘어나고 있는거 같다.

먼저 QR코드를 생성하는 방법은 여러가지가 있는데 그 중 쉽게 할 수 있는 방법중 하나는 구글 chart를 사용하는 것이다.
구글 챠트에서 QR 코드를 만들때 필요한 파라미터는 다음과 같다.

cht=qr
chs=<size>
chl=<text to encode>
choe=<output encoding>


<size>는 '가로픽셀x세로픽셀'로 지정해준다.
<text to encode>는 QR코드에 집어넣고 싶은 내용으로 UTF-8으로 URL-encoded 되어 있어야만 한다. 즉 'Hello World'를 표시하고 싶으면 'Hello%20World'를 넣어줘야 한다.
<output encoding>은 출력을 어떻게 인코딩 할 것인가를 결정한다. 이 항목이 없는 경우 디폴트 값은 'UTF-8'이다. 현재 여기에 들어갈 수 있는 값은 UTF-8, SHIFT_JIS, ISO-8859-1 밖에 없다.

파라미터는 URL 'http://chart.apis.google.com/chart?' 뒤에 넣어주고 각 파라미터 사이에는 '&'로 연결해준다.

브라우져의 주소창에 넣는 경우는 다음과 같이 입력하면 된다.

http://chart.apis.google.com/chart?cht=qr&chs=100x100&chl=Hello%20World&choe=UTF-8


웹페이지 안에 html로 집어넣는 경우는 <img> 태그를 이용해서 다음과 같이 입력해주면 된다.

<img src="http://chart.apis.google.com/chart?cht=qr&chs=100x100&chl=Hello%20World&choe=UTF-8" alt="QR code sample image" />


둘 중 어느것을 이용해도 아래와 같은 QR코드가 생성된다. 참고로 아래 QR코드도 바로 위의 <img> 태그를 이 페이지의 html에 집어넣어 구글에서 다이내믹하게 만들어 낸 결과이다.



일본의 카메라가 달린 휴대폰은 거의 다 QR코드를 읽을 수 있지만 아직 국내 휴대폰중에 QR코드를 읽을 수 있는 제품은 없는걸로 알고 있다.
단 삼성의 해외판매용 심비안 모델인 경우는 설치할 수 있는 무료 QR코드 리더가 있다.

아이폰의 경우 여러가지 무료 QR코드 리더 소프트웨어가 나와 있는데 아이폰 카메라가 마크로 촬영은 포커스가 잘 맞지 않아 인식률이 별로 좋지 않다. 몇가지 테스트 해 본 결과 NeoReader가 다른 소프트웨어에 비해 월등하게 인식률이 높았다.

(단 다른 소프트웨어도 Griffin Clarifi 같은 제품을 이용해 마크로 렌즈를 사용하면 인식률을 크게 높일 수 있다.)

--
맥 사용자라면 Micono의 QRCodingen, DecodingQR?을 이용하면 직접 QR코드를 만들고 읽을 수 있다. 단 메뉴가 일본어인것이 단점이지만 맥용 소프트웨어 답게 메뉴의 위치가 일정하기 때문에 약간의 한자실력과 통밥을 이용하면 사용하는데 큰 문제는 없다.





Posted by nautes

댓글을 달아 주세요

이전버튼 1 이전버튼