Adding Charts to Web-Based J2EE Applications
비지니스 어플리케이션은 대체로 데이타를 다룬다. 따라서 개발자들은 종종 유저들이 그러한 데이타들을 분석할수 있도록 하는 컴포넌트를 제공해주어야 할 경우가 생기게된다. 이러한 경우 한가지방법은 텍스트베이스의 리포트를 제공해주는것이 있을수 있고, 다른방법으로는 그래피컬한 차트를 이용하여 데이타를 표현하여 그것을 제공해주는 방법이 있다.
차트는 대단히 유용한 툴인데, 유저들에게 시각적 데이타 요소들의 비교점을 제공해주고, 대량의 데이타를 다룰때 문자리포트로는 쉽게 구분되지않을수 있는 트렌드와 패턴을 쉽게 식별하여 줄수 있도록 한다. 오늘날 많은 비지니스 소프트웨어들이 웹베이스화되고 브라우져를 통해 전달되는 패턴을 취하고있는데, 그럼에도불구하고 이러한 어플리케이션에 대한 요구사항들, 특히 데이타분석에 대한 요구사항은 이전의 패턴을 그대로 따르고있다. 다행히도, 만약 당신이 J2EE 테크놀러지를 사용하여 개발을 진행한다면 몇몇 오픈소스 들이 도움을 줄 수 있다. 이 글이 J2EE 개발자들로 하여금 보다 빠르고, 시각적이며, 그래피컬한 차트를 업무에 활용할수 있도록 도움을 줄 수 있을 것이다.
JFreeChart and Cewolf—A Powerful Combination
JFree.org 는 많은 유용한 오픈소스 프로젝트를 진행하고 있는 웹사이트이다. JFreeChart는 그러한 프로젝트의 하나로 David Gilbert에 의해 주도되었다. JFreeChart는 데이타셋(a set of data)에 기초하여 시각적 그래픽차트를 형성하여주는 몇개의 자바 라이브러리로 구성되어있다..
Cewolf 는 또다른 오픈소스 프로젝트이다. Cewolf는 JSP태그컬렉션을 포함하는 고유한 몇개의 라이브러리 셋을 포함하고있다. Guido Laures에 의해 시작된 이 프로젝트는 개발자들이 JFreeChart기반에서 jsp페이지에 보다쉽게 차트를 표현하는 방법을 제공한다.즉 Cewolf는 JFreeChart를 기반으로 하여 그 위에 구성된 일종의 레이어인 셈이다. Cewolf는 JFreeChart로의 데이타 input을 지원하며, 결과 이미지를 jsp tag에 설정된 정의에 따라 브라우저에 구현한다. 이 두 프로젝트의 라이브러리들은 우리가 원하는 결과를 얻기위해 필요한것들이다. 가장 최근의 Cewolf버전은 version 0.9.8로 JFreeChart의 0.9.8버전을 지원하고 있다.(참고로 JFreeChart의 현재최신버전은 0.9.9이다)
Concepts and Terminology
그래피컬 차트는 하나이상의 데이타 '시리즈들'을 표현한다. 어떤경우에는 이러한 시리즈들은 하나이상의 '카테고리'들로 그룹화 되어지기도 한다. 시리즈는 간단히 말해 이름으로 구분된 데이타 값들의 집합이다. 예를들어 우리가 개인적으로 좋아하는 계절에 대한 투표를 한다고 가정하면 봄,여름,가을,겨울드이 시리즈명이 될수 있을것이다. 차트에서는 각각의 시리즈들은 유니크한 색이나 패턴으로 나타나며, 범례에 표시된다. 또한 시리즈들을 그룹화하여 카테고리로 나타내는것도 가능하다. 만약 우리가 전에 예로들었던 계절에 대한 투표가 2년에 걸쳐 진행되었다면 각각의 년도가 두 세트의 데이타 시리즈를 그룹화하는 카테고리가 될수 있을것이다. 마지막으로 각 년도에 대해 어떤 특정 방식의 차트(pie,line,bar and so forth)로 표현 할 것인가를 결정하는것은 어떻게 데이타를 표현하기를 원하느냐 하는것과, 보여지려는 데이타의 복잡성정도에 의해 결정된다.
차트는 많은 경우 데이타베이스를 이용하여 데이타를 표현한다. 따라서 JFreeChart는 소스가되는
데이타를 필요로 하는데, 이것들은 데이타셋(Dataset)이라 불리는 자바 인터페이스에 기초하여 정의된다. 두가지의 가장 일반적인 데이타셋은 카테고리데이타셋(CategoryDataset)과 파이데이타셋(PieDataset)이다. 알다시피 파이데이타셋은 파이차트를 표현하는데 필요한 데이타들을 제공한다.
파이차트는 차트중에 가장 간단한 타입이다. 파이차트는 데이타시리즈들의 값을 표현하며, 전체에 대해 어느정도의 비율을 나타내는지를 보여준다. 카테고리데이타셋은 하나이상의 카테고리에 의해 그룹화된 시리즈들을을 표현하는 보다 복잡한 데이타셋을 위한 인터페이스이다.
Cewolf는 데이타셋프로듀서(DatasetProducer)라고 불리는 인터페이스를 제공한다. 개발자들은 웹어플리케이션으로부터 JFreeChart로 데이타를 넘겨주기위해 이 인터페이스를 임플리먼트(implement)한다. JFreeChart데이타셋으로 리퀘스트데이타를 넘겨주는것은 데이타셋프로듀서의 역할로, 이로 인해서 차트가 구성되게 된다.
Getting Started
이번 장에서는 파이차트 구현을 위한 기술적 세부사항들에 초점을 맞추어 이야기를 진행해볼 것이다. 가장 처음 필요한것은 샘플데이타들이다. 이 예제를 위해 나는 employee와 dapartment테이블을 생성할것이다. 아래에 hsql 데이타베이스를 위한 쿼리가 있다.
CREATE TABLE dept (
dept_id INT NOT NULL IDENTITY,
name VARCHAR(30) NOT NULL,
descrip VARCHAR(200)
);
CREATE TABLE emp (
emp_id INT NOT NULL IDENTITY,
dept_id INT NOT NULL,
f_name VARCHAR(30),
l_name VARCHAR(30),
hire_date DATE,
CONSTRAINT fk_dept_id FOREIGN KEY (dept_id)
REFERENCES dept (dept_id)
);
INSERT INTO dept (name,descrip)
VALUES('IT', 'Information Technology'); INSERT INTO dept (name,descrip)
VALUES('ACCT', 'Corporate Accounting'); INSERT INTO dept (name,descrip)
VALUES('MRKT', 'Sales and Marketing'); INSERT INTO dept (name,descrip)
VALUES('HR', 'Human Resources and Payroll'); INSERT INTO emp(dept_id,f_name,l_name,hire_date)
VALUES(0,'Mike','Smith','2003-01-29');
INSERT INTO emp(dept_id,f_name,l_name,hire_date)
VALUES(0,'Joe','Taylor','2003-04-15');
INSERT INTO emp(dept_id,f_name,l_name,hire_date)
VALUES(0,'Jennifer','Betts','2003-05-07');
Employees는 네개의 departments중 하나에 소속될것이다.
각각의 employee의 고용일은 emp 테이블에 표시되어있다.
이곳( Here ) 전체 SQL 스크립트가 나타나있다. 만약 우리가 만든 차트와 데이타의 차이점을 알아보기 원한다면 스크립트를 다운받아 비교해보는것도 좋을것이다.
웹어플리케이션에서 당신은 몇개의 JFreeChart와 cewolf를 포함하는
라이브러리들을 포함시켜줄 필요가 있다.
이곳에서 다운받아 필요한 jar파일들을 사용할수 있다 Cewolf distribution
이 외에 추가적인 JFreeChart파일들을 다운받을 필요는없으며 이 jar파일들을
당신의 WEB-INF/lib 폴더에 복사하라
| jfreechart-0.9.8-demo.jar |
Jfreechart-0.9.8.jar |
Jcommon-0.8.0.jar |
Commons-logging.jar |
Cewolf.jar |
| Batik-xml.jar |
Batik-util.jar |
Batik-syggen.jar |
Batik-dom.jar |
Batik-awt-util.jar |
cewolf는 자바 서블릿 문법으로 작성되어, 차트를 렌더링하기위해 CewolfRenderer라는 서블릿이
존재한다. 이 서블릿은 두개의 입력 파라미터들을 가지고있는데, 이것들에 대해서는
아래서 이야기될것이다. 여기서는 이 서블릿들을 WEB-INF/web.xml에 매핑하는것을 우선
알아보겠다
CewolfServlet
de.laures.cewolf.CewolfRenderer
<!-- sets storage implementation -->
storage
de.laures.cewolf.storage. TransientSessionStorage
<!-- sets overlib.js location relative to webapp -->
overliburl
etc/overlib.js
CewolfServlet
/cewolf/*
cewolf는 etc/ 디렉토리에 자바스크립트 파일을 포함하고있는데(overlib.js)
이것은 두개의 주요한 웹브라우져인 Internet Explorer and Mozilla에 대하여 툴팁을 렌더링하는데에 이용되는
스크립트들을 포함하고있다
Mozilla브라우저는 Explorer와는 약간 다른방식의 메카니즘을 사용하기때문에 이 스크립트 파일은 당신의
웹어플리케이션의 root폴더에 추가하도록 하자
Cewolf는 기본적으로 유저의 HttpSession object에 존재하는 모든 이미지들을 가지고 온다.
서블릿의 initialization 파라미터인 TransientSessionStorage 클래스가 이 역할을 하게된다.
다른 옵션으로는 시스템상의 이미지를 가지고오는 옵션이 존재하는데, 이것을 위해서는 storage의
param-value tag안에 있는
TransientSessionStorage를 같은 패키지의 FileStorage 클래스로
바꾸어주어야한다. 모든 차트 이미지는 PNG 타입의 이미지로 저장이된다
(물론 다른 타입도 가능하다) PNG파일은 대부분의 웹브라우저에서 지원되는
높은 품질의 이미지형식이다.
이제 당신의 어플리케이션 연동이 완료되었다
이제 당신은 데이타를 생성하고 표현하기위해 자바클래스와 jsp파일을
코딩하는것들이 필요하다. 우선 자바파일에 대해 생각해보면,
앞에서 언급되었듯이 Cewolf는 JFreeChart에 데이타를 제공하기위한
DatasetProducer 인터페이스를 정의하고 있다
아래에 DatasetProducer 인터페이스가 보여지고있다.
| Object produceDataset(Map params) | Method that returns the data (as a Dataset) for rendering. Typically, you would access your database here, either directly or indirectly, to provide this data. |
| boolean hasExpired(Map params, Date since) | This method can be used to interrogate the last time the data was produced and determine whether produceData needs to be invoked again. |
| String getProducerId() | Method that uniquely identifies a type of DatasetProducer. |
produceDataset 메소드는 이 그룹의 가장주요한 메소드이다
이 메소드는 당신의 차트에 필요한 데이타들을 제공하는 메소드이기 때문이다
이 예제에서, 당신은 각 부서에 속한 employees의 인원수를
보여주는 간단한 파이차트를 생성할것이다. emp테이블과 dept테이블로부터
해당데이타를 가져오는 쿼리를 동작시켜 데이타베이스로부터 정보를 가져와
보도록 한다.
다음 코드를 보자 EmployeesByDept.java
보는것과 같이 이 코드는 DatasetProducer를 임플리멘테이션하고있다.
예제를 간단히 하기위해 hasExpired메소드의 리턴값을 false로 지정하자
이것은 데이타셋이 expire되지않는다는 의미이다.
실제 어플리케이션에서는 이부분을 로직에 따라 결정해주면될것이다
데이타베이스에 접근하는EmployeesByDept은 utility 클래스로부터
받아와 사용할수 있으며 파이차트의 생성을위해 임플리멘테이션된
DefaultPieDataset의 인스턴스를 리턴한다. 또한 쿼리는 입력 파라미터의
존재유무에 따라 실행여부가결정된다. 당신이 파라미터를 지정하는것을
잊지않았다면 쿼리는 다음과같이 실행될것이다
SELECT COUNT(emp_id), dept.name FROM emp, dept WHERE
emp.dept_id = dept.dept_id;
이상의 쿼리에 의해 JFreeChart가 생성되고 당신의 JSP파일이 요청할때
퀘스트에 의해 화면에 표시될것이다.
Cewolf 태그가 이것을 실행하기위해 어떻게 코드를 표현하는지
다음의 소스를 살펴보자 piechart.jsp
piechart.jsp에는 두개의 parent tag가 존재한다.
chart 와 img가 그것인데 차트 태그는 태그와,차트의랜더링, 차트의타이틀,
배경색등의 상세기능을 담당하는 어트리뷰트를 포함하며
차트 설정의 모든부분을 담당한다
차트태그에서 가장 중요한정보를 담고있는부분은 다음의 태그이다
data 태그는 차트를 랜더링하는데 필요한 데이타셋을 나타낸다
pieChartView는 페이지의 처음에서 선언한 EmployeesByDept의 인스턴스이다
그 바로아래에 있는 다른 parent 태그는 img태그이다
이 태그는 차트가 어떻게 표현될것인지를 결정한다.
이 태그는 높이,길이,테두리등의 그래픽요소를 컨트롤하는 attribute를
포함하고있다. 차트와 img태그는 서로 차트의 id 어트리뷰트와 img의 chartid태그를
통해 서로 링크되어 있다. 이번 예제에서 당신은 차트의 id를 pieExample이라고
주었는데, 이 태그정의들은 아래의 파이차트 이미지에서 다음과같이 보여진다
우리의 예제가 훌륭한 차트형식으로 표현되었다.
그러나 당신은 이 예제를 향상시킬수 있을것이다.
많은 차트들이 각각의 데이타 시리즈들을 표현하기위해 범례부분에 표시하는
텍스트를 포함하여 여러가지 다양한 텍스트들을 가지고 있다.
당신은 이미지 자체에 텍스트를 삽입할 수도 있고, JFreeChart와 Cewolf를
사용하여 텍스트들을 tool tip으로 나타낼수도 있다.
그럼 유저의 마우스가 특정 이미지상의 특정 시리즈들을 가르키는것에 따라
툴팁을 나오게 하는 방법에 대해 알아보자
이를위해서 당신은 generateToolTip메소드를 임플리멘테이션한
PieToolTipGenerator 타입의 인스턴스를 얻어야한다.
가장 쉬운방법은 EmployeesByDept.java의 이너클래스로 이를 추가하는것이다
여기(Here)에 업데이트된 자바파일의 소스가있다
다음의 코드들이 새로이 삽입되었다.
/**Inner Class to generate tool tips for data.*/
PieToolTipGenerator pieTG = new PieToolTipGenerator()
{ public String generateToolTip(PieDataset dataset, Comparable section, int index) { return String.valueOf(dataset.getValue(index) +
" employees total" ); } }; public PieToolTipGenerator
getPieTG() { return this.pieTG; }
다음은 새로이 향상된 차트를 표시하기위한 jsp파일이다 piechart.jsp
많은 향상이 된 두번째의 파이차트를 표현하고있다.
페이지의 윗부분에서 PieToolTipGenerator의 인스턴스를 얻고있다
<% pageContext.setAttribute("pieChartViewToolTips",
pieChartView.getPieTG()); %>
추가적으로 툴팁을 사용하기위해 img태그에 tag와 map이 추가될 필요가있다
두번째 파이차트에 툴팁을 추가하면서, 나는 추가적인 기능들을 가진
태그들을 사용하였다. 차트이미지는 이제 pie3d 형식의 차트가 되었으며
차트의 범례는 차트로부터 따로따로 각각 생성된다.
보다중요한것은 이제 차트태그의 바로아래에 있는 producer태그를 이용하여
inputYeat라는 입력파라미터를 사용할 수 있게되었다는 것이다.
차트를 파라미터를 사용하여 표현하는것은 동적인 차트를 유저들에게 제공하는
데 있어 키가 되는 부분이다.
표준적인 어플리케이션에서 이러한 파라미터값들은 HTML 폼에서 유저들이 submit
한 값으로부터 입력될것이다.
<>name="year" value="<%=(Serializable)inputYear%>"/>
EmployeesByDept에서 당신은 입력파라미터를 체크해보아야한다.
만약 파라미터가 제공된다면 당신은 우리의 데이타를 년도별로 정렬할수 있을것이다
그림1은 두가지 파이차트를 보여준다
두번째차트가 HR employees를 나타내는 시리즈에 대해서 '6 employees total'
이라는 툴팁 텍스트를 표시하는것을 주목하라
아래에 범례가없는 3차원 파이 차트가 보여지고있다.
More Advanced Charts
보다 복잡한 차트는 한개이상의 카테고리를 포함하는 시리즈들의
데이타를 표현하기위해 쓰여진다. JFreeChart의
CategoryDataset 인터페이스는 카테고리에의해 그룹화된 데이타들을 포함하는
시리즈들을 구현하고 있다. 아래에 링크되어있는 두번째의
자바클래스파일을 살펴보자
EmployeesByDeptAndQtr.java
EmployeesByDeptAndQtr 역시 Cewolf의 DatasetProducer 인터페이스를
임플리멘테이션하고있다. 그 이름이 나타내는것처럼 이 클래스는
각각의 department에 대한 head count의 수를 반환하는 데이타베이스
뭐리를 실행하고,quarter of the employee's hire date를 카테고리화
하기위해 작성된 클래스이다. 아래에 데이타베이스에 사용할 쿼리문이 나와있다
SELECT COUNT(emp_id), QUARTER(emp.hire_date) quarter,
dept.name FROM emp, dept WHERE emp.dept_id =
dept.dept_id GROUP BY dept.name,QUARTER(emp.hire_date);
리턴되는 DefaultCategoryDataset로부터 당신은 몇가지의 차트타입을
생성할 수 있다. 각각의 이러한 차트들은 x,y축을 가지고있는데
x축은 데이타를 수평적으로 표현하고 y축은 수직적으로 표현한다.
사용되는 차트의 유형에 따라 하나의 플룻은 value points를 표현하고,
파이차트와 같은 다른 차트에서는 데이타 시리즈들은 여러색깔의
글과 색으로 표현되어진다(범례에 쓰이는것 포함)
당신은 세부분으로 나누어 그것을 표현할수있는데, 가로바와 세로바, 그리고
라인차트가 그것이다. 바차트는 x,y축의 깊이로 데이타를 표현하고,
라인차트는 각 데이타포인트를 라인으로 연결하여 차트를 가로지르는
방식으로 데이타를 표현한다.
다음의 내용을 살펴보자 categorychart.jsp
이 파일은 piechart.jsp에서 본것과 비슷한 패턴으로 작성되어있다.
DatasetProducer instance를 선언하고 JSP 태그세트를 이용하여
차트를 표현하고있다. 이 파일은 'horizontalBar3D', 'verticalBar3D',
'line'.의 3가지 차트방식의표현법을 보여주고있다
이 3가지 차트는 DatasetProducer에서 제공된 같은 CategoryDataset를
사용한다. 단 2개의 새로운 태그 어트리뷰트만이 사용되었다.
xaxislabel 과 yaxislabel이 그것이다.
다음에서 그것을 보여주고있다.
Figure 2. Various Category Charts
Conclusion
이 글의 목적은 JFreeChart와 Cewolf를 이용하여 그래픽 차트를 구현하는
것을 소개하는데에 있다. 나는 추가적인 차트타입과 향상된기능,옵션들을
살펴보기위해 각각의 웹사이트를 살펴보는것을 강력하게 추천한다.
JFreeChart 추가적인 기능문서들은 구매해야 사용이가능하다.
그러나 각 프로젝트들은 질의에 대한 답을 해주고 조언을 해줄수있는
커뮤니티 포럼들을 운영하고있으며, 온라인 Javadocs를 제공한다.
JFreeChart와 Cewolf의 컴파일로 J2EE 개발자들은
유용하고 사용하기편하며 사용자의 데이타분석요구를 만족시킬수있는
툴을 가지게 될것이다.
출처 : [직접 서술] 블로그 집필 - 민군네집
