[VJLib] VJGraph 자바스크립트/HTML5(canvas)로 그래프 그리는 라이브러리

* 본 라이브러리는 MIT License를 사용하고 있습니다.

* VJGraph ver 0.1 

: 자바스크립트와 HTML5 <canvas> 태그를 이용하여 웹페이지 상에서 그래프를 그릴 수 있도록 도와주는 라이브러리를 구현해봤습니다. 현재는 그래프 그리는 기능, 실시간으로 데이터를 추가해서 그래프를 그리는 기능까지만 구현되어있습니다.

 

* 현재 계속 업데이트 중이고, code.google.com에 있는 js파일을 직접 연결하면 추가 기능 개발 중에 변경되어 충돌이 일어날 수 있으므로 다운 받아서 사용하시고, 차후 stable 버전이 나오면 minification과 gzip을 적용할 예정입니다.
* 건의 사항/오류 사항/버그 신고를 이 게시물 댓글이나 unikys at gmail.com으로 보내주시기 바랍니다.
 

* 라이브러리 메뉴얼

https://code.google.com/p/vanilla-javascript-library/

 

* 라이브러리 다운로드

http://code.google.com/p/vanilla-javascript-library/downloads/list

 

* 예제 소스

<div id="graphWrapper" style="background-color:white;border:solid black 1px;"></div>
<div id="graphWrapper2" style="border:solid black 1px;background-color:white;"></div>
<div id="graphWrapper3" style="border:solid black 1px;background-color:white;"></div>

<script src="http://vanilla-javascript-library.googlecode.com/svn/trunk/VJGraph/VJGraph.js"></script>
<script>
        VJ.graph("graphWrapper", 
                [100, 200, 300, 400], 
                {
                        max:500, 
                        width:300, 
                        height:150, 
                        dataLength: 100
                });

        VJ.graph("graphWrapper2", 
                [
                        [100, 200, 300, 400], 
                        [300, 400, 200, 100]
                ], 
                {
                        max:500, 
                        width:300, 
                        height:150, 
                        dataLength:20
                });

        VJ.graph("graphWrapper3", 
                [[100, 300, 200, 310, 30, 400, 200, 300, 400]], 
                {
                        max:500, 
                        width:200, 
                        height:100,
                        dataLength: 8
                });

        setInterval(function () {  //Append data dynamically
                VJ.graph("graphWrapper").appendData([Math.random() * 400]);
                VJ.graph("graphWrapper2").appendData([Math.random() * 400, Math.random() * 400]);
        }, 100);
</script>

* 실행 예

* 테스트 브라우져

: IE9

: Chrome 24

: Firefox 18

: Safari 5.1.7

: ICS Android Browser 

: iOS5, iOS6 Safari

* 업데이트 내용

- 2013-02-20. Ver 0.1

: 꺽은선 그래프 그리기 기능

: 실시간으로 데이터를 추가하여 그래프를 그리는 기능

: < IE10 인 경우 excanvas.js 라이브러리를 이용