connext Chart를 사용하는 방법을 정리 해봅니다.

일단 필요한 부분을 적어보도록 하죠

Struts2 프래임웍을 사용하고 있다면 Web app Libraries 에 connext-graphs-0.7.jar 파일을 등록 시켜 줍니다.

이제 WAS를 재가동 시켜주면 connext-graphs 의 기능을 사용할 수 있겠네요.

graph가 필요한 곳에 m tag를 작성해줍니다

<m:graph id="graph" width="700" height="500" align="middle" bgcolor="#FFFFFF" url="/Graph_example01.action" />

/Graph_example01.action?d1=1 tag 상에 &를 인식 못하도록 되어있습니다.

결론적으로 &parameter2=7&param3=key 가 안 되기 때문에 db에서 select 쿼리를 사용할때 where 절에 붙을 parameter를 1개만

작성할 수 있게 되어있습니다.

url로 접속할 수 있는 action 값을 이용하여 Graph에 필요한 data를 얻게 됩니다.

Sample.java
public String example01() throws Exception{ OFCGraphController controller = new OFCGraphController(); controller.getTitle().setText("Example 01"); controller.getTitle().setSize(12); controller.getLabels().setLabels(Arrays.asList(labels)); controller.getYLegend().setText("No. of tasks"); controller.getYLegend().setColor("#8b0000"); controller.getYLegend().setSize(12); controller.getXLegend().setText("Months"); controller.getXLegend().setColor("#8b0000"); controller.getXLegend().setSize(12); controller.getColor().getBgColor().setColor("#FFFFFF"); controller.getColor().getXAxisColor().setColor("#e3e3e3"); controller.getColor().getYAxisColor().setColor("#e3e3e3"); controller.getColor().getXGridColor().setColor("#e3e3e3"); controller.getColor().getYGridColor().setColor("#e3e3e3"); DefaultOFCGraphDataModel model = new DefaultOFCGraphDataModel(); model.setData(Arrays.asList(data01)); model.setFormat(new DecimalFormat("###0.000")); model.setSeriesType(new OFCLineHollowSeriesType(3, "#8b0000", "Test", 10, 6)); controller.add(model); model = new DefaultOFCGraphDataModel(); model.setData(Arrays.asList(data02)); model.setFormat(new DecimalFormat("###0.000")); model.setSeriesType(new OFCLineDotSeriesType(1, "#8b0000", "Test 2", 10, 6)); controller.add(model); model = new DefaultOFCGraphDataModel(); model.setData(Arrays.asList(data03)); model.setFormat(new DecimalFormat("###0.000")); model.setSeriesType(new OFCLineSeriesType(2, "#8b0000", "Example", 4)); controller.add(model); model = new DefaultOFCGraphDataModel(); model.setData(Arrays.asList(data04)); model.setFormat(new DecimalFormat("###0.000")); model.setSeriesType(new OFCFilledBarSeriesType(50, "#8b0000", "#8b0000" , "Filled Bar")); controller.add(model); value = controller.render(); return "success"; } private static String labels[] = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan" };

OFCGraphController 를 생성했습니다.

Bar Chart나 line chart를 만들 때는 OFCGraphController를 생성해서 만들어 줍니다.

Pie Chart를 사용할때는 OFCPieController를 생성해서 만들어 주고요.

controller.getTitle().setText("Example 01"); controller.getTitle().setSize(12); controller.getLabels().setLabels(Arrays.asList(labels)); controller.getYLegend().setText("No. of tasks"); controller.getYLegend().setColor("#8b0000"); controller.getYLegend().setSize(12); controller.getXLegend().setText("Months"); controller.getXLegend().setColor("#8b0000"); controller.getXLegend().setSize(12); controller.getColor().getBgColor().setColor("#FFFFFF"); controller.getColor().getXAxisColor().setColor("#e3e3e3"); controller.getColor().getYAxisColor().setColor("#e3e3e3"); controller.getColor().getXGridColor().setColor("#e3e3e3"); controller.getColor().getYGridColor().setColor("#e3e3e3");

이상의 코드는 아래와 같이 차트가 그려질 바탕을 만들어 주는 부분입니다.

그 다음으로는 Graph가 그려지는 부분입니다.

DefaultOFCGraphDataModel model = new DefaultOFCGraphDataModel(); model.setData(Arrays.asList(data01)); model.setFormat(new DecimalFormat("###0.000")); model.setSeriesType(new OFCLineHollowSeriesType(3, "#8b0000", "Test", 10, 6));

DefaultOFCGraphDataModel , DefaultOFCPieDataModel 의 DataModel 중 Graph의 모델을 사용했습니다.

model.setFormat(new DecimalFormat("###0.000"));

NumberFormat지정은 필수는 아닙니다.

Data로 처리할 수 있는 타입은 Number 와 String입니다.

Model 의 SeriesType 에는

Line Type인

OFCLineAreaSeriesType
OFCLineDotSeriesType
OFCLineHollowSeriesType
OFCLineSeriesType

Bar Type인

OFCBar3DSeriesType
OFCBarSeriesType
OFCBarSketchSeriesType
OFCFilledBarSeriesType

을 지정 할 수 있습니다.
controller.add(model);
controller 에는 여러개의 Model 을 적용할 수 있습니다.

controller 에 저장된 정보를 이용하기 때문에 Model로 만들었어도 add시키지 않으면 화면에 그래프가 나오지 않습니다.

Controller에 Model이 적용되면



마무리로...

value = controller.render();
Graph의 형태 정보를 담은 controller에서 render() 메소드를 실행시킨 값을 value에 넣으면 Action에서의 작업은 마무리 되겠습니다.
private String value; public String getValue() { return value; }
이 Action이 SUCCESS가 되면

src 바로 밑에 설정파일인 struts.xml파일의
<package name="root" namespace="/" extends="struts-default"> <action name="Home"> <result>/index.jsp</result> </action> <action name="Graph_*" method="{1}" class="action.Sample"> <result>/graph.jsp</result> </action> </package>
package:action 의 Class:Sample 를 실행시키면 보여주는 page는 graph.jsp 파일이라고 지정되어있습니다.

graph.jsp
<%@ taglib prefix="s" uri="/struts-tags" %> <%@ taglib prefix="m" uri="/connext" %> <%@ page session="false"%> <% response.setHeader("Cache-Control","no-cache"); //HTTP 1.1 response.setHeader("Pragma","no-cache"); //HTTP 1.0 response.setDateHeader ("Expires", 0); //prevents caching at the proxy server %> <s:property value="value" escape="false" />
value 값을 그냥 써버리는거죠 그럼 아까 보신 <m:graph 의 url 속성에 필요한 데이터가 됩니다.

page (<m:graph /> tag 작성) -> url 부분의 Action (/Graph_example01.action) 에서 data를 만든다

-> result: graph.jsp 를 이용하여 value값을 리턴 시키면 완성입니다.

한빛 교육센터에서 국비지원으로 한다는데 =_=;;

원래 가려고 했던 장소가 아니여서.. 약간 상황이 이상해 지기도 했지만...

나의 빠른 대처로.. 길을 찾을 수 있었다. ㅎㅎㅎ (길찾기의 달인 네비 윤원 선생님)

ㅎㅎㅎ

오늘부터 5일인데... 결혼식 돌잔치들 ... 한개도 못 가는거 아냐? ㅠ_ㅠ 흑흑

이 책 또 받았다.. 뜨허....

그럼 열심히 해볼까~!

:오늘부터.. 적어두 배워놓은거는 블로그에 정리할수 있도록 하쟛!