GoogleChart

시작하기

GoogleChart 라이브러리 불러오기

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

불러올 차트 타입 정하기

google.charts.load('current', {packages: ['corechart']});

• 'current'를 통해 가장 최근 버전의 Google chart를 불러올 수 있다. 새로 나올 다음 버전을 불러오고 싶다면 'upcoming'을 입력하면 된다.
• 'corechart': 원형 그래프를 불러온다. 입력하기에 따라 다른 얼마든지 많은 형태의 그래프를 불러올 수 있다.

차트를 그리는 function 주기

google.chart.setOnLoadCallback(drawChart);

• 위의 명령어를 통해 차트를 그리는 자바스크립트의 function을 부여한다.

function drawChart(){}

• 차트 그리기

데이터를 data 변수에 입력하기

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]
                   ]);

차트의 속성을 option변수에 입력하기

   var options = {'title': 'How Much Pizza I Ate Last Night',
                           'width': 400,
                           'height':300};