Cewolf 를 이용해서 Chart 만들기

프로그래밍/JAVA

by 라제폰 2009. 1. 23. 16:58

CewolfHowTo	Search Wiki:
Your trail:

Cewolf 를 이용해서 Chart 만들기

번역 및 수정자 : 김재탁
e-mail & msn : nudejava@hotmail.com

Cewolf 는 JFreeChart 기반으로 만들어 졌음을 알려드립니다.

preview

지루한 예제를 따라하기 전에 결과를 먼저 보면 더욱더 의욕이 생길것 같아서 결과를 미리 보여드립니다.
이 예제의 결과 화면 입니다.
결과 소스는 여기

서 다운 받으세요.

어플리케이션 개발을 위한 준비

만약 아직 Cewolf

배포판을 다운 받지 않았다면 여기

에서 다운 받습니다.
그리고 배포판의 /lib 디렉토리에 있는 파일들중 다음 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-svggen.jar
batik-dom.jar
batik-awt-util.jar

배포판의 /example/etc 에 들어있는 overlib.js 파일을 당신의 어플리케이션의 root 디렉토리에 복사합니다.
이 자바 스크립트 파일은 모질라 기반 브라우저에서 이미지 맵에 대한 툴팁을 제공하는데 사용됩니다.

위는 웹 어플리케이션에서 Cewolf 를 사용하기 위해 반드시 준비해야 하는 것들입니다.
만약 Cewolf 태그를 사용할때 문제가 생기면(e.g. 서블릿 컨테이너 콘솔에 "No Tags" 라고 나온다든지..)
추가적으로 배포판의 /etc 디렉토리 밑에 있는 cewolf.tld (또는 JSP 1.1 컨테이너에서는 cewolf-1.1.tld) 를 당신의 어플리케이션의 root 밑의 원하는 위치에 넣고
이를 JSPs 페이지에서 cewolf 태그라이브러리 디스크립터로 이 파일을 참조하게 합니다.

DatasetProducer 를 구현합니다.

Cewolf 는 MVC

(Model-View-Control) 모델을 사용 하기 때문에 차트에 보이는 data 는 JSP 페이지에 정의된 view 로 부터 분리되어 있습니다.
그러므로 여러분은 데이타와 차트의 종류들을 각각 따로 바꿀 수 있습니다.
정확한 데이타의 차트를 제공 하기 위해서 당신은 반드시 de.laures.cewolf.DatasetProducer interface 를 구현(implements)한 개체를 만들어야 합니다.
이 개체는 클라이언트가 차트를 요구할때 마다 데이타가 갱신 되어야 하는지를 묻습니다.(public boolean hasExpired(Map params, Date since))
아래 이 예제에서 데이타를 제공하는데 필요한 DatasetProducer 구현 개체가 있습니다.

/*

 * net.nudejava.cewolf.example.PageViewCountData.java 0.1 Created on 2004. 3. 9.

 */

package net.nudejava.cewolf.example;



import java.io.Serializable;

import java.util.Date;

import java.util.Map;



import org.jfree.data.DefaultCategoryDataset;



import de.laures.cewolf.DatasetProduceException;

import de.laures.cewolf.DatasetProducer;



/**

 * 

 * @version 0.1

 * @author <a href="mailto:nudejava@hotmail.com">Jaetack Kim</a>

 */

public class PageViewCountData implements DatasetProducer, Serializable {

  // 실제 프로젝트에서 아래의 값들은 하드 코딩 되어서는 안되고 

  // database 또는 file 등의 data source 로 부터 동적으로 제공 되어 져야 합니다. 

  // 이것은 테스트 프로그램 이기 때문에 다음과 같이 하드 코딩 하였음을 알립니다.

  private final String[] categories =  { "mon", "tue", "wen", "thu", "fri", "sat", "sun" };

    

  private final String[] seriesNames = {"cewolfset.jsp", "tutorial.jsp", "testpage.jsp", "performancetest.jsp" };

      

  private final Integer[][] values = new Integer[seriesNames.length][categories.length];



  public Object produceDataset(Map params) throws DatasetProduceException {

    

    // 어떤 한 카테고리에 하나 혹은 그 이상의 항목들과 각각의 값이 있을때 

    // 사용하는 데이타 셋입니다.

    // 이 예제에서 categories[] 변수(요일)가 카테고리가 되고

    // 각 카테고리(요일) 마다의 항목은 seriesNames[](jsp 페이지 이름들)이 됩니다.

    // 그리고 각각 요일별 항목의 값은 다음 for 문 안에서 임의적으로 생성 합니다.     

    DefaultCategoryDataset dataset = new DefaultCategoryDataset();



    for (int series = 0; series < seriesNames.length; series++) {

      

      int lastY = (int) (Math.random() * 1000 + 1000);



      for (int i = 0; i < categories.length; i++) {

        // 실제로 구현할때  y 값은 데이타 베이스 쿼리로 부터 얻어와야 합니다.

        final int y = lastY + (int) (Math.random() * 200 - 100);

        lastY = y;

        // addValue(값, 가로키, 세로키)

        dataset.addValue((double) y, seriesNames[series], categories[i]);

      }

    }

    return dataset;

  }



