본문 바로가기
나의 정보/블로그 활용하기

블로그에 플래시로 만든 그래프를 넣어보자~! Open Flash Chart

by 상오기™ 2009. 8. 24.
Open Flash Chart(OFC)라고 들어 보셨나요?

플래시를 이용해 다양한 그래프를 그려주는 무료로 공개된 프로그램 입니다.




텍스트큐브닷컴의 통계 그래프를 보셨나요?

여기에 사용이 된게 Open Flash Chart 입니다.

텍스트큐브의 플러그인으로 제공되는 통계 그래프인데 이게 텍스트큐브닷컴에도 적용이 되어 있습니다.
- 참고로 제가 운영중인 GPS On에서 고도 그래프를 그릴때도 OFC를 사용하고 있습니다.

텍스트큐브닷컴의 인기 분류 통계 그래프
분류명 포스트수 비율
분류없음 0 0%
자전거 여행, 라이딩 1 17%
GPS 1 17%
낙서장 1 17%
test 0 0%
테스트 3 50%



같은 계열인 티스토리는 왜 이런 통계 그래프를 제공해주지 않는걸까요? ㅡㅡ

티스토리의 유일한 그래프는 멋없는 방문자 그래프로 달랑 사진 1장밖에 없습니다 ^^;;






여기까지 읽어 보시고 의문점이 생기지 않으시나요?

텍스트큐브닷컴의 통계 그래프가 티스토리 블로그인 이 글에서 정상적으로 보이고 있습니다.

어떻게 했을까요?




정답은~~~~ 그냥 퍼온 겁니다~! ^^

관리자 화면에서 소스 보기로 통계 그래프 부분만 퍼오면 이렇게 보여 집니다.




텍스트큐브 닷컴 방문자 그래프
날짜 방문자 수
08.24 1
08.23 22
08.22 10
08.21 24
08.20 9
08.19 4
08.18 6

위의 방문자 그래프는 아래의 소스를 입력하면 나타 납니다.

빨간색 글자는 외부에서 사용하기 위해 원본 주소를 만들어주기 위해 추가된 주소 입니다.

<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%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"> <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=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%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;"> <table class="type-alt" id="visit_table"> <tbody> <tr><th>날짜</th><th>방문자 수</th></tr> <tr><td>08.24</td><td>1</td></tr> <tr><td>08.23</td><td>22</td></tr> <tr><td>08.22</td><td>10</td></tr> <tr><td>08.21</td><td>24</td></tr> <tr><td>08.20</td><td>9</td></tr> <tr><td>08.19</td><td>4</td></tr> <tr><td>08.18</td><td>6</td></tr> </tbody> </table> </object>
# 참고 : 한글이나 특수 기호는 인코딩이 되어 있어 알아보기 힘들다 ^^;

%EC%B5%9C%EA%B7%BC+7%EC%9D%BC%EA%B0%84+%EB%B0%A9%EB%AC%B8%EC%9E%90+%EC%88%98 = 최근 7일간 방문자수
&amp; = & 을 의미함



그럼 이걸 어디에 응용할 수 있을까요?

눈썰미가 있으신 분들은 잘 수정해보면 이걸 이용해 원하는 그래프를 만들 수 있지 않을까요? ^^

정상적이라면 OFC를 자신의 서버에 올린후 사용을 해야 하지만 대다수의 블로거 분들은 서버나 웹호스팅 계정이 없기 때문에 이렇게 공개된걸 몰래(?) 갖다 사용하는 방법이 있습니다 ^^;

텍스트큐브닷컴에서 싫어할 수 있다는 단점이 있습니다 ㅡㅡ




수정하는게 귀찮을 수 있지만 텍스트큐브닷컴의 진정한 장점은 "호환성" 이라고 생각 합니다.

