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

11번째 줄: 11번째 줄:
*웹서버의 DOCUMENT_ROOT에 open-flash-chart 폴더 만들기
*웹서버의 DOCUMENT_ROOT에 open-flash-chart 폴더 만들기
*open-falsh-chart.swf 파일, php-ofc-library 폴더, js 폴더를 방금 만든 ofc 폴더에 업로드  
*open-falsh-chart.swf 파일, php-ofc-library 폴더, js 폴더를 방금 만든 ofc 폴더에 업로드  
*예시: http://jmnote.com/ofc/open-flash-chart.swf  
*예시: http://jmnote.com/open-flash-chart/open-flash-chart.swf  
:swf 자체를 호출하면 데이터가 입력되지 않아서 아래와 같이 IO ERROR라고 나온다.
:swf 자체를 호출하면 데이터가 입력되지 않아서 아래와 같이 IO ERROR라고 나온다.



2012년 6월 21일 (목) 15:23 판

Open Flash Chart 2 시작하기
오픈 플래시 차트 2 설치

1 다운로드

2 설치

  • open-flash-chart-2-Lug-Wyrm-Charmer.zip 압축 풀기
  • 웹서버의 DOCUMENT_ROOT에 open-flash-chart 폴더 만들기
  • open-falsh-chart.swf 파일, php-ofc-library 폴더, js 폴더를 방금 만든 ofc 폴더에 업로드
  • 예시: http://jmnote.com/open-flash-chart/open-flash-chart.swf
swf 자체를 호출하면 데이터가 입력되지 않아서 아래와 같이 IO ERROR라고 나온다.

Ofc first error.png

3 chart.php

  • 아래 내용으로 chart.php 생성
이 파일은 HTML 화면 내에 OFC 영역을 할당하는 역할을 한다.
<!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="open-flash-chart.swf" />
<param name="quality" value="high" />
<embed src="/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] 통계이다.

Incarceration Rates Worldwide ZP.svg

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

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

6 data.php

이번에는 data.json 대신 PHP에서 위 데이터대로 입력하여 차트에 연결해 보자.

<?php
include $_SERVER['DOCUMENT_ROOT'].'/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 주석

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

9 참고 자료

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