drawing LineGraph using Javascript

개인적으로 쓸 금전출납부 웹애플을 만들다가 가시성을 높이기 위해서 차트를 삽입해야할 필요성을 느끼고 관련 라이브러리를 찾아본 결과 대략 세가지 방법을 찾을 수 있었음.

1. JFreechart API

서버쪽에서 그래프를 png 이미지로 생성한 후 클라이언트에 이미지 url을 전송해서 브라우저가 출력하게 함.

*장점 - freechart API가 직관적이고 자바 언어를 이용하므로 적용하기 쉽다.

*단점 - UI를 개선하기가 곤란하다. 내부적으로 java 2D를 이용해서 차트를 그리고 있어서 그래프의 색깔이나 선, 배경 색깔 등 간단한 것 이외에 뭔가 비쥬얼적인 부분을 개선하려면 제약이 많다. 일례로 그래프 배경에 y축 값에 따라서 차별적으로 배경색을 지정하려면 ui 자체를 뜯어고쳐야한다.

또한 정적인 이미지만 생성 가능하므로 브라우저에서 사용자의 액션(그래프의 특정 지점 클릭시 메세지 출력 등..)을 설정하기가 곤란하다. 탄력성이 매우 낮음.

2.  Flex

다음 웹인사이드에서 사용하는 FusionChart 를 보고 적용을 고려해봄. 브라우저 상에서 사용자 액션에 반응이 가능. 이게 Flex를 기반으로 만들어진 제품인가? -_-a 비쥬얼 측면에서는 가장 뛰어나나 플래쉬 스크립트를 따로 배워야 한다는 점 때문에 후순위로 보류.

3. Javascript Chart API

w3c에서 표준으로 제공하는 Graphic 이나 차트 관련 표준은 없는 듯. 해서 구글에서 대강 검색을 해보니 이미 몇년전부터 나와같은 고민을 한 선각자들이 만들어둔 다양한 차트 라이브러리가 많이 존재한다.

하지만 그대로 갖다 쓰기는 뭔가 부족해보인다.

그런데 검색 중에 자바의 Java2D와 같은 그래픽 라이브러리를 제공하는 사이트를 찾았다.

DHTML, JavaScript Draw Line, Circle, Ellipse (Oval), Polyline, Polygon, Rectangle.
High Performance JavaScript Vector Graphics Library. Developed by Walter Zorn
drawLine이나 fillOval 과 같은 메소드를 제공하는데 사실 차트를 그릴때 가장 문제가 바로 선, Line을 효율적으로 그려주는 것. Bar Chart 같은 경우는 image를 이용해서 대체할 수 있으나 LineChart 는 일일이 각 구간을 그리기 위해서 DIV element를 효율적으로 배치해야한다.

위에서 제공하는 라이브러리 덕분에 큰 짐을 덜게되어 가벼운 마음으로 우선 간단한 LineChart 를 구현해 봄.

캡쳐화면

각 지점에 마우스를 올리면 값을 보여주는 창이 뜬다.

설정 코드 예제.

var model = new GraphModel();
var aData = new Array();
aData[aData.length] = new GraphData(12000);
aData[aData.length] = new GraphData(8000);
aData[aData.length] = new GraphData(17000);
aData[aData.length] = new GraphData(2000);
aData[aData.length] = new GraphData(5000);
aData[aData.length] = new GraphData(2500);
aData[aData.length] = new GraphData(10500);
aData[aData.length] = new GraphData(3700);
aData[aData.length] = new GraphData(3000);
aData[aData.length] = new GraphData(2900);
aData[aData.length] = new GraphData(13500);
aData[aData.length] = new GraphData(13900);
aData[aData.length] = new GraphData(32000);

model.setData(aData); // 보여질 데이터를 설정...

var ui = new LineGraphUI("canvas0"); // 실제로 그래프를 그리는 클래스
ui.setPadding(10,10);
ui.setStroke(2);
ui.setBarVisible(true);

var graph1 = new Graph(model, ui1);
graph1.repaint(); // 그래프를 그린다.

차트를 페이지의 왼쪽 메뉴 부분에 조그맣게 넣을 목적으로 만들어서 X, Y축의 설명값들을 입력하고 그려주는 기능은 없는 상태. 만일 한달치 데이터를 300 x 200 창에 모두 보여줄 경우 날짜를 출력하는건 별 의미가 없어보인다. 대강의 개요만 파악하는데에는 이정도 구현이면 충분할 듯.

가변폭일때 창의 크기에 맞춰서 동적으로 차트가 변하도록 구현해봤으나 성능에 문제가 좀 있어보임. 게다가 IE6 에서 window.onresize 에 이벤트 리스너를 걸어놓으면 이벤트 발생 시 먹통이 된다. -_-;; FF에서는 안그런데 왜 이러는거지? 일단 주석으로 막아서 가변폭 차트 기능은 꺼뒀는데 해결책을 찾아야 할 듯..

graph_test.zip