위키
포럼
도구
바뀐글
랜덤

Open Flash Chart 2 설치 편집하기

경고: 로그인하지 않았습니다. 편집을 하면 IP 주소가 공개되게 됩니다. 로그인하거나 계정을 생성하면 편집자가 사용자 이름으로 기록되고, 다른 장점도 있습니다.

편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.

최신판 당신의 편집
1번째 줄: 1번째 줄:
;Open Flash Chart; OFC
;Open Flash Chart 2 시작하기
;Open Flash Chart 2 시작하기
;Open Flash Chart 2 사용법
;오픈 플래시 차트 2 설치
;오픈 플래시 차트 2 설치


==다운로드==
==다운로드==
*http://sourceforge.net/projects/openflashchart/files/open-flash-chart/ 접속
*http://sourceforge.net/projects/openflashchart/files/open-flash-chart/ 접속
*[Download open-flash-chart-2-Lug-Wyrm-Charmer.zip (5.0 MB)] 클릭<ref>2009-07-27에 마지막으로 업데이트되었으며, 2012-06-18 현재 최신버전</ref>
*[Version 2 Lug Wyrm Charmer] 클릭<ref>2009-07-27에 마지막으로 업데이트되었으며, 2012-06-18 현재 최신버전</ref>
*open-flash-chart-2-Lug-Wyrm-Charmer.zip 다운로드됨
*[open-flash-chart-2-Lug-Wyrm-Charmer.zip] 클릭하여 다운로드


==설치==
==설치==
* 서버의 /var/www/html/ 폴더로 이동
*open-flash-chart-2-Lug-Wyrm-Charmer.zip 압축 풀기
* vendor/open-flash-chart/ 폴더 생성 후 이동
*open-falsh-chart.swf 파일과 php-ofc-library 폴더를 DOCUMENT_ROOT로 업로드
<syntaxhighlight lang='console'>
*예시: http://jmnote.com/open-flash-chart.swf  
root@zetawiki:~# cd /var/www/html/
root@zetawiki:/var/www/html# mkdir -p vendor/open-flash-chart
root@zetawiki:/var/www/html# cd vendor/open-flash-chart/
root@zetawiki:/var/www/html/vendor/open-flash-chart#
</syntaxhighlight>
 
*open-flash-chart-2-Lug-Wyrm-Charmer.zip 업로드, 압축 풀기
<syntaxhighlight lang='console'>
root@zetawiki:/var/www/html/vendor/open-flash-chart# ll open-flash-chart-2-Lug-Wyrm-Charmer.zip
-rw-r--r-- 1 root root 4964578 Apr 24 19:56 open-flash-chart-2-Lug-Wyrm-Charmer.zip
root@zetawiki:/var/www/html/vendor/open-flash-chart# unzip open-flash-chart-2-Lug-Wyrm-Charmer.zip
... (생략)
  inflating: dot-net-library/written-by-xiao-yifang/README.txt 
extracting: google-webtoolkit-OFCGWT/ofcgwt - Google Code.URL 
  inflating: google-webtoolkit-OFCGWT/README.txt 
  inflating: open-flash-chart.swf
root@zetawiki:/var/www/html/vendor/open-flash-chart#
</syntaxhighlight>
*예시: http://zetawiki.com/vendor/open-flash-chart/open-flash-chart.swf  
:swf 자체를 호출하면 데이터가 입력되지 않아서 아래와 같이 IO ERROR라고 나온다.
:swf 자체를 호출하면 데이터가 입력되지 않아서 아래와 같이 IO ERROR라고 나온다.


[[File:ofc_first_error.png]]
[[File:ofc_first_error.png]]


==chart.php 작성==
==chart.php==
* 웹루트(/var/www/html) 폴더로 이동
*아래 내용으로 chart.php 생성
* ex/open-flash-chart 폴더 생성 후 이동
:이 파일은 HTML 화면 내에 OFC 영역을 할당하는 역할을 한다.
* chart.php 작성
<source lang='html5'>
<syntaxhighlight lang='console'>
root@zetawiki:/var/www/html/vendor/open-flash-chart# cd /var/www/html/
root@zetawiki:/var/www/html# mkdir -p ex/open-flash-chart
root@zetawiki:/var/www/html# cd ex/open-flash-chart/
root@zetawiki:/var/www/html/ex/open-flash-chart# vi chart.php
</syntaxhighlight>
<syntaxhighlight lang='html5'>
<!DOCTYPE html>
<!DOCTYPE html>
<meta charset="utf-8" />
<meta charset="utf-8" />
55번째 줄: 27번째 줄:
width="500" height="250" id="graph-2" align="middle">
width="500" height="250" id="graph-2" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="/vendor/open-flash-chart/open-flash-chart.swf" />
<param name="movie" value="open-flash-chart.swf" />
<param name="quality" value="high" />
<param name="quality" value="high" />
<embed src="/vendor/open-flash-chart/open-flash-chart.swf"
<embed src="/open-flash-chart.swf"
quality="high"
quality="high"
bgcolor="#FFFFFF"
bgcolor="#FFFFFF"
68번째 줄: 40번째 줄:
pluginspage="http://www.macromedia.com/go/getflashplayer" />
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</object>
</syntaxhighlight>
</source>
*[[DOCUMENT_ROOT]] 아래에 ofc 폴더를 만들고 chart.php를 업로드
*DOCUMENT_ROOT 아래에 ofc 폴더를 만들고 hello.php를 업로드
*예시: http://zetawiki.com/ex/open-flash-chart/chart.php
*예시: http://jmnote.com/ofc/chart.php
:여전히 데이터를 연결해주지 않았기 때문에 IO ERROR 메시지가 나온다.
:여전히 데이터를 연결해주지 않았기 때문에 IO ERROR 메시지가 나온다.


