Open Flash Chart 2 설치

Jmnote bot (토론 | 기여)님의 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] 통계이다.

330px-Incarceration_Rates_Worldwide_ZP.svg.png

이 도표를 따라 만들어 보자. 원자료는 다음과 같다.[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 }}