"Open Flash Chart 2 설치"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-== 참고 자료 == +==참고==))
(다른 사용자 한 명의 중간 판 33개는 보이지 않습니다)
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/ 접속
*[Version 2 Lug Wyrm Charmer] 클릭<ref>2009-07-27에 마지막으로 업데이트되었으며, 2012-06-18 현재 최신버전</ref>
*[Download open-flash-chart-2-Lug-Wyrm-Charmer.zip (5.0 MB)] 클릭<ref>2009-07-27에 마지막으로 업데이트되었으며, 2012-06-18 현재 최신버전</ref>
*[open-flash-chart-2-Lug-Wyrm-Charmer.zip] 클릭하여 다운로드
*open-flash-chart-2-Lug-Wyrm-Charmer.zip 다운로드됨


==설치==
==설치==
*open-flash-chart-2-Lug-Wyrm-Charmer.zip 압축 풀기
* 서버의 /var/www/html/ 폴더로 이동
*웹서버의 DOCUMENT_ROOT에 open-flash-chart 폴더 만들기
* vendor/open-flash-chart/ 폴더 생성 후 이동
*open-falsh-chart.swf 파일, php-ofc-library 폴더, js 폴더를 방금 만든 ofc 폴더에 업로드
<source lang='console'>
*예시: http://jmnote.com/open-flash-chart/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#
</source>
 
*open-flash-chart-2-Lug-Wyrm-Charmer.zip 업로드, 압축 풀기
<source 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#
</source>
*예시: 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 작성==
*아래 내용으로 chart.php 생성
* 웹루트(/var/www/html) 폴더로 이동
:이 파일은 HTML 화면 내에 OFC 영역을 할당하는 역할을 한다.
* ex/open-flash-chart 폴더 생성 후 이동
* chart.php 작성
<source 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
</source>
<source lang='html5'>
<source lang='html5'>
<!DOCTYPE html>
<!DOCTYPE html>
28번째 줄: 55번째 줄:
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="open-flash-chart.swf" />
<param name="movie" value="/vendor/open-flash-chart/open-flash-chart.swf" />
<param name="quality" value="high" />
<param name="quality" value="high" />
<embed src="/open-flash-chart.swf"
<embed src="/vendor/open-flash-chart/open-flash-chart.swf"
quality="high"
quality="high"
bgcolor="#FFFFFF"
bgcolor="#FFFFFF"
42번째 줄: 69번째 줄:
</object>
</object>
</source>
</source>
*DOCUMENT_ROOT 아래에 ofc 폴더를 만들고 hello.php를 업로드
*[[DOCUMENT_ROOT]] 아래에 ofc 폴더를 만들고 chart.php를 업로드
*예시: http://jmnote.com/ofc/chart.php
*예시: http://zetawiki.com/ex/open-flash-chart/chart.php
:여전히 데이터를 연결해주지 않았기 때문에 IO ERROR 메시지가 나온다.
:여전히 데이터를 연결해주지 않았기 때문에 IO ERROR 메시지가 나온다.


==data.json==
==data.json 작성==
*아래 내용으로 data.json 생성
*아래 내용으로 data.json 생성
<source lang='javascript'>
<source lang='javascript'>
92번째 줄: 119번째 줄:
</source>
</source>
*DOCUMENT_ROOT 아래 ofc 폴더에 data.json을 업로드
*DOCUMENT_ROOT 아래 ofc 폴더에 data.json을 업로드
*http://jmnote.com/ofc/data.json
*http://zetawiki.com/ex/open-flash-chart/data.json
:데이터가 그대로 보인다.
:데이터가 그대로 보인다.
*http://jmnote.com/ofc/chart.php?ofc=data.json
*http://zetawiki.com/ex/open-flash-chart/chart.php?ofc=data.json
:차트 파일에 데이터 파일이 연결되어 차트가 제대로 보인다.
:차트 파일에 데이터 파일이 연결되어 차트가 제대로 보인다.


100번째 줄: 127번째 줄:
다음은 나라별 구치율<ref>구치율 = 인구 10만명 당 구치자 수</ref> 통계이다.
다음은 나라별 구치율<ref>구치율 = 인구 10만명 당 구치자 수</ref> 통계이다.


[[File:Incarceration Rates Worldwide ZP.svg|300px]]
https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Incarceration_Rates_Worldwide_ZP.svg/330px-Incarceration_Rates_Worldwide_ZP.svg.png


이 도표를 따라 만들어 보자.
이 도표를 따라 만들어 보자.
122번째 줄: 149번째 줄:
|}
|}


