구글 차트 API로 도표를 그리자

구글 차트

X차트의 문제는 데이타 값이었다. 원시 데이타를 그대로 입력하면 도표가 정상적으로 그려지지 않았다. 그림의 크기에 따라 데이타 값을 가공해야만 원하는 도표를 그리는 것이 가능했다. 그래서 다시 생각한 것이 구글에서 차트 API를 공개했다면 구글 차트 API를 쉽게 이용할 수 있는 사이트도 있을 것 같았다. 역시 같은 생각을 하는 사람이 많아서인지 몰라도 이미 그런 사이트가 있었다. 바로 "Google Chart API - Chart Generator"는 사이트이다.

목차

플래시 도표, X차트[1]

요즘 블로그의 하루 방문자 수를 보면 공휴일에도 거의 만명이 넘는다. 다음 뷰로부터 특별한 트래픽이 없어도 하루 '만명에서 만오천명' 정도가 방문한다. 이렇다 보니 요즘은 월 방문자는 항상 30만명을 넘고 있다. 요즘 가장 많은 글(75개)을 올린 5월달에 30만명 정도, 60개의 글을 올린 6월에는 34만 정도, 42개의 글을 올린 7월에 31만 정도, 44개의 글을 올린 이달에 32만 정도가 방문했다. 즉, 글의 갯수와는 무관하게 계속 만명 이상이 블로그를 방문하고 있다. 하루 방문자 수를 생각하면 이 달도 35만명을 넘을 것으로 생각된다.

이렇다 보니 불현듯 블로그를 만든 첫달이 기억났다. 블로그에 첫글을 '2004년 6월 19일'에 올렸기 때문에 2004년 6월 19일이 블로그를 시작한 날이다. 6월 방문자 수는 '680명'이다. 그러나 6월 후반에 시작했기 때문에 10일정도의 방문자 수이고 따라서 7월에는 이 세배 정도인 2600명 정도가 방문했다. 불현듯 이런 방문자 추이를 도표로 그려 보고 싶었다. 그래서 사용한 사이트가 이 블로그에서 예전에 소개한 X차트이다.

사이트 폐쇄로 도표 삭제

X차트는 도표를 입력하는 방법도 편하고 플래시로 그려 주기 때문에 상당히 유용하다. 그런데 선 그래프에 방문자 수를 표시하기 때문에 조금 지저분해 보였다. 그래서 그래프의 방문자 수를 제거하고 도표를 그릴 수 있을까 싶어서 인터넷을 검색했다. 검색하다 보니 이미 구글(Google)에서 누구나 사용할 수 있는 차트 API를 공개하고 있었다. Google Chart API를 방문해 보면 알 수 있지만 URL을 이용해서 원하는 차트를 그릴 수 있다.

구글 차트

문제는 데이타 값이었다. 원시 데이타를 그대로 입력하면 도표가 정상적으로 그려지지 않았다. 그림의 크기에 따라 데이타 값을 가공해야만 원하는 도표를 그리는 것이 가능했다. 그래서 다시 생각한 것이 구글에서 차트 API 공개했다면 구글 차트 API를 쉽게 이용할 수 있는 사이트도 있을 것 같았다. 역시 같은 생각을 하는 사람이 많아서인지 몰라도 이미 그런 사이트가 있었다. 바로 Google Chart API - Chart Generator라는 사이트이다.

블로그 방문자 추이

그림을 보면 알 수 있지만 X, Y축 라벨, 격자에 도표 제목까지 표시한 간단한 도표를 만들 수 있다. 또 2004년 거의 0에 가깝던 도표는 2004년 12월에 소폭 증가, 2005년에 배로 증가, 다시 2006년, 2007년, 2008년 계속 배로 증가하는 것을 알 수 있다.

글로 일일이 설명하는 것이 귀찮아 그림으로 간단히 설명했다.

앞에서 설명한 것처럼 그림의 크기에 따라 데이타를 바꿔주어야 하기 때문에 이 사이트에서는 입력되는 데이타를 무조건 '0에서 100으로 바꾼다'. 따라서 실제 데이타와 가까운 값을 만들기 위해서는 반드시 'Axis Labels'에 다음과 같은 형식의 데이타를 추가해 주어야 한다.

0:|2004/06|2004/12|2005/06|2005/12|2006/06|2006/12|2007/06|2007/12|2008/06|2008/012|2009/06|2009/08|
1:||50,000|100,000|150,000|200,000|250,000|300,000|350,000|400,000

0:에 이어 X축 라벨를 입력하고 라벨과 라벨은 |로 구분한다. 중요한 것은 데이타 끝에도 |를 붙여야 한다는 점이다. 1: 다음에 Y축 라벨을 입력하고 마찬가지로 수직바로 구분한다. 그리고 이 두행을 하나로 합처서 Axis Labels에 넣으면 된다. 만약 그림처럼 구분선을 추가하고 싶다면 '&chg=10,10'처럼 X축, Y축 간격을 지정하면 된다.

관련 글타래


  1. 아쉽지만 X차트는 사이트가 폐쇄됐다. 
