구글 바차트 만들기

오늘은 구글에서 제공하는 API 중 가장 많이 사용하는 차트에 대해 연재를 하려 합니다.

 

기본 골격은 다 동일하고, 데이터 set도 다 동일하며, 생성하고자하는 함수만 다르게 하면 쉽게 구현할 수 있습니다.

 

다만 아래에 제가 구성해 놓은 자바스크립트 구조를 가져야 하겠죠~~

 

기본적으로 google api chart 는 

https://developers.google.com/chart/

에서 볼 수 있습니다.

 

이제 아래의 소스만 가지고 있으시면 쉽게 만들 수 있습니다.

 

* 소스코드

 

<table width="98%">

<tr><td style="padding-left:20px;"><div id="chart_div" style="width:98%;height:230px;"></div></td></tr>

</table>

 

 

  

<script type="text/javascript">

google.load("visualization", "1", {'packages':["corechart"]});    

google.setOnLoadCallback(drawChart); // bar

 

function drawChart() {    

var data = new google.visualization.DataTable();

data.addColumn('string', '시간');

data.addColumn('number', '금액');

//data.addColumn('number', '취소');

 

        data.addRows([

['00', 111270],['01', 17200],['02', 4500],['03', 0],['04', 0],['05', 0],['06', 0],['07', 0],['08', 52490],['09', 257550],['10', 352400],['11', 279230],['12', 389910],['13', 797400],['14', 428060],['15', 224310],['16', 0],['17', 0],['18', 0],['19', 0],['20', 0],['21', 0],['22', 0],['23', 0]

        ]);

var options = {     

title: '시간별 판매금액', 

fontSize: '12',

fontName: '굴림체',

hAxis: {

title: '시간', 

titleTextStyle: {color: 'red', fontName: '굴림체'}

} ,      

vAxis: {

title: '금액', 

titleTextStyle: {color: 'blue', fontName: '굴림체'}

} 

};        

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

chart.draw(data, options);   

data = null;

chart = null;

}  

 

</script>

 

 

제일 중요한 부분이 두가지인데 data.addRows 에 표시하고자하는 숫치를 구성에 맞게 해야하고, 

options 에서 그 수치 규성에 맞게 옵션치를 한뒤, 바차트는 ColumnChart 을 호출을 하게 되면..

 

 

 

위 처럼 데이터 차트가 표시가 됩니다.