  public boolean hasExpired(Map params, Date since) {

    return (System.currentTimeMillis() - since.getTime()) > 5000;

  }



  public String getProducerId() {

    return "PageViewCountData DatasetProducer";

  }

}

보다시피 위 datasetproducer 는 매우 유용해 보이지는 않습니다.(정적인 데이타 이기 때문에.. 즉 코드에 박힌 데이타..)
보통(실제 사용할 때는) 이 클래스는 datasource (e.g. a database) 를 사용하여 필요한 정보에 접근할 것입니다.
그러나 예제로서 만족시키기에는 위처럼 하면 충분하다고 생각합니다.

DatasetProducer 는 3개의 메소드(methods) 를 구현(implement)해야 합니다.

첫번째
가장 중요한 메소드인 produceDataset() 는 chart 에 제공 되어질 데이타를 만들어 내는 역할을 합니다.
이 메소드의 파라미터인 Map params 는 JSP 페이지의 특별한 태그에 의해 채워집니다. 이것에 대해서는 나중에 설명 하지요.
두번째
hasExpired() 메소드는 만약 이 개체(DatasetProducer 을 구현한 개체. 여기서는 PageViewCountData) 에 의해서 만들어진 data object 가 이미 Cewolf 의 데이타 캐쉬에 있다면 Cewolf framework 에 의해서 호출 됩니다.
true 를 반환한다면 이전에 사용되던 데이타는 (Cewolf 의 데이타 캐쉬에 있는 데이타) 이미 만료 되었음을 나타내는 것입니다.
세번째
getProducerId() 를 통해서 유일한 아이디를 제공해 줌으로서 Cewolf 프레임워크는 각각의 producer 를 구별 할 수 있게 됩니다.
만약 두개의 produce 인스턴스가 같은 아이디를 가지고 있다면 같은 데이타를 생성하는 것으로 간주 합니다.

자 이제 이 클래스를 컴파일 해서 당신의 어플리케이션의 /WEB-INF/classes 디렉토리 밑의 올바른 폴더 위치에 넣습니다.

당신의 Web App 에 Cewolf Servlet 을 설치 합니다.

모든 차트는 Cewolf 에서 제공하는 de.laures.cewolf.CewolfRenderer 라는 서블릿에 의해서 나타나게 됩니다.
그러므로 이 서블릿은 반드시 당신의 웹 어플리케이션에 설치 되어야 합니다.
이 서블릿을 사용 하기 위해서 /WEB-INF/web.xml 파일에 다음과 같은 라인을 추가합니다.

<servlet>
  <servlet-name>CewolfServlet</servlet-name>
  <servlet-class>de.laures.cewolf.CewolfRenderer</servlet-class>
</servlet>

추가적으로 컨테이너에게 어떤 URL 을 Cewolf 의 servlet 으로 연결 시킬지 알려주기 위해서 servlet-mapping 을 추가해야 합니다.

