Version 1.0.1
저작권 © 2007-2011 삼성SDS
chart plugin은 OXM(Object XML Mapping)을 기반으로 FusionChart Free(Chart 기능을 제공하는 오픈 소스)용 XML 데이터를 쉽게 생성할 수 있는 기능을 제공하는 Chart Service와 Chart Service 실행에 필요한 참조 라이브러리들, Chart Flash 파일들. 스크립트 (ex. jquery.fusioncharts.js) 등으로 구성되어 있다.
Installation
Command 창에서 다음과 같이 명령어를 입력하여 chart plugin을 설치한다.
mvn anyframe:install -Dname=chart
installed(mvn anyframe:installed) 혹은 jetty:run(mvn clean jetty:run) command를 이용하여 설치 결과를 확인해볼 수 있다.
Dependent Plugins
| Plugin Name | Version Range |
|---|---|
| core | 2.0.0 > * |
FusionChart Free 의 다양한 Chart 를 활용하기 위한 설치 환경 및 편의 기능을 제공한다.
FusionChart Free 는 InfoSoft Global 사에서 만든 오픈소스(MIT/GPL dual license) Flash 기반의 차트 컴포넌트이다.
다양한 차트 유형 제공
미려한 디자인과 함께 다양한 22종류의 차트를 제공하고 있다. 또한 퓨전차트에서 제공하는 다양한 스타일 옵션을 통해 같은 모양의 차트라도 외관상 세세한 부분을 수정할 수 있도록 하여 좀 더 차별화된 차트를 제작할 수 있다.
차트의 종류 : Column, Line, Pie, Bar, Area, Stacked, Cnadlestick. Funnel Chart 등
손쉬운 데이터 연동
XML 기반으로 차트를 생성하므로 특정 언어에 종속되지 않고 개발할 수 있다. PHP, ASP.NET, JSP, ColdFusion, Python, RoR, simple HTML pages 또는 심지어 PowerPoint Presentations 에 활용가능하다.
XML Generator Visual Interface 기존의 xsl 이나 html 테이블 등을 fusionchart xml 형식으로 컨버팅하는 툴 제공
서버의 부담 최소화
플래시 베이스로 개발된 컴포넌트는 용량이 작고 부분적으로 Ajax 를 지원한다.
FusionCharts Free for jQuery
jQuery 플러그인을 제공하여 Ajax 지원을 개선하였으며, 간결하고 일관된 코드로 차트 컴포넌트를 웹 페이지 내에 손쉽게 통합할 수 있다.
비고
FusionChart Free 에 비해 차별화된 부가 기능(ex. image/PDF/CSV/XML 변환 기능, 다양한 시각효과, 다양한 차트 종류 등) 을 제공하는 상용 차트 컴포넌트도 있음.
jQuery 와 FusionChart 를 인티크레이션 하기 위한 jQuery plugin 을 제공한다. 사용 예는 아래와 같다.
<head>
//jquery.fusioncharts.js 파일 include
<script type="text/javascript" src=<emphasis role="bold">"FusionChartsFree/JS/jquery-1.4.2.js"</emphasis>></script>
<script type="text/javascript" src=<emphasis role="bold">"FusionChartsFree/JS/jquery.fusioncharts.js"</emphasis>></script>
</head>
<body>
<div id="myChartContainer">Loading FusionCharts!</div>
<script type="text/javascript">
$('#myChartContainer').insertFusionCharts({
type: "Column3D", width: "400", height: "300",
data: "<graph caption='Annual Sales Summary (2004 - 2007)'" +
"xAxisName='Year' yAxisName='Sales' numberPrefix='$'>" +
"<set name='2004' value='37800' color='AFD8F8' />" +
"<set name='2005' value='21900' color='F6BD0F' />" +
"<set name='2006' value='32900' color='8BBA00' />" +
"<set name='2007' value='39800' color='FF8E46' /></graph>",
dataFormat: "XMLData"
});
</script>
Chart 로 표현하기 위해 변환된 XML 문서는 아래와 같다.
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'> <set name='Jan' value='462' color='AFD8F8' /> <set name='Feb' value='857' color='F6BD0F' /> <set name='Mar' value='671' color='8BBA00' /> <set name='Apr' value='494' color='FF8E46' /> <set name='May' value='761' color='008E8E' /> <set name='Jun' value='960' color='D64646' /> <set name='Jul' value='629' color='8E468E' /> <set name='Aug' value='622' color='588526' /> <set name='Sep' value='376' color='B3AA00' /> <set name='Oct' value='494' color='008ED6' /> <set name='Nov' value='761' color='9D080D' /> <set name='Dec' value='960' color='A186BE' /> </graph>
각 chart 는 아래와 같이 flash 컴포넌트 형태로 페이지 내에 삽입되어 동작한다.
<html>
<head>
<title>My First FusionCharts</title>
</head>
<body bgcolor="#ffffff">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >
<param name="movie" value="../FusionCharts/FCF_Column2D.swf" />
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500">
<param name="quality" value="high" />
<embed src="../FusionCharts/FCF_Column2D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500"
name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
FusionChart jQuery Plugin(jquery.fusioncharts.js) 을 사용하면 위와 같이 직접 웹 페이지에 flash 컴포넌트 요소를 작성하지 않고 간단한 jQuery 자바스크립트 코드를 통해 자동으로 연동이 가능하므로 이 방식을 사용하는 것을 권장한다.
xml data 를 쉽게 만들 수 있도록 OXM 기술을 활용해서 현재 fusionchart free 에서 제공하는 그래프/차트 중 일반적으로 많이 사용하는 5종에 대해 JAXB Model java class 를 제공한다. 현재 Anyframe 에서 제공하는 fusionchart 연동 기능은 일부이나 향후 사용자 요청이 많은 chart 유형(ex. multi series chart)에 대해 추가 보완할 예정이다.
Column 2D - 막대그래프
Column 2D + Line - 막대와 선 그래프
Line 2D - 선그래프
Pie 2D - 원그래프
Stacked Bar 2D - 누적막대그래프
Anyframe 에서는 현재 FusionChart Free 에서 제공하는 모든 속성을 지원하지는 않으므로 필요한 경우 제공되는 JAXB Model class 를 참조하여 확장하거나 재정의하여 활용토록 한다. 참고로 JAXB Model class 들은 FusionChart Free 의 documentation 에서 확인할 수 있는 XML data 샘플 기반으로 Trang 을 실행하여 XSD 스키마를 생성한 후 이를 활용하여 다시 maven-jaxb2-plugin 을 통해 java class 형태로 생성하였으며 일부 잘못 생성된 속성 등을 커스터마이징 하였다.
데이터 처리를 위한 설정
아래는 chart-servlet.xml 파일의 일부다.
<!-- marshallingView 관련 추가 --> <bean id="utilMarshallingView" class="org.springframework.web.servlet.view.xml.MarshallingView"> <property name="marshaller" ref="utilMarshaller" /> </bean> <oxm:jaxb2-marshaller id="utilMarshaller"> <oxm:class-to-be-bound name="org.anyframe.chart.fusionchartfree.support.model.pie2d.Pie2dGraph" /> <oxm:class-to-be-bound name="org.anyframe.chart.fusionchartfree.support.model.stackedbar2d.StackedBar2dGraph" /> </oxm:jaxb2-marshaller>데이터 처리
controller 에서 데이터 처리를 하고 있다.
@RequestMapping("/utilSystem/getMemoryUsageChart.do") public String getMemoryUsageChart(ModelMap map) throws Exception { SigarAccessor.gatherMemoryInfo(); MemoryInfo memoryInfo = SigarAccessor.getSysInfo().getMemoryInfo(); Pie2dGraph pie2d = new Pie2dGraph(); pie2d.setCaption("Memory Usage"); pie2d.setDecimalPrecision(0); 중략... Pie2dSet set1 = new Pie2dSet(); set1.setValue((double) memoryInfo.getMemFree() / 1024.0); set1.setName("Free"); set1.setColor("AFD8F8"); Pie2dSet set2 = new Pie2dSet(); set2.setValue((double) memoryInfo.getMemUsed() / 1024.0); set2.setName("Used"); set2.setColor("F6BD0F"); set2.setIsSliced(1); List sets = new ArrayList(); sets.add(set1); sets.add(set2); pie2d.setSet(sets); map.addAttribute(pie2d); //Jaxb marshalling return "utilMarshallingView"; }화면
다음은 화면의 chart data 를 설정하기 위한 부분이다. 웹 페이지 내에서 jQuery 형식으로 사용했다.
$('#memoryUsageChart').insertFusionCharts({ swfPath: "<c:url value='/chart/javascript/fusionchart-free/charts/'/>", type: "Pie2D", data: "<c:url value='/utilSystem/getMemoryUsageChart.do'/>", dataFormat: "URIData", width: "450", height: "270" });