woong's

Android Google Chart 사용하기 본문

Develop/Android

Android Google Chart 사용하기

dlsdnd345 2016. 2. 13. 23:27
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Android Google Chart 사용하기


Android 관련 차트를 찾다 그나마 UI 이쁜 차트가 구글 차트 인거 같아 사용해보았습니다.

종류도 다양하게 제공해주어 Google Chart 로 왠만한 차트는 커버가 가능한것 같습니다.


Area Charts

Bar Charts

Bubble Charts

Candlestick Charts

Column Charts

Combo Charts

Gauge Charts

Geo Charts

Line Charts

Pie Charts

Scatter Charts

Stepped Area Charts

Table Charts

Timelines

Tree Map Charts

Trendlines


종류가 다양합니다.


1. 구글 차트 준비


https://developers.google.com/chart/?hl=ko-KR

 

해당 url로 접근하여 차트를 하나 선택합니다.

 



Get Started 를 눌러서 다음화면으로 이동합니다.

저는 Pie Charts 를 선택하였습니다 .


화면에는 이와 같이 html 코드가 나타납니다 .

이 html 코드는 파일로 저장합니다.


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
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
 
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
 
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
 
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
 
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);
 
        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
 
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
 
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>



저장후에 android project assets 폴더에 파일을 저장합니다 .




이제 웹뷰를 통해서 해당 파일을 사용합니다.


저는 프래그먼트에서 사용하여서 onCreateView 이지만 여러분은 액티비티사용하실때처럼 사용하시면됩니다.




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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
public class MainActivity extends Activity {
 
    public static final String ASSET_PATH = "file:///android_asset/";
 
    ProgressBar progressBar;
    private WebView webView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        webView = (WebView) findViewById(R.id.category_web_view);
 
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setBuiltInZoomControls(true);
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webView.setWebViewClient(new WebViewClient() {
 
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                loadChart();
                return true;
            };
 
            @Override
            public void onPageStarted(WebView view, String url, android.graphics.Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                progressBar.setVisibility(View.VISIBLE);
            };
 
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                progressBar.setVisibility(View.INVISIBLE);
            };
        });
        webView.loadUrl("http://");
    }
 
    private void loadChart() {
 
        String content = null;
        try {
            AssetManager assetManager = getAssets();
            InputStream in = assetManager.open("category.html");
            byte[] bytes = readFully(in);
            content = new String(bytes, "UTF-8");
        } catch (IOException e) {
        }
 
        String formattedContent = String.format(content);
        webView.loadDataWithBaseURL(ASSET_PATH, formattedContent, "text/html", "utf-8", null);
        webView.requestFocusFromTouch();
    }
 
    private static byte[] readFully(InputStream in) throws IOException {
        ByteArrayOutputStream out = new ByteArrayOutputStream();
        byte[] buffer = new byte[1024];
        for (int count; (count = in.read(buffer)) != -1;) {
            out.write(buffer, 0, count);
        }
        return out.toByteArray();
    }
}


onCreateView 안에 코드는 웹뷰를 생성하고 설정하는 일반 코드입니다 .

차트관련해서 보실코드는 loadChart 를 보시면 됩니다.


1
2
3
4
5
6
7
8
        String content = null;
        try {
            AssetManager assetManager = getActivity().getAssets();
            InputStream in = assetManager.open("category.html");
            byte[] bytes = readFully(in);
            content = new String(bytes, "UTF-8");
        } catch (IOException e) {
        }


이부분이 assets 안의 html 작성한 문서를 읽어 오는 부분이 되겠습니다 .


1
2
3
        String formattedContent = String.format(content,newBook,buyBook,ingBook,endBook);
        webView.loadDataWithBaseURL(ASSET_PATH, formattedContent, "text/html", "utf-8", null);
        webView.requestFocusFromTouch();


이부분이 핵심 부분입니다 . 

불러온 파일과 , html 로 데이터를 보내는 코드입니다. 


 String formattedContent = String.format(content,newBook,buyBook,ingBook,endBook);

 

content : 불러온 파일 

나머지는 보낼 데이터 입니다 .


이렇게 보낸 데이터는 %d 를 통해서 차례차례 받을수 있습니다 .


위의 차트 코드입니다 . 


1
2
3
4
5
6
7
data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);


이부분 숫자에 %d 를 넣으면 자바코드에서 보내온 데이터가 들어가 통계 그래프가 나타나는것을 확인할수 있습니다


저작자표시

'Develop > Android' 카테고리의 다른 글

Android Glide 사용하기  (0) 2016.02.13
Android UrQA 버그 리포트 서비스 사용하기  (0) 2016.02.13
Google Drive 사용하기(3) 다운로드  (0) 2016.02.13
Google Drive 사용하기(2) 업로드  (1) 2016.02.13
Google Drive 사용하기(1)  (0) 2016.02.13
공유하기 링크
'Develop/Android' Related Articles more
Comments