보통 이런 그래프를 그려주는 프로그램은 자바스크립트를 사용하는데 네이버 카페와 네이버 블로그, 다음 카페와 다음 블로그등의 포털 사이트에선 이런 자바스크립트가 먹히질 않습니다.

이런 태그들은 다 차단해 버리기 때문이죠~!!



하지만~! 텍스트큐브닷컴의 통계 그래프는 자바스크립트가 아니기 때문에 네이버 카페와 네이버 블로그, 다음 카페와 다음 블로그등의 포털 사이트에 올리면 잘 나옵니다.



OFC를 자신의 서버에 올려서 포털에 링크해봤자 보이지가 않지만 텍스트큐브닷컴의 OFC로 그래프를 만들 수 있다면 이런 문제가 해결이 됩니다.

진정한 능력자는 OFC 소스를 수정해서 사용할 수 있겠지만 그런걸 아무나 하나요 ㅡㅡ



참고로 국내에 OFC를 사용하기 편하게 수정하여 Open API로 제공하는 곳이 있습니다.

플레쉬 차트 (Open Flash Chart2 with JS) 
 
@author Kimjonggab outmind@cafen.net 
@copyright Copyright (c) 2004 Cafen.net (http://cafen.net) 
@license http://opensource..org/licenses/gpl-license.php GNU General Public License (GPL) 

참조 URL 1 : http://openapi2.cafen.net 
참조 URL 3 : http://teethgrinder.co.uk/open-flash-chart-2/ 

적용 방법 (플레쉬 차트) 
<script>var cafenGlobalConf = {scripturl : 'http://service2.cafen.net/'}</script> 
<script type="text/javascript" src="http://service2.cafen.net/cafenOFC2JS.js" charset=utf-8></script> 
<table class='sampeChart' title='Line Chart' title_style='font-size:14px' y_legend='1/100' x_legend='Month' border=0 width=800 height=400 bgcolor=#f5f5f5  wmode='transparent' > 
    <tbody> 
        <tr type='xy_axis' colour=#8c8c8c grid_colour=#d5d5d5  stroke=2 min=0 max=25 step=4 rotate=45 size='12' font_colour='#000000'> 
            <td></td> 
            <td>Jan</td> 
            <td>Feb</td> 
            <td>Mar</td> 
            <td>Apr</td> 
            <td>May</td> 
            <td>Jun</td> 
            <td>Aug</td> 
            <td>Sep</td> 
        </tr> 
        <tr type='line' colour=#5aa775 stroke=2 line='dotted' pointer='star' pointersize=10 tooltip="Visitor of #x_label#(#val#)  "> 
            <td>Visitor</td> 
            <td>20</td> 
            <td>17</td> 
            <td>18</td> 
            <td>9</td> 
            <td>20</td> 
            <td>17</td> 
            <td>18</td> 
            <td>9</td> 
        </tr> 
    </tbody> 
</table> 
  
<script> 
onload = function() {  
    var ofc2js = new cafenOFC2JS();  
    ofc2js.renderElementsByClassName('sampeChart');  
}  
</script>    

위의 소스를 입력하면 아래와 같은 그래프가 나옵니다.

Jan Feb Mar Apr May Jun Aug Sep
Visitor 20 17 18 9 20 17 18 9


블로그에서 사용하기엔 이렇게 자바 스크립트로 제공하는게 좋습니다만 포털에선 자바스크립트가 차단하기 때문에 사용할 수 없습니다.



하나 더 알려 드리면 OFC에서 소스 퍼다가 직접 수정해서 사용하는 분도 계십니다.

OFC에서 그래프 퍼오기 => http://blog.naver.com/479lgs/150043709818




텍스트큐브닷컴의 방문자 그래프 소스를 수정하여 제 블로그의 8월 방문자 그래프를 그려 봤습니다.

말그대로 응용편~!!


 설명도 추가되어 있으니 관심이 있으시면 보시고 직접 해보세요 ^^

관련 글





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





관련글

티스토리툴바