[리뷰] 플래쉬 챠트 퓨전차트 간단하게 사용하기. FusionChart

웹 개발을 하다 보면 차트를 뽑아 줘야 할경우가 종종 생기는데 기존의 gd2를 이용한 방식의 챠트들은 수려한 모습으로 출력하기가 좀 힘든 경우가 많았습니다.

얼마전 부터 사용하기 시작한 "FusionChart"라는 InfoSoft Global 사의 챠트프로그램을 이용해서 기본적인 원형차트와 막대 챠트를 그리는 법을 알아 보겠습니다.

예제는 PHP로 하지만 JSP나 ASP등도 비슷하기때문에 별 어려움은 없을것입니다.

지원하는 언어로는 "ASP , PHP ,C# , JSP , VB net "등 왠만한 언어는 모두 지원합니다.
(아래 이미지 참조)

1. 설치

퓨전차트는 기본적으로 유료,Trial 버전을 제공합니다.
처음에 제가 이 챠트를 알게된 이유가 프리버전이 있어서였는데 현재는 trial로 표시되고 챠트에 기업이름이 찍히는것 같습니다.

지금은 회사에서 구입한게 있어서 사용중이므로 유료버전으로 테스트 하겠습니다.

http://www.infosoftglobal.com/

가셔서 Fusion chart 항목을 클릭하고 들어가셔서 다운로드로 이동합니다.
다운로드 가시면 Fusion chart를 다운로드 하는 링크가 있고 이를 클릭하면 아래의 화면이 뜹니다.
이름과 이메일을 대충 입력하시면 바로 다운로드 창이뜹니다.

다운로드 받으신 파일의 압축을 해제 하면 아래와 같은 구조거나 비슷한 구조일것입니다
(버전이나 유료 트라이얼의 차이정도)

해당 소스를 사용하시는 웹폴더의 적당한 위치(웹툴을 올려놓실때 사용하시는 나름대로의 위치)에 업로드 합니다.

저는 webtool\tools\fChart 라는 폴더에 넣도록 하겠습니다


2. 데이타 처리 방식

퓨전 차트는 기본적으로 XML형식으로 데이타를 받아서 출력을 합니다.
그러나 그외에서 배역이나 직접 DB에 연동해서 출력하는 방법이 있습니다.

해당 예제는 Code/해당언어 폴더에 들어가셔서 원하시는 방법의 예제를 보면 됩니다만 이번 설명에서는 데이터를 배열로 가져와서 for문으로 퓨전챠트의 XML형식으로 입력하는 보통 분들이 가장 사용하기 쉬운 형태로 설명 하겠습니다.

사실 퓨전챠트(원,막대)의 XML형식이라는게 별거는 없습니다.

형식)
          <chart ......옵션 >
               <set label='' value=''>
          </chart>

위의 형식으로만 만들면 원과 막대 그래프는 바로 출력됩니다.


3. include

퓨전차트를 사용할려면 챠트 생성관련 파일을 페이지에서 include 해줘야 합니다.

다음 처럼 하시면 됩니다.
(여러분 각자가  풀어 놓으신 폴더를 참고하세요)

<?
    include "/webtool/tools/fChart/Code/PHP/Includes/FusionCharts.php";
?>

4. 데이타 배열로

예를 들어서 장애 처리와 관련한 프로그램이 있다고 생각 하고 해당 데이타를 추출하겠습니다.

X축의 값은 '접수','조치중','완료' 라고 놓고 각각의 장애가 몇건인지 보여주는 챠트를 만들겠습니다.

<?
         $static = array(2,1,1);
         $name = array('접수','조치중','완료');        

?>

5. data xml 코드 만들기

위의 데이타 배열을 이용해서 <chart> 를 완성합니다.

<?
          $xml = "<chart caption='제목' baseFontSize='12' baseFont='굴림' >";
          for( $i = 0 ; $i < count($static) ; $i++ ) {
                   $xml .= "<set name='".$name[$i]."' value='".$static[$i]."'  />";
          }
          $xml .= "</chart>";

          echo renderChart("/webtool/tools/fChart/Charts/Column3D.swf", "", $xml, "FactoryDetailed", 375, 300, false, false);
?>

정말 간단하게 만들려고 하면 위의 방식으로만 하면 챠트가 완성됩니다.

그런데 간혹 타 사이트 돌아 다니다 보면 퓨전 챠트를 사용 하시면서 한글 폰트 옵션을 몰라서인지 그냥 기본대로만 두셔서 아래처럼 한글이 찌그러 진체로 사용하시는 분들이 많으 시더군요.

참 보기 않좋죠?

이때 한글을 보기 좋게 사용 하시려면 위에 굵게 표시해둔 속성을 사용하시면 됩니다.
(속성은 다양하게 있습니다, 이와 관련해서 약식으로 제가 설명해 놓은 부분은 아래에서 링크 걸어 드리겠습니다)

baseFontSize='12' baseFont='굴림'

한글은 폰트 크기를 12로 줄때가 가장 정상으로 보이더군요. 폰트는 굴림을 이용합니다.
이 속성을 주면 다음처럼 깔끔한 한글로 그래프가 표시됩니다

위와 같은 플래시가 완성 되었습니다.
기본적인 애니메이션 효과가 있으므로 페이지가 뜰때 챠트가 움직이는 효과도 볼수 있습니다.

원 그래프를 보고 싶을 때는

<?
echo renderChart("/webtool/tools/fChart/Charts/Column3D.swf", "", $xml, "FactoryDetailed", 375, 300, false, false);

?>

Column3D.swf 를 Pie2D.swf 라는 이름으로 변경합니다.

챠트의 종류는 기본적으로 Charts 폴더에 모두 정리되어있고 그중에 하나를 사용하시면 되는데 복잡한 챠트는 보통 다른 형태의 데이타를 원하기 때문에 위와 같은 x,y축에 대한 값만으로는 표시가 안됩니다.

하지만 기본적인 파이(원),컬럼(막대),도넛 형은 지원 하고 각각 2D와 3D형태를 지원 합니다.


즉

Pie(원) : 2D , 3D
Column(막대) : 2D , 3D
Doughnut(도넛) 2ㅇ, 3D

를 지원 합니다.


뒤쪽의 빨간색 숫자는 플래쉬의 크기입니다. 현재 375*300 형태의 크기를 사용 했습니다. 원하시는 대로 변경하시면 됩니다.

아래에서 해당 챠트의 모습을 보도록 하겠습니다.

원, 도넛의 경우 해당 부분을 클릭하면 위의 이미지들처럼 그부분이 쪼개져 나오는 애니메이션이 보입니다.


간단한 예제지만 저도 챠트 괜찮은것을 찾으려고 헤메다가 결국 이것저것 다 설치해보는 고통을 겪은 후에야 정한것이기 때문에 혹시 저랑 비슷한 고민을 하시는 분들은 보시고 참고 하시라는 의미에서 간단하게 리뷰를 적어 봤습니다.

도움말 항목이 영어로 되어 있기는 하지만 읽기가 어렵지 않기 때문에 도움말을 보시면서 사용하시면 더 세밀한 조정등을 하실 수 있으실 겁니다.

Document를 보는 방법은

http://자신의 도메인/설치한 차트폴더명/index.html 을 브라우저에 입력하시면 Document 페이지가 로딩됩니다.

위와 같은 페이지가 뜨므로 천천히 들여다 보시면 사용하시는데 문제가 없으실 겁니다.
다음 포스트에서는 파이차트에 쓰이는 속성을 살짝 정리해 보겠습니다.