무작정 Google에서 "google chart" 로 검색하면 아래와 같은 페이지를 찾을 수 있다.
가장 대중적인 LineChart를 한 번 그려보기로 했다.
API reference 따위는 살펴보지 않고 hello world만 해보면 다 알 수 있다는 자만감에 그냥 sample을 보기로 하였다.
아주 simple한 chart다.
<html> |
코드 또한 간단하다.
- Google chart를 사용하기 위해 js 설정이 필요하다.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
- google chart를 load
google.load("visualization", "1", {packages:["corechart"]});
- callback 정의
google.setOnLoadCallback(drawChart);
-
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);
- Data
기본적인 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 |
---|