[jQuery jqPlot] 화면에 그래프(차트)를 출력해보자

통계화면에 자주쓰이는 jqPlot 플러그인을 사용하여 그래프를 출력하고자 한다.

우선은 플러그인을 다운받도록 하자

jqPlot 사이트

http://www.jqplot.com/

다운로드 url

https://bitbucket.org/cleonello/jqplot/downloads/

jqPlot 데모사이트

http://www.jqplot.com/tests/

jqPlot 문서

http://www.jqplot.com/docs/files/usage-txt.html

지원하는 그래프들은 다양하므로 데모사이트에서 응용을 해서 쓰길바라며, 이번 글에서는 

막대그래프를 기준으로  화면에 그래프를 생성해보도록 하겠다.

1. jqPlot 다운로드를 받아보자

   현재기준으로 최신버전인 jquery.jqplot.1.0.8r1250.zip 파일을 다운받아 압축해제!

2. 해당 선택된 파일들을 프로젝트에 넣어서 작업을 진행하자

물론 본인이 넣으려고 하는것이 전부는 아니다. 압축푼 모든 파일들을 넣어도 무관하겠다.

그리고 배포시, 라이센스 txt 파일도 첨부해줘야 하는걸로 아는데...  

라이센스쪽에는 아는 지식이 얇아서 정확히는 모르겠음

우선 작업 프로젝트내에 해당 파일들을 include해줬다면 준비는 끝!!

*참고로 본인은 jqplot라는 폴더를 만들어서 해당 파일들을 넣어줬음.

jQuery기반의 막대그래프 생성 지원을 해주는 플러그인들을 include했다.

다음은 스크립트 부분이다.

$(function(){
         // [x좌표에 표출될 문자, y좌표와 그래프의 높이를 정해주는 값]
	 var line1 = [
	              	['x좌표1', 7], 
	              	['x좌표2', 9], 
	              	['x좌표3', 15], 
	 				['x좌표4', 12]
	             ];
	 //그래프플러그인 호출
        //'chart1' -> 해당 그래프를 삽입할 태그ID
        //2번째 그래프에 들어갈 값들
	 $.jqplot('chart1', [line1], {
           //그래프 상단에 제목
	    title: '그래프 예제',
	    series:[
	            {
	            	renderer:$.jqplot.BarRenderer
	            }
	           ],
	    axesDefaults: {
	        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
	        tickOptions: {
	          /*옵션들은 document페이지를 참고*/
	          fontSize: '10pt'
	        }
	    },
	    axes: {
	      xaxis: {
	        renderer: $.jqplot.CategoryAxisRenderer
	      }
	    }
	});
});

마지막으로 id값이 chart1이란놈으로 div태그를 생성해보자

실행을 해보게 되면 다음 화면과 같이 나오면 그래프는 마무리...

스크립트 주석에도 적어드렸듯이 막대그래프외에도 다양한 그래프 종류들이 존재하며 옵션들 또한 다양한다.

출력하려는 그래프종류에 맞춰서 옵션들을 적절히 써가며 사용한다면 훌륭한 화면을 낼 수 있을것이다..

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!