1. Google Chart 기본사용
구글에서 제공하는 Google Chart 기능을 사용을 해보자. 기본적으로 사용하는 것이 Table이며,
다른 예제들이 많이 있다.
사용하는 방법은 script을 가 head에 있지만 이를 body에서 사용을 하면된다.
https://developers.google.com/chart/interactive/docs/quick_start
Table의 예제이며, Old Style과 New Style이며 현재 아래로 같이 사용하는 방법이 변하고 있다.
간단히 분석을 해보자.
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["table"]}); // Google Chart의 Table 기능 사용
google.setOnLoadCallback(drawTable_OLD); // Call Back 함수 등록
function drawTable_OLD() { // Call Back 함수 정의
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee'); // Table의 Column 등록
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true], // Table의 Rows 등록
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div_example_old')); // table id : table_div_example_old 정의
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable_NEW);
function drawTable_NEW() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div_example_new'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
<br />
OLD Type Table<br />
<div id="table_div_example_old"> </div> <br /> // 위에서 정의한 table id 사용 table_div_example_old
NEW Type Table<br />
<div id="table_div_example_new"> </div>
OLD Type Table
NEW Type Table
Table 관련 참조
https://developers.google.com/chart/interactive/docs/gallery/table
2. Chart Gallery
https://developers.google.com/chart/interactive/docs/gallery
https://developers.google.com/chart/
Google Chart에서 관련 예제를 제공하기 때문에 쉽게 사용이 가능하다.
보통 script를 <head> 안에 넣는데, 이를 <body> 안에 넣고 사용을 해보자
복합적으로 사용이 가능하며, event 및 animation도 사용이 가능하다
사용방법은 역시 기본은 위와 같이 사용을 하면 된다.
https://developers.google.com/chart/interactive/docs/examples#table_example