==data.json 작성==
==sample.json==
*아래 내용으로 data.json 생성
*아래 내용으로 sample.json 생성
<syntaxhighlight lang='javascript'>
<source lang='javascript'>
{
{
   "title":{
   "title":{
     "text":  "제목",
     "text":  "Many data lines",
     "style": "{font-size: 20px; color:#0000ff; font-family: NanumGothic; text-align: center;}"
     "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  },
  "y_legend":{
    "text": "Open Flash Chart",
    "style": "{color: #736AFF; font-size: 12px;}"
   },
   },
   "elements":[
   "elements":[
86번째 줄: 62번째 줄:
       "alpha":    0.5,
       "alpha":    0.5,
       "colour":    "#9933CC",
       "colour":    "#9933CC",
       "text":      "페이지뷰",
       "text":      "Page views",
       "font-size": 10,
       "font-size": 10,
       "values" :  [9,6,7,9,5]
       "values" :  [9,6,7,9,5,7,6,9,7]
     },
     },
     {
     {
94번째 줄: 70번째 줄:
       "alpha":    0.5,
       "alpha":    0.5,
       "colour":    "#CC9933",
       "colour":    "#CC9933",
       "text":      "페이지뷰2",
       "text":      "Page views 2",
       "font-size": 10,
       "font-size": 10,
       "values" :  [6,7,9,5,7]
       "values" :  [6,7,9,5,7,6,9,7,3]
     }
     }
   ],
   ],
105번째 줄: 81번째 줄:
     "grid_colour":"#00ff00",
     "grid_colour":"#00ff00",
     "labels": {
     "labels": {
         "labels": ["1일","2일","3일","4일","5일"]
         "labels": ["January","February","March","April","May","June","July","August","Spetember"]
     }
     }
   },
   },
117번째 줄: 93번째 줄:
   }
   }
}
}
</syntaxhighlight>
</source>
*DOCUMENT_ROOT 아래 ofc 폴더에 data.json을 업로드
*DOCUMENT_ROOT 아래 ofc 폴더에 sample.json을 업로드
*http://zetawiki.com/ex/open-flash-chart/data.json
*http://jmnote.com/ofc/sample.json
:데이터가 그대로 보인다.
:데이터가 그대로 보인다.
*http://zetawiki.com/ex/open-flash-chart/chart.php?ofc=data.json
*http://jmnote.com/ofc/hello.php?ofc=sample.json
:차트 파일에 데이터 파일이 연결되어 차트가 제대로 보인다.
:차트 파일에 데이터 파일이 연결되어 차트가 제대로 보인다.
==통계 예시==
다음은 나라별 구치율<ref>구치율 = 인구 10만명 당 구치자 수</ref> 통계이다.
https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Incarceration_Rates_Worldwide_ZP.svg/330px-Incarceration_Rates_Worldwide_ZP.svg.png
이 도표를 따라 만들어 보자.
원자료는 다음과 같다.<ref>수치는 그림에서 읽은 것이라 정확하지 않다.</ref>
{| class='wikitable'
!나라 !! 구치율
|-
|미국 || 710
|-
|러시아 || 540
|-
|남아프리카 || 400
|-
|유럽 || 140
|-
|캐나다 || 120
|-
|오스트레일리아 || 120
|-
|일본 || 70
|}
==data.php 작성==
이번에는 data.json 대신 PHP에서 위 데이터대로 입력하여 차트에 연결해 보자.
<syntaxhighlight lang='php'>
<?php
include $_SERVER['DOCUMENT_ROOT'].'/vendor/open-flash-chart/php-ofc-library/open-flash-chart.php';
$chart = new open_flash_chart();
$title = new title( "나라별 구치율" );
$chart->set_title( $title );
$bar = new bar_filled('#fdcdac', '#000000');
$bar->set_values( array(710,540,400,140,120,120,70) );
$chart->add_element( $bar );
$x_axis = new x_axis();
$x_axis->set_labels_from_array( array('미국','러시아','남아프리카','유럽','캐나다','오스트레일리아','일본') );
$chart->set_x_axis( $x_axis );
$y_axis = new y_axis();
$y_axis->set_range(0, 800);
$y_axis->set_steps(100);
$chart->set_y_axis( $y_axis );
echo $chart->toString();
</syntaxhighlight>
*http://zetawiki.com/ex/open-flash-chart/data.php
:데이터 그대로 보기. 위의 data.json과 같은 형식.
*http://zetawiki.com/ex/open-flash-chart/chart.php?ofc=data.php
:데이터를 차트로 보기
==의견==
*지금까지는 chart와 data를 별도의 파일로 만들고 data를 chart에 연결해주는 방식이었다. 하나의 파일에서 처리하는 것에 대해서는 '''[[오픈 플래시 차트 2 PHP 파일 1개로 구현]]''' 문서를 참고하시라.
==같이 보기==
*[[오픈 플래시 차트 2 PHP 파일 1개로 구현]]
*[[Open Flash Chart 2 메모리 부족]]
*[[dygraphs]]


==주석==
==주석==
<references/>
<references/>


==참고==
==참고 자료==
*http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php
*http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php


[[분류: 오픈 플래시 차트]]
[[분류: 플래시]]
[[분류: 튜토리얼]]
[[분류: PHP]]

제타위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스로 배포된다는 점을 유의해 주세요(자세한 내용에 대해서는 제타위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요.
또한, 직접 작성했거나 퍼블릭 도메인과 같은 자유 문서에서 가져왔다는 것을 보증해야 합니다. 저작권이 있는 내용을 허가 없이 저장하지 마세요!

취소 편집 도움말 (새 창에서 열림)
원본 주소 "https://zetawiki.com/wiki/Open_Flash_Chart_2_설치"