<servlet-mapping>
  <servlet-name>CewolfServlet</servlet-name>
  <url-pattern>/cewolf/*</url-pattern>
</servlet-mapping>

서블릿 설정이 제대로 되었는지 확인하려면 서블릿 컨테이너를 시작 시키고(e.g. tomcat .. resin)
브라우져로 서블릿을 호출해 봅니다.(e.g. http://localhost:8080/myapp/cewolf?state).
Cewolf 는 다음과 같은 응답을 할 것입니다. "Cewolf servlet up and running."

JSP 페이지에 태그를 작성합니다.

<%@page contentType="text/html"%>
<%@taglib uri='/WEB-INF/cewolf.tld' prefix='cewolf' %>
<HTML>
<BODY>
	<H1>Page View Statistics</H1>
	<HR>
	<jsp:useBean id="pageViews" class="net.nudejava.cewolf.example.PageViewCountData"/>
	<!--
		** cewolf:chart 태그 파라미터 설명 **
		
		id         : 이 페이지에 여러 차트가 있을 경우 차트를 구별 하기 위한 아이디
		title      : 차트의 상단에 나타나게 될 타이틀
		type       : 차트의 종류
		xaxislabel : x 좌표(하단)의 라벨
		yaxislabel : y 좌표(좌측)의 라벨
		
		** cewolf:producer 태그 파라미터 설명 **
		id : 실제 데이타를 담고 있는 개체
		
		** cewolf:img 태그 파라미터 설명 **
		chartid : 그려야할 차트의 아이디 (cewolf:chart태그의 id 프로퍼티 값)
		renderer : 렌더링 서블릿 path
	-->
	
	<!-- ================================ -->
	<!-- 첫번째 차트                      -->
	<!-- ================================ -->
	<cewolf:chart
	    id="line"
	    title="Page View Statistics 1"
	    type="line"
	    xaxislabel="Page"
	    yaxislabel="Views">
	    <cewolf:data>
	        <cewolf:producer id="pageViews"/>
	    </cewolf:data>
	</cewolf:chart>
	<p>
	<cewolf:img chartid="line" renderer="cewolf" width="400" height="300"/>
	<P>
	<HR>
	
	<!-- ================================ -->
	<!-- 두번째 차트                      -->
	<!-- ================================ -->
	<cewolf:chart
		id="bar"
		title="Page View Statistics 2"
		type="verticalbar"
		xaxislabel='Page'
		yaxislabel='Views'>
		<cewolf:gradientpaint>
			<cewolf:point x="0" y="0" color="#FFFFFF"/>
			<cewolf:point x="0" y="300" color="#EBEBEB"/>
		</cewolf:gradientpaint>
		<cewolf:data>
			<cewolf:producer id="pageViews"/>
		</cewolf:data>
	</cewolf:chart>
	<p>
	<cewolf:img chartid="bar" renderer="cewolf" width="400" height="300"/>
	<p>
</BODY>
</HTML>

보다시피 첫번째 태그는 여러가지 파라미터를 통해 차트를 정의 하고 있습니다.
최종적으로 태그에 의해 변환이 완료 됩니다.
태그는 변환된 차트를 그리는 < img> 태그를 HTML 페이지에 삽입합니다.
두 태그 사이의 연결은 같은 id 속성 값을 사용 함으로서 이루어 집니다.

이제 브라우저를 통해 이 페이지를 보게 되면 통계 그래프가 나타날 것입니다.
만약 깨진 이미지가 보인다면 서블릿 컨테이너의 로그 파일을 살펴 보십시오.

이미지 맵과 툴팁을 만듭니다

툴팁 기능을 제공 하기 위해선 추가적으로 자바 클래스를 만들던지 혹 이미 만든 자바 클래스에 약간의 코드를 더해 주어야 합니다.
이 튜토리얼에서는 위에서 만든 PageViewCountData 클래스에 몇가지 메소드를 추가하는 방식으로 하겠습니다.

다음과 같은 2개의 메소드를 추가합니다.

...

public class PageViewCountData implements DatasetProducer, Serializable, CategoryItemLinkGenerator, CategoryToolTipGenerator {

...  

  public String generateLink(Object data, int series, Object category) {    

    return seriesNames[series];  

  }  



  public String generateToolTip(CategoryDataset arg0, int series, int arg2) {    

    return seriesNames[series];  

  }

...

CategoryDataset 에 맞는 툴팁기능을 제공하기 위해서는 CategoryItemLinkGenerator 과 CategoryToolTipGenerator 인터페이스를 implements 해야 합니다. 다른 데이타 셋에 대해서는 cewolf java api 를 참조하십시오.

그 다음 JSP 페이지의 태그를 다음과 같이 바꿉니다.

	<cewolf:img chartid="line" renderer="cewolf" width="400" height="300">
		<cewolf:map linkgeneratorid="pageViews" tooltipgeneratorid="pageViews"/>
	</cewolf:img>

자 이제 페이지를 열고 data point 에 마우스를 가져다 대면 보면 툴팁과 함께 링크를 볼 수 있을겁니다.

Cewolf 에 대해 더 많은 정보를 얻고 싶으시다면 Tag Library Reference 과 Cewolf JavaDoc 을 참조하세요.

더 많은 예제를 보고 싶다면 example webapp(Cewolf home page에서 다운 받으세요) 를 디플로이 시키고 그 소스코드들을 참조해 가며 보면 됩니다.

폰트 조정

feb22b@hotmail.com 님(성함을 잘 몰라서)이 알려주신 방법

<%@page import="org.jfree.chart.plot.*"%>



<%@page import="org.jfree.chart.axis.*"%>



<%@page import="java.awt.Font"%>



<%

  ChartPostProcessor dataColor = new ChartPostProcessor() {

    public void processChart(Object chart, Map params) {

      CategoryPlot plot = (CategoryPlot) ((JFreeChart) chart).getPlot();

      for (int i = 0; i < params.size(); i++) {

        String colorStr = (String) params.get(String.valueOf(i));

        plot.getRenderer().setSeriesPaint(i, java.awt.Color.decode(colorStr));

      }



      final NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();

      rangeAxis.setUpperMargin(0.12);

      rangeAxis.setLabelFont(new Font("gulim", Font.PLAIN, 10));





        

      StandardLegend legend = (StandardLegend) ((JFreeChart) chart).getLegend();

      legend.setItemFont(new Font("dotum", Font.PLAIN, 12));

    }

  };

  pageContext.setAttribute("dataColor", dataColor);

  pageContext.setAttribute("initFlag", "init");

%>