==data.php==
==data.php 작성==
이번에는 data.json 대신 PHP에서 위 데이터대로 입력하여 차트에 연결해 보자.
이번에는 data.json 대신 PHP에서 위 데이터대로 입력하여 차트에 연결해 보자.
<source lang='php'>
<source lang='php'>
<?php
<?php
include $_SERVER['DOCUMENT_ROOT'].'/php-ofc-library/open-flash-chart.php';
include $_SERVER['DOCUMENT_ROOT'].'/vendor/open-flash-chart/php-ofc-library/open-flash-chart.php';


$chart = new open_flash_chart();
$chart = new open_flash_chart();
147번째 줄: 174번째 줄:


echo $chart->toString();
echo $chart->toString();
?>
</source>
</source>


*http://jmnote.com/ofc/data.php
*http://zetawiki.com/ex/open-flash-chart/data.php
:데이터 그대로 보기. 위의 data.json과 같은 형식.
:데이터 그대로 보기. 위의 data.json과 같은 형식.
*http://jmnote.com/ofc/chart.php?ofc=data.php
*http://zetawiki.com/ex/open-flash-chart/chart.php?ofc=data.php
:데이터를 차트로 보기
:데이터를 차트로 보기
==의견==
*지금까지는 chart와 data를 별도의 파일로 만들고 data를 chart에 연결해주는 방식이었다. 하나의 파일에서 처리하는 것에 대해서는 '''[[오픈 플래시 차트 2 PHP 파일 1개로 구현]]''' 문서를 참고하시라.


==같이 보기==
==같이 보기==
*[[오픈 플래시 차트 2 데이터 파일에 인수 넘기기]]
*[[오픈 플래시 차트 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


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

2017년 6월 27일 (화) 12:00 판

Open Flash Chart; OFC
Open Flash Chart 2 시작하기
Open Flash Chart 2 사용법
오픈 플래시 차트 2 설치

1 다운로드

2 설치

  • 서버의 /var/www/html/ 폴더로 이동
  • vendor/open-flash-chart/ 폴더 생성 후 이동
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#
  • open-flash-chart-2-Lug-Wyrm-Charmer.zip 업로드, 압축 풀기
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#
swf 자체를 호출하면 데이터가 입력되지 않아서 아래와 같이 IO ERROR라고 나온다.

Ofc first error.png

3 chart.php 작성

  • 웹루트(/var/www/html) 폴더로 이동
  • ex/open-flash-chart 폴더 생성 후 이동
  • chart.php 작성
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
<!DOCTYPE html>
<meta charset="utf-8" />
<title>안녕 OFC</title>
<p>안녕 OFC</p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
	codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
	width="500" height="250" id="graph-2" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="/vendor/open-flash-chart/open-flash-chart.swf" />
<param name="quality" value="high" />
<embed src="/vendor/open-flash-chart/open-flash-chart.swf"
	quality="high"
	bgcolor="#FFFFFF"
	width="500"
	height="250"
	name="open-flash-chart"
	align="middle"
	allowScriptAccess="sameDomain"
	type="application/x-shockwave-flash"
	pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
여전히 데이터를 연결해주지 않았기 때문에 IO ERROR 메시지가 나온다.

4 data.json 작성

  • 아래 내용으로 data.json 생성
{
  "title":{
    "text":  "제목",
    "style": "{font-size: 20px; color:#0000ff; font-family: NanumGothic; text-align: center;}"
  },
  "elements":[
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "페이지뷰",
      "font-size": 10,
      "values" :   [9,6,7,9,5]
    },
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#CC9933",
      "text":      "페이지뷰2",
      "font-size": 10,
      "values" :   [6,7,9,5,7]
    }
  ],
  "x_axis":{
    "stroke":1,
    "tick_height":10,
    "colour":"#d000d0",
    "grid_colour":"#00ff00",
    "labels": {
        "labels": ["1일","2일","3일","4일","5일"]
    }
   },
  "y_axis":{
    "stroke":      4,
    "tick_length": 3,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "offset":      0,
    "max":         20
  }
}
데이터가 그대로 보인다.
차트 파일에 데이터 파일이 연결되어 차트가 제대로 보인다.

5 통계 예시

다음은 나라별 구치율[2] 통계이다.

 

이 도표를 따라 만들어 보자. 원자료는 다음과 같다.[3]

나라 구치율
미국 710
러시아 540
남아프리카 400
유럽 140
캐나다 120
오스트레일리아 120
일본 70

6 data.php 작성

이번에는 data.json 대신 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();
데이터 그대로 보기. 위의 data.json과 같은 형식.
데이터를 차트로 보기

7 의견

8 같이 보기

9 주석

  1. 2009-07-27에 마지막으로 업데이트되었으며, 2012-06-18 현재 최신버전
  2. 구치율 = 인구 10만명 당 구치자 수
  3. 수치는 그림에서 읽은 것이라 정확하지 않다.

10 참고

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}