웹마스터 팁
[수정] 쉽게 간단하게(?) 플래시 그래프를 게시판에 넣어 보세요 ^^
2009.08.27 10:59
Open Flash Chart(OFC)라고 들어 보셨나요?
텍스트큐브닷컴의 인기 분류 통계 그래프
플래시를 이용해 다양한 그래프를 그려주는 무료로 공개된 프로그램 입니다.
Open Flash Chart(OFC) : http://teethgrinder.co.uk/open-flash-chart-2/
텍스트큐브닷컴의 통계 그래프를 보셨나요?
여기에 사용이 된게 Open Flash Chart 입니다.
텍스트큐브의 플러그인으로 제공되는 통계 그래프인데 이게 텍스트큐브닷컴에도 적용이 되어 있습니다.
텍스트큐브닷컴의 인기 분류 통계 그래프
텍스트큐브닷컴의 방문자수 그래프 소스 입니다.
<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&
x_label_style=8,#000000,0&&
x_axis_steps=1&&
y_label_style=8,#000000&&
y_ticks=5,10,2&&
line_dot=2,#DB7E7B,%EC%B5%9C%EA%B7%BC+7 //line_dot : 선 그래프로 첫번째 숫자는 그래프 굵기를 나타냄, bar : line_dot를 bat로 변경하면 바 그래프로 변경됨, 첫 숫자는 투명도(0~100), pie : 위의 원 그래프, 첫 숫자는 투명도
%EC%9D%BC%EA%B0%84+%EB%B0%A9%EB%AC%B8%EC%9E%90+%EC%88%98,11,4&&
line_hollow_2=5,#DB7E7B,&&
values=6,4,9,24,10,22,1&&
x_labels=08/18,08/19,08/20,08/21,08/22,08/23,08/24&&
y_min=0&&
y_max=24&&
bg_colour=#F5F5F5&&
x_axis_colour=#8096A8&&
x_grid_colour=#DEE2E6&&
y_axis_colour=#8096A8&&
y_grid_colour=#DEE2E6&
" width="243" height="102"></object>
위의 소스는 아래와 같은 그래프를 그려 줍니다.
이 소스를 수정하여 제 블로그의 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&
x_label_style=10,#000000,2&& //x축 글자 크기 / 색상 / 0-가로, 1-세로, 2-대각선으로 글자 표시
x_axis_steps=1&& //x축 세로로 긋는 선의 가로 크기?
y_label_style=10,#000000&& //글자 크기 / 색상
y_ticks=5,10,15&& //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&& //그래프 굵기 / 그래프 제목(한글은 인코딩 해야함) / 그래프 제목 글자 크기 / 그래프 꺽이는 부분의 원 크기
line_hollow_2=5,#DB7E7B,&& //어딘가의 선 굵기 / 색상
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&& //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&& //x축 값, 월일표시, x, y축의 데이터 갯수는 일치해야함
y_min=0&& //y축 최소값
y_max=1500&& //y축 최대값, 위에서 y_sticks가 15개 이므로 1개가 100(=1500/15)가 됨
bg_colour=#F5F5F5&& //나머지는 색 정하기
x_axis_colour=#8096A8&&
x_grid_colour=#DEE2E6&&
y_axis_colour=#8096A8&&
y_grid_colour=#DEE2E6&
" 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&x_label_style=10,#000000,2&&
x_axis_steps=1&&
y_label_style=10,#000000&&y_ticks=5,10,15&&
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&&
line_hollow_2=5,#DB7E7B,&&
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&&
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&&
y_min=0&&
y_max=1500&&
bg_colour=#F5F5F5&&
x_axis_colour=#8096A8&&
x_grid_colour=#DEE2E6&&
y_axis_colour=#8096A8&&
y_grid_colour=#DEE2E6&"> //이 값을은 모두 위에 있는 값과 동일
</object>
x_label_style=10,#000000,2&& //x축 글자 크기 / 색상 / 0-가로, 1-세로, 2-대각선으로 글자 표시
x_axis_steps=1&& //x축 세로로 긋는 선의 가로 크기?
y_label_style=10,#000000&& //글자 크기 / 색상
y_ticks=5,10,15&& //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&& //그래프 굵기 / 그래프 제목(한글은 인코딩 해야함) / 그래프 제목 글자 크기 / 그래프 꺽이는 부분의 원 크기
line_hollow_2=5,#DB7E7B,&& //어딘가의 선 굵기 / 색상
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&& //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&& //x축 값, 월일표시, x, y축의 데이터 갯수는 일치해야함
y_min=0&& //y축 최소값
y_max=1500&& //y축 최대값, 위에서 y_sticks가 15개 이므로 1개가 100(=1500/15)가 됨
bg_colour=#F5F5F5&& //나머지는 색 정하기
x_axis_colour=#8096A8&&
x_grid_colour=#DEE2E6&&
y_axis_colour=#8096A8&&
y_grid_colour=#DEE2E6&
" 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&x_label_style=10,#000000,2&&
x_axis_steps=1&&
y_label_style=10,#000000&&y_ticks=5,10,15&&
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&&
line_hollow_2=5,#DB7E7B,&&
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&&
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&&
y_min=0&&
y_max=1500&&
bg_colour=#F5F5F5&&
x_axis_colour=#8096A8&&
x_grid_colour=#DEE2E6&&
y_axis_colour=#8096A8&&
y_grid_colour=#DEE2E6&"> //이 값을은 모두 위에 있는 값과 동일
</object>
수정한 부분은 굵게 표시를하고 녹색으로 설명을 달았으니 이해가 되실거라 생각 합니다.
사용법은 따로 없고 굵은 글씨로 되어 있는 숫자들만 바꿔주면 됩니다.
한글은 그냥 넣으면 안되고 인코딩해서 넣어줘야 하기 때문에 인코딩 페이지를 임시로 제공 합니다.
한글 인코딩 하기 => http://gpson.kr/chart/urlencode.html
위의 소스 형태를 유지하면서 데이터만 바꿔주면 플래시 그래프가 만들어 집니다.
본문에 적어놓은 소느는 설명하기 위해서 줄바꿈을 했지만 실제론 한줄로 넣어줘야 합니다.
소스보기로해서 직접 플래시 그래프 소스를 참고 하세요 ^^
컴포넌트로 만들어지면 사용하기 쉽겠지만 필요하다면 능력자분들이 만들어 주시겠죠 ^____^
텍큐닷컴의 OFC를 이용하여 만든 GPS 로그 파일의 고도와 속도 그래프 입니다.
사용하고 있는 곳 : http://gpson.kr/xe/gpslog, http://log.gpson.kr/
p.s
1. 텍스트큐브닷컴에서 막아버리면 사용할 수 없겠죠 ^^
2. OFC 자체는 별다를게 없는 방법 입니다.
텍스트큐브닷컴의 OFC의 장점은 호환성이죠~!
OFC의 경우 자바스크립트를 사용하기 때문에 대부분의 게시판(포털종류)에서 사용할 수 없습니다.
자바스크립트를 제한해서 태그를 날려 버리기 때문이죠 ^^
하지만 텍큐닷컴의 OFC는 네이버 카페, 네이버 블로그, 다음 카페등의 게시판에도 복사해서 넣어주면 정상적으로 동작 합니다.
테스트를 해보니 다음 블로그에서는 막히더군요 ㅡㅡ
태그 연관 글
- [2014/11/07] 웹마스터 팁 ipTIME NAS 에 설치한 XE, 다올CMS 첨부파일 버튼 무반응 해결 *1
- [2014/08/03] 묻고답하기 !DOCTYPE html 크롬에서 플래시 간격발생 문제 *3
- [2012/05/15] 묻고답하기 외부페이지에서 executeQueryArray()를 사용할 수 있을까요??
- [2011/12/28] 묻고답하기 크롬에서 플래시 배경이 투명하지 않게 나옵니다
- [2011/05/17] 묻고답하기 플래시 로드무비요..ㅠㅠ
[블로그] 상오기 : 자전거여행~! (http://sangogi.com)
[GPS 로그 공유] GPS On (http://gpson.kr)
댓글 3
-
khongchi
2009.09.01 04:27
이런건 위젯으로 만들어주시면 감솨^^
-
주하니
2009.09.01 12:31
멋지긴 한데 저 수치를 다 수정 할려면 저가튼 초짜는 @.@
돌아다니다보니 예제 프로그램으로 구글 차트를 이용한게 있군요 ^^
http://sol.xpressengine.net/?mid=issuetracker&act=dispIssuetrackerDownload&package_srl=18251826&release_srl=18251862