글쓴이
author image
운영체제의 모든 것을 운영하고 있는 IT 블로거. IT 블로거라는 이름은 현재 시국때문에 시사 블로거로 바뀐 상태다. 그러나 나는 아직도 시사와 사회에 관심이 많은 IT 블로거일 뿐이다. 컴퓨터, 운영체제, 시사, 가족, 여행, 맛집, 리뷰등과 살면서 느끼는 소소한 일상이 블로그의 주제이다. 왼쪽의 아이콘은 둘째 딸 다예가 그린 내 모습이다.
2009/08/28 11:46 2009/08/28 11:46
오늘의 글
인기있는 글
조회수 많은 글 | 베오베
댓글 많은 글 | 베오베

Trackback

Trackback Address :: https://offree.net/trackback/2727

Facebook

Comments

  1. 학주니 2009/08/28 12:12

    우오~ 하루에 만명씩.. 부럽슴다.. T.T

    perm. |  mod/del. reply.
    • 도아 2009/08/28 12:53

      얼마 전 한 초보 네이버 블로거의 방문자 수를 보니 하루 6만이더군요.

    • 단군 2009/08/29 04:03

      6만 이요?...ㄷㄷㄷ...그게 가능 하기는 하군요...

  2. bluenlive 2009/08/28 14:38

    티스톨에선 구글 차트를 이용할 수가 없습니다.
    편집기가 알아서 내용을 수정해주는 뻘짓을 하더군요.

    현실은 시궁창... ㅠ.ㅠ

    perm. |  mod/del. reply.
    • 도아 2009/08/28 16:06

      구글 차트 API라는 티스토리 블로그에 올린 글을 읽어 보시면 아시겠지만 잘 삽입됩니다.

    • bluenlives7 2009/08/29 00:44

      알게 모르게 패치가 된 모양이군요.
      처음 구글 차트를 소개해주셨을 때 써봤더니 내용이 다 깨져버린 참극을 경험하곤 근처에도 안 갔는데 이제 필요하면 써봐야겠네요. ^^;

  3. SCV 2009/08/28 18:17

    음.. 웹상에서 도표를 그릴 수 있는 서비스로군요.
    이왕이면 메모장 같은 간단한 파일로 정렬된 데이터를 업로드할 수 있는 기능을 넣어주면 좋을텐데 말입니다...

    그나저나, 방문자수가 상상을 초월하네요.. ^^;

    perm. |  mod/del. reply.
    • 도아 2009/08/29 15:32

      XChart는 그런 기능도 지원합니다. 그래서 데이타 입력이 상당히 편합니다.

  4. 2009/08/28 22:37

    http://www.parkoz.com/zboard/view.php?id=images2&page=1&sn1=&divpage=15&sn=off&ss=on&sc=off&select_arrange=headnum&desc=asc&no=83022

    궁금한게 있는데요. 이게 가능한가요?

    perm. |  mod/del. reply.
  5. 단군 2009/08/29 04:05

    만오천...ㄷㄷㄷ...그것도 2004년 이면 저는 어디 있었나요?...중동...ㄷㄷㄷ...아, 저는 언제 도아님처럼...ㅠ_ㅜ...

    perm. |  mod/del. reply.
    • 도아 2009/08/29 15:33

      5년이 지나면 가능하지 않을까요? 2004년에는 저도 방문자가 거의 없었습니다.

  6. koc/SALM 2009/08/29 09:03

    좋은 정보 고맙습니다.

    perm. |  mod/del. reply.
  7. 조우리 2010/02/16 17:45

    안녕하세요. 구글차트에 한글 넣어서 쿼리 날려 보고 싶은데요.
    잘 안되네요. ㅎㅎ
    님이 올려 놓은 신 구글차트 그림의 URL을 보니까 인코딩이 되어 있는 것 같습니다.
    어떻게 해야하나요?
    html 안에 다음과 같이 적었습니다.
    <img src="http://chart.apis.google.com/chart?cht=lc&
    chxt=x,y&
    chxl=0:||2010-02|||2010-01|||2009-12|||2009-11|||2009-10|
    1:||50,000|100,000|150,000|200,000|250,000|300,000|350,000|400,000&
    chs=700x300&
    chd=t:0,646,237,14,0|0,42,48,18,21|0,0,0,0,26|0,0,0,1507,13&
    chco=DEBDDE,FFCC33,3399CC,0033FF&chls=5.0,5.0,5.0,5.0,5.0&
    chm=N,000000,0,,12|N,000000,1,,12,,c|N,000000,2,,12,,c|N,000000,3,,12,,c&
    chma=30,30,30,30&
    chdl=아이피변경|의심아이피|유사도메인|웹페이지필터링" />

    perm. |  mod/del. reply.
    • 도아 2010/02/17 07:17

      한글을 URL 인코딩해 보시기 바랍니다.

    • 조우리 2010/02/18 09:59

      아..

      한글을 UTF-8 f로 인코딩하면 되는군요.
      한영을 섞어서 썼을 경우엔 영어도 인코딩 해주면 되는군요.

      감사합니다.

  8. 정존 2014/03/28 16:07

    chdl은 인코딩하면 해결이 되지만, chm 은 안되네요...
    구글링 중인데, 해결 방법이 있었으면 좋겠어요. ㅎㅎ

    perm. |  mod/del. reply.

(옵션: 없으면 생략)

글을 올릴 때 [b], [i], [url], [img]와 같은 BBCode를 사용할 수 있습니다.