google chart(구글 차트)를 이용한 그래프

 

안드로이드에서 차트(그래프)를 그리는 방법에는 크게 2가지 정도가 있습니다.

J free chart와 같은 라이브러리로 그리는 방법과 웹뷰를 이용하는 방법이 있습니다.

간단하게 Google Chart(구글차트)라는 것이 있습니다.

웹뷰만 있으면 웹에서 라이브러리를 가져와 쉽게 그려줍니다.

 

일단 구글 차트를 그리기 위해  this page 로 가셔서 차트를 골라보세요.

 

 

많은 그래프들이 있습니다^^

 

 

일단 Line Chart를 선택했는데요.

 

클릭해보니 HTML소스와 API를 제공합니다.

 

일단 제 코드를 보시죠~

 

HTML 코드입니다.

     function setMessage(msg){
         
          arr=msg;
          google.setOnLoadCallback(drawChart);
      }
     
      function drawChart() {
         
          filt=arr.split("|");  //filtering
          filt2=filt[0].split(","); //filtering
         
          title[0][0]=filt2[0]; //x
          title[0][1]=filt2[1]; //title
         
          data=filt[1].split("/");//data filter
         
          arrRange = data[0].split(",").length;
     
     
         for(i=0;i<data.length;i++){
            tempdata=data[i].split(",");
            chartdata[i][0]=tempdata[0];
            chartdata[i][1]*=tempdata[1];
            }
         
        showchart=title.concat(chartdata);
         
        var data = google.visualization.arrayToDataTable(showchart);
        var options = {
          curveType: 'function',
         
          title: showchart[0][1]
         
       
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
       
      }
 

function setMessage(msg) 는 android에서 보내는 명령을 받는 부분입니다.

 

이 곳에서 String을 받아서 drawChart()로 전달해 줍니다.

그리고 drawChart()는 차트를 그려줍니다.

 

그리고 차트를 그리기 위한 데이터(String)를 받기위해서는 아래와 같은 JAVA 코드가 필요합니다.

JAVA 코드

 
 private void init() {
        String url = "file:///android_asset/www/index.html";
        //google chart
                   String sendChart="volt|10:01:00,222.1,10:01:01,223.0,10:01:02,222.8,10:01:03,222.2;  //data
 
        chart=(WebView)findViewById(R.id.chart);
        chart.getSettings().setJavaScriptEnabled(true);
        chart.loadUrl(url);
        chart.loadUrl("javascript:setMessage('" + sendChart + "')");
 }

여기서 chart는 webview를 나타냅니다.

 

그리고 'chart.loadUrl("javascript:setMessage('" + sendChart + "')");' 이 부분이 javascript로 string을 보냅니다.

실행해 보면 아래와 같은 구글차트가 보입니다.

 

심플하면서도 같단하죠?^^