텍스트큐브닷컴의 통계 그래프를 그리는 OFC(Open Flash Chart)를 이용한 플래스 그래프 응응편 입니다.


자세한건 OFC의 설명을 보시면서 직접 하나씩 해보는 방법밖에 없습니다 ^^;


# 참고 : 현재 OFC2로 업데이트 되었지만 텍큐닷컴은 버전 1 인것 같습니다.


텍스트큐브닷컴의 방문자수 그래프 소스 입니다.

<object id="visitor_object" type="application/x-shockwave-flash" data="http://rs.textcube.com/service/blog/script/openflashchart/open-flash-chart.swf" flashvars="variables=true&amp;
x_label_style=8,#000000,0&amp;&amp;
x_axis_steps=1&amp;&amp;
y_label_style=8,#000000&amp;&amp;
y_ticks=5,10,2&amp;&amp;
line_dot=2,#DB7E7B,%EC%B5%9C%EA%B7%BC+7 //line_dot : 선 그래프로 첫번째 숫자는 그래프 굵기를 나타냄, bar : line_dot를 bat로 변경하면 바 그래프로 변경됨, 첫 숫자는 투명도(0~100)
%EC%9D%BC%EA%B0%84+%EB%B0%A9%EB%AC%B8%EC%9E%90+%EC%88%98,11,4&amp;&amp;
line_hollow_2=5,#DB7E7B,&amp;&amp;
values=6,4,9,24,10,22,1&amp;&amp;
x_labels=08/18,08/19,08/20,08/21,08/22,08/23,08/24&amp;&amp;
y_min=0&amp;&amp;
y_max=24&amp;&amp;
bg_colour=#F5F5F5&amp;&amp;
x_axis_colour=#8096A8&amp;&amp;
x_grid_colour=#DEE2E6&amp;&amp;
y_axis_colour=#8096A8&amp;&amp;
y_grid_colour=#DEE2E6&amp;
" width="243" height="102"></object>

테스트를 해보니 뒤에 붙는것은 안넣어도 되더군요 ^^

수정 : 원래 있던 소스 그대로 다 넣어주어야 IE 에서 정상적으로 그래프가 나옵니다.
파폭이나 크롬에선 넣지 않아도 알아서 처리를 하는것 같습니다 ^^;

 

이 소스를 수정하여 제 블로그의 8월 방문자수 나타낸 플래시 그래프 입니다.

<object id="visitor_object" type="application/x-shockwave-flash" data="http://rs.textcube.com/service/blog/script/openflashchart/open-flash-chart.swf" flashvars="variables=true&amp;
x_label_style=10,#000000,2&amp;&amp; //x축 글자 크기 / 색상 / 0-가로, 1-세로, 2-대각선으로 글자 표시
x_axis_steps=1&amp;&amp; //x축 세로로 긋는 선의 가로 크기?
y_label_style=10,#000000&amp;&amp; //글자 크기 / 색상
y_ticks=5,10,15&amp;&amp; //y축 글자쪽 선 길이1/선길이2/y축 몇칸으로 나누는가
line_dot=2,#DB7E7B,8%EC%9B%94+1%EC%9D%BC+%7E+24%EC%9D%BC+
%EB%B0%A9%EB%AC%B8%EC%9E%90%EC%88%98+
%EA%B7%B8%EB%9E%98%ED%94%84
,11,4&amp;&amp; //그래프 굵기 / 그래프 제목(한글은 인코딩 해야함) / 그래프 제목 글자 크기 / 그래프 꺽이는 부분의 원 크기
line_hollow_2=5,#DB7E7B,&amp;&amp; //어딘가의 선 굵기 / 색상
values=285,609,692,861,823,917,934,883,684,699,1015,
1187,1361,1213,1214,653,637,926,953,1255,841,998,617,733&amp;&amp; //y축 값, 방문자수
x_labels=08/24,08/23,08/22,08/21,08/20,08/19,08/18,08/17,08/16,08/15,08/14,08/13,
08/12,08/11,08/10,08/09,08/08,08/07,08/06,08/05,08/04,08/03,08/02,08/01&amp;&amp; //x축 값, 월일표시, x, y축의 데이터 갯수는 일치해야함
y_min=0&amp;&amp; //y축 최소값
y_max=1500&amp;&amp; //y축 최대값, 위에서 y_sticks가 15개 이므로 1개가 100(=1500/15)가 됨
bg_colour=#F5F5F5&amp;&amp; //나머지는 색 정하기
x_axis_colour=#8096A8&amp;&amp;
x_grid_colour=#DEE2E6&amp;&amp;
y_axis_colour=#8096A8&amp;&amp;
y_grid_colour=#DEE2E6&amp;
" width="630" height="400">//그래프 크기 지정
<param name=movie value=http://rs.textcube.com/service/blog/script/openflashchart/open-flash-chart.swf>
<param name=flashVars value="variables=true&amp;x_label_style=10,#000000,2&amp;&amp;
x_axis_steps=1&amp;&amp;
y_label_style=10,#000000&amp;&amp;y_ticks=5,10,15&amp;&amp;
line_dot=2,#DB7E7B,8%EC%9B%94+1%EC%9D%BC+%7E+24%EC%9D%BC+%EB%B0%A9%EB%AC%B8%EC%9E%90%EC%88%98+%EA%B7%B8%EB%9E%98%ED%94%84,11,4&amp;&amp;
line_hollow_2=5,#DB7E7B,&amp;&amp;
values=285,609,692,861,823,917,934,883,684,699,1015,1187,1361,1213,1214,653,637,926,953,1255,841,998,617,733&amp;&amp;
x_labels=08/24,08/23,08/22,08/21,08/20,08/19,08/18,08/17,08/16,08/15,08/14,08/13,08/12,08/11,08/10,08/09,08/08,08/07,08/06,08/05,08/04,08/03,08/02,08/01&amp;&amp;
y_min=0&amp;&amp;
y_max=1500&amp;&amp;
bg_colour=#F5F5F5&amp;&amp;
x_axis_colour=#8096A8&amp;&amp;
x_grid_colour=#DEE2E6&amp;&amp;
y_axis_colour=#8096A8&amp;&amp;
y_grid_colour=#DEE2E6&amp;"> //이 값을은 모두 위에 있는 값과 동일
</object>

