태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

* 본 라이브러리는 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 라이브러리를 이용





 

저작자 표시 비영리 동일 조건 변경 허락
신고

이 글을 공유하세요.

  • 초보프로그래머 2013.04.12 00:47 신고  댓글주소  수정/삭제  댓글쓰기

    궁금한게 있는데 제가 이걸 사용해서 임의로 실시간 데이터를 받아서 그래프로 보여주고 싶은데 실시간 데이터가 계속 사라지는데 계속데이터를 축적해서 분석하고 싶은데 조언좀해주실수 있나요?

    • Unikys 2013.04.12 09:16 신고  댓글주소  수정/삭제

      일단 간단한 조언을 드리면, 위의 그래프같은 경우는 데이터 수집용보다는 데이터가 있는 웹서버에 AJAX로 데이터를 요청해서 추가하는 경우에 쉽게 짤 수 있는 라이브러리입니다. 입력 자체가 웹페이지상에서 나오는 것이 아니라면 위의 자바스크립트가 아니라 웹서버에서 데이터를 관리하는 것이 용이할 것입니다. 쉽게 말하자면 위의 라이브러리는 데이터 저장/수집하는 용도보다는 보여주기 용인거지요.

      하지만 만약 사용자의 입력이 그래프를 보여주는 페이지에서 일어난다면, 어디에다가 어떻게 저장하실지 알려주시면 기능 추가하겠습니다. 어떻게 구현하실지 생각하시기 전에 간단하게 다음과 같은 요구사항을 생각해보시는 것을 추천합니다.

      0. 입력이 어디에서 들어오는가?
      - 그래프를 보여주는 페이지
      - 다른 웹페이지
      - 전혀 다른 인터페이스(모바일 등 DB로)

      * 여기서 그래프를 보여주는 페이지가 아니라면 위의 라이브러리와 별도로 인터페이스를 만드시는걸 권합니다. 그래프를 보여주는 페이지에서 입력을 받는다면 제가 API를 추가하도록 하겠습니다(하지만 이러한 경우는 거의 없을 것이라 예상합니다. 같은 페이지라 하여도 그래프와는 별도로 AJAX로 서버에 직접 저장하고 그래프는 그래프대로 서버에 요청을 하는 것을 권하지, 위의 라이브러리를 수정해서 저장하는 것은 별로 추천하지 않습니다. 기능별로 모듈화를 시키는거죠. 보여주는 부분따로, 저장/수집/데이터처리하는 부분 따로..)

      1. 어디에 저장하는가? (자바스크립트 변수, 웹서버)
      - 자바스크립트 변수라면 옵션 추가해서 변수 하나에 계속 쌓이도록 수정하겠습니다.
      - 웹서버로 보내서 저장하는 경우에는 직접 웹언어쪽을 별도로 구현하셔야하고요, 제가 라이브러리에 데이터가 쌓이면 AJAX 콜하는 인터페이스를 추가할 수 있습니다.

      ---------------
      일단 말씀하신 기능을 넣는것 자체는 나쁘지 않을 것 같아서 조금 다른 방향이 될지도 모르지만 일단 조만간 작업을 하도록 하겠습니다.

  • 초보프로그래머 2013.04.12 00:47 신고  댓글주소  수정/삭제  댓글쓰기

    궁금한게 있는데 제가 이걸 사용해서 임의로 실시간 데이터를 받아서 그래프로 보여주고 싶은데 실시간 데이터가 계속 사라지는데 계속데이터를 축적해서 분석하고 싶은데 조언좀해주실수 있나요?

  • 궁금해요 2013.07.18 13:58 신고  댓글주소  수정/삭제  댓글쓰기

    데이터 값이 얼만지 확인이 안되는데 라벨이나 눈금 같은건 지원이 안되나요?

  • 초보자 2016.12.07 19:25 신고  댓글주소  수정/삭제  댓글쓰기

    궁금한게 있습니다. 어떻게 예제코드 구현하는지 궁금합니다.
    실시간으로 데이터를 받아서 그래프를 나타내는걸 하고 싶은데요..

    • Unikys 2016.12.10 02:45 신고  댓글주소  수정/삭제

      옛날에 작성하고 멈춘상태라 오래되어서 기억은 잘 안 나는데, https://code.google.com/archive/p/vanilla-javascript-library/ 에 대략적인 사용방법 적어놨습니다. 실시간으로 업데이트하려면 XMLHttpRequest를 사용해서 appendData 함수를 호출하면 될 것 같습니다.

질문이나 의견을 댓글로 달아 주세요

티스토리 툴바