텍스트큐브닷컴의 통계 그래프를 그리는 OFC(Open Flash Chart)를 이용한 플래스 그래프 응응편 입니다.
# 참고 : 현재 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&
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)
%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>
테스트를 해보니 뒤에 붙는것은 안넣어도 되더군요 ^^
수정 : 원래 있던 소스 그대로 다 넣어주어야 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&
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
이 글은 '상오기 : 자전거 여행과 GPS~!' 의 "상오기™ (sangogi@gmai.com)" 이 작성 하였습니다.
"상업적 이용 금지, 원본 출처(링크 포함) 및 저작자 표시, 내용 변경 금지"의 조건으로 자유롭게 사용하실 수 있으며 저작권에 대한 자세한 내용은 "저작권 안내" 를 참고 하시기 바랍니다.