수정한 부분은 굵게 표시를하고 녹색으로 설명을 달았으니 이해가 되실거라 생각 합니다.

응용 방법 같은건 저도 모르니 묻지 마세요 ^^;

텍스트큐브닷컴의 통계 그래프 소스를 보면서 스스로 해결하는 방법밖에 없기 때문에 제게 질문하셔도 답변을 드릴 수 없습니다 ^^

# 사이드바 하단의 방문자 그래프와 비교되는구나 ㅋㅋㅋ #
 

한글 인코딩 하는건 스스로 해결할 수 없는 문제라 한글을 인코딩하는 페이지를 임시로 제공 합니다.

한글 인코딩 하기 => http://gpson.kr/chart/urlencode.html



이 글은 '상오기 : 자전거 여행과 GPS~!' 의 "상오기™ (sangogi@gmai.com)" 이 작성 하였습니다.
"상업적 이용 금지, 원본 출처(링크 포함) 및 저작자 표시, 내용 변경 금지"의 조건으로 자유롭게 사용하실 수 있으며 저작권에 대한 자세한 내용은 "저작권 안내를 참고 하시기 바랍니다.




신고

Posted by 상오기™

이 포스팅이 도움이 되었다면 구글에서 관련 정보를 찾아 보세요 ^^


댓글을 달아 주세요

  1. Favicon of http://22st.net BlogIcon 안지용 2009.08.24 15:04 신고  댓글주소  수정/삭제  댓글쓰기

    넘 어려워요...ㅠ.ㅠ.

  2. Favicon of http://iconiron.tistory.com BlogIcon 레오 ™ 2009.08.28 14:01 신고  댓글주소  수정/삭제  댓글쓰기

    이런 건 안 건디는 게 제 소신입니다 ^^

  3. Favicon of http://lalawin.com BlogIcon 라라윈 2009.08.28 23:18 신고  댓글주소  수정/삭제  댓글쓰기

    직접 소스를 통해 그래프를 넣을 수도 있네요...+_+
    전 그저 티스토리에서 제공해주시는 플러그인밖에 못 쓰는데.....ㅜㅜ
    역시 상오기님은 능력자십니다.. ^^

    • Favicon of http://sangogi.com BlogIcon 상오기™ 2009.08.28 23:42 신고  댓글주소  수정/삭제

      티스토리에서도 멋진 통계 프로그램 만들어 주면 좋을텐데 왜 안해줄까요~~~
      그러고보니 통계프로그램 결과 나온걸 이용해서 통계 그래프 그려주는것도 괜찮겠네요 ^^
      수작업의 압박...ㅠ.ㅠ
      좋은 주말 보내세요 ^____^

  4. Favicon of http://sonylove.tistory.com BlogIcon SONYLOVE 2009.08.29 11:30 신고  댓글주소  수정/삭제  댓글쓰기

    오홍!!
    멋진데요..
    크기를 조절해서 사이드바에 활용하면 이쁠꺼 같아요.
    기본으로 주는건 수정도 안되고 너무 밋밋하다는;;

    • Favicon of http://sangogi.com BlogIcon 상오기™ 2009.08.30 11:24 신고  댓글주소  수정/삭제

      활용하기 나름이죠~
      전 고도, 속도 그래프 만들어서 사용하고 있습니다.
      블로그에 직접 적용하기엔 실시간으로 데이터를 읽어오기 힘들어서 쓸만한걸 만들긴 어려울것 같습니다 ^^;;
      티스토리에서 해줘야하는건데....ㅎㅎ
      좋은 주말 보내세요~~

  5. Favicon of http://mycylee.com BlogIcon cylee 2009.08.31 16:36 신고  댓글주소  수정/삭제  댓글쓰기

    그래프는 그릴수 있겠는데.
    실시간으로 업데이트 되게 하려면,
    매일같이 방문자수를 가지고 와야 하니까.
    흠.. 점점 복잡해 지는군요-
    아님, 매일 방문자수만 입력해주면, 일주일치 그래프를 그려준다던지..

    실시간 데이터 불러오기는 좀 힘들겠죠??

    • Favicon of http://sangogi.com BlogIcon 상오기™ 2009.08.31 19:03 신고  댓글주소  수정/삭제

      실시간으로 연동하기는... 힘들죠 ^^
      해당 블로그 서비스에서 자체적으로 제공하는거라면 데이터를 읽기 쉬우니 가능 하지만 외부에선 읽어들일 방법이 없습니다 ㅠ.ㅠ



티스토리 툴바