티스토리 뷰

Programing/Web Chart

Google Chart 사용기

Tomining 2015. 3. 5. 18:55
Web에서 UI 차트를 그려야해서 Google chart를 사용하게 되었다.
무작정 Google에서 "google chart" 로 검색하면 아래와 같은 페이지를 찾을 수 있다.


가장 대중적인 LineChart를 한 번 그려보기로 했다.
API reference 따위는 살펴보지 않고 hello world만 해보면 다 알 수 있다는 자만감에 그냥 sample을 보기로 하였다.


아주 simple한 chart다. 
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

코드 또한 간단하다.
  1. Google chart를 사용하기 위해 js 설정이 필요하다.
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  2. google chart를 load
    google.load("visualization", "1", {packages:["corechart"]});
  3. callback 정의
    google.setOnLoadCallback(drawChart);
  4. Draw() 구현
    • Data
      데이터 방식은 기본적으로 Array 형식이다. 아래처럼 DataTable을 이용할 수도 있지만 DataView라는 것도 있다.
      var data = google.visualization.arrayToDataTable([
                      ['Year', 'Sales', 'Expenses'],
                      ['2004',  1000,      400],
                      ['2005',  1170,      460],
                      ['2006',  660,       1120],
                      ['2007',  1030,      540]
                    ]);
    • option
      https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart
      위 URL을 참조하면 수많은 옵션들을 설정할 수 있다.
      기본적으로 title이나 x,y 축 항목 정의 또는 legend(지표항목) 설정도 가능하다.
      var options = {
                title      : 'Company Performance'
                    };
    • chart div
      div element를 parameter로 전달한다. 해당 코드를 jquery객체를 전달하도록 변경해보았으나 동작하지 않았다. 꼭 javascript 자체로 dom객체를 넘겨야 하는 듯 하다.
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    • <body>
              <div id="chart_div" style="width: 900px; height: 500px;"></div>
      </body>
    • draw()
      data 와 option 정보가 필요하다.
      chart.draw(data, options);

기본적인 LineChart는 위 sample과 같이 꺽은선 그래프이다. 하지만 때에 따라 곡선 그래프도 필요로 할 수 있다.
이 경우 option에 한 줄만 추가해 주면 가능하다.
var options = {
    title: 'Company Performance',
    curveType: 'function'
};
curveType이라는 옵션을 추가해 주면 되는데, 기본값은 "none"이다.(꺽은선 그래프), 이를 function으로 설정하면 곡선그래프로 그려진다.


이 외에도 많은 그래프 타입이 있다.
그 중에 대중적인 막대그래프도 간단하게 구현이 가능하다. 위 sample에서 Chart 종류만 변경해주면 바로 구현이 가능하다.

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart 객체를 생성할 때 ColumnChart로 변경해 주면 된다.
위 샘플의 코드를 보면 option에 hAxis라는 속성이 있는데, 이는 위 샘플 그램에서 Year 항목이 붉게 표현하기 위한 옵션이다.
var options = {
  title: 'Company Performance',
  hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};

[느낀점]
전체적으로 간편하게 web chart를 그릴 수 있다.
하지만 data형식이 array로만 적용이 되는게 요즘 대세인 json을 사용할 수 없어 불편함이 있었다.
(아직 시작하는 단계라 json data format을 사용할 수 있는데, 내가 모르고 있는 것인지도 모르겠다.)


저작자표시 비영리

'Programing > Web Chart' 카테고리의 다른 글

Google Chart로 Column항목 dynamic하게 control하기  (0) 2015.03.05
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함