값(수치)을 차트(그래프)로 표시하기

이거는... 

그냥 개발 하다가 유용한 팁(?) 정도라서 포스팅을 할까 말까 고민하다가 일단 적어본다.

그냥 나중에 나 혼자라도 살펴 볼 경우가 있을 지 모르니까..

예를 들어 일별로 표시 되는 수치에 그래프를 다음과 같이 표시 해야 할 경우

대체 2015-12-02 는 뭐를 기준으로 해서 그래프가 꽉 찼고 나머지 일자는 대체 뭐를 기준으로 저렇게 표시가 됐단 말인가?

정답은 최대 값이다.

검색 기준일이 2015-12-01 부터 2015-12-20 이다.

그러면 이 날중에 가장 최대 값을 구하는것이다. 보시다 시피 2015-12-02 날짜의 수치가 22로써 제일 크다.

이렇게 맥스(max) 값을 구해놓고 퍼센트를 구하면 된다.

현재 값 / 최대 값 * 100

해당 퍼센트 값을 1px 짜리 그래프 이미지에다가 적용 하면 된다.

JSTL 예를 들자면

<c:set var="graphWidth" value="${userCnt / maxCnt * 100}" />

<img width="${graphWidth}%" height="10" src="/images/graph.gif"/>

또 하나 다음과 같은 예를 들어보겠다.

해당 일자 기준으로 일반 회원수 / 학생 회원수 이렇게 기준을 나누어야 된다고 쳐보자.

이것 또한 마찬가지로 최대값 을 구해놓고 현재 값으로 나눈다음 곱하면 된다.

단 중요한 점은 위와 같이 전체 값 중 최대값이 아니라 그 해당 레코드의 최대값(합) 을 구해야 한다.

<c:set var="normal" value="${normalCnt / maxCnt  * 100 }" />

<c:set var="student" value="${studentCnt / maxCnt  * 100 }" />

<img width="${normal }%" height="10" src="/images/graph1.gif"/><img width="${student }%" height="10" src="/images/graph2.gif"/>