반응형
이번엔 Smoothie chart를 이용해 보겠습니다.
코드설명은 앞의 구글차트와 비슷합니다.
Smoothie chart는 실시간 데이터를 보여주는데 좋습니다.
일단 here!!를 방문해 보세요.
여기서 라이브러리를 가져와야 합니다.
링크를 들어가보면 위의 페이지가 나오는데 빨간색 박스로 된 버튼을 눌러주면 코드가 나옵니다.
코드를 모두 복사하세요!!
그리고 이클립스로 돌아와서 프로젝트 밑에 project/assets/www/smoothie.js 라는 파일을 만들어 복사해 넣으세요.
그리고 index2.html 파일을 만들어 아래와 같은 코드를 넣습니다.
HTML code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html> <head> <script type="text/javascript" src="smoothie.js"></script> <script type="text/javascript"> var arr; var line = new TimeSeries(); function setMessage(msg){ arr=1; filter=msg.split('|'); arr*=filter[1]; document.getElementById("title").innerHTML=filter[0]; //input name } function createTimeline(msg) { var chart = new SmoothieChart({ millisPerPixel:50, grid:{fillStyle:'#ffffff'}, labels:{fillStyle:'#000000',precision:1}, timestampFormatter:SmoothieChart.timeFormatter }); // Add a random value to each line every second setInterval(function() { line.append(new Date().getTime(), arr); //input data }, 1000); // Add to SmoothieChart chart.addTimeSeries(line,{ strokeStyle:'rgb(0, 255, 0)', lineWidth:3, fillStyle:'rgba(0,0,0,0.30)'});//config line chart.streamTo(document.getElementById("chart"), 1000); //draw } </script> </head> <body onload="createTimeline()"> <p>Show Chart!!</p> <p id="title"></p> <canvas id="chart" width="500" height="200"></canvas> </body> </html> | cs |
구글차트에 비해서 많이 간단해 졌습니다.
일단 시간도 차트에서 모두 처리해 줍니다.
앞의 포스트와 같이 setMessage 함수에서 android의 string 메세지를 받아 처리합니다.
JAVA code
1 2 3 4 5 6 7 8 | private void init() { String url = "file:///android_asset/www/index2.html"; //smoothie chart String sendChart="volt|222.1"; //data chart=(WebView)findViewById(R.id.chart); chart.getSettings().setJavaScriptEnabled(true); chart.loadUrl(url); chart.loadUrl("javascript:setMessage('" + sendChart + "')"); } | cs |
JAVA코드도 data부분에 보시면 아주 간단해 진걸 보실 수 있습니다.
타이머를 돌려서 그때 그때 값을 넣어주시기만 하면 아래와 같은 실시간 차트를 보실 수 있습니다.
반응형
'Study > Android' 카테고리의 다른 글
| android fragment (fragment transaction) (0) | 2015.02.11 |
|---|---|
| Nio udp Client (비동기 UDP Client) (0) | 2015.02.11 |
| google chart(구글 차트)를 이용한 그래프 (0) | 2015.02.11 |
| 현재 연결된 네트웍의 MAC Address(맥주소)가져오기 (0) | 2015.02.11 |
| 폰과 태블릿 구분하기 (0) | 2015.02.11 |
