Google Chart 사용해서 가족 트리 구현

○구글 차트(https://developers.google.com/chart/)에서 지원하는 것중에서 Org Chart로 일단 가족 트리를 생성 하고 트리 아이템 선택하면 사람이름으로 spreadsheet에 있는 정보를 query해서 해당 정보를 테이블로 그려주는 사이트를 구현했음

• 데이터베이스는 Google 문서도구에서 spreadsheet로 작성
• 작성된 spreadsheet는 공유가 되어 있어야 질의가 됨
• 코드는 아래 사이트에서 소스보기 하면 보임
• http://ikjunekim.net/family

○간단한 예제

• Spreadsheet 데이터: https://docs.google.com/spreadsheets/d/1ONNvXM1yukBV0rHUk5iCF1SS87T4M-TRx-slpzpDTSk/edit#gid=0
• Org 차트를 먼저 만들고 Org차트 가지를 선택하면 선택한 분류의 아이템을 지정한 주소의 구글 spreadsheet에서 query 하여 테이블 차트로 나타냄

 

• 소스코드

<script src="https://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["orgchart"]}); google.setOnLoadCallback(drawChart); google.load("visualization", "1", {packages:["table"]}); var data; var chart; function drawChart() { data = new google.visualization.DataTable(); data.addColumn('string', 'Item'); data.addColumn('string', 'Parent node'); data.addColumn('string', 'Note'); data.addRows([['내카메라', '', ''] ,['바디', '내카메라', ''] ,['렌즈', '내카메라', ''] ,['기타', '내카메라', ''] ]); chart = new google.visualization.OrgChart(document.getElementById('chart_div')); chart.draw(data, {allowHtml:true}); // Add selection handler. google.visualization.events.addListener(chart, 'select', selectHandler); } function selectHandler() { var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=1ONNvXM1yukBV0rHUk5iCF1SS87T4M-TRx-slpzpDTSk'); var queryStr= 'SELECT B WHERE C ='; var selection = chart.getSelection(); for (var i = 0; i < selection.length; i++) { var item = selection[i]; if (item.row != null && item.column != null) { var str = data.getValue(item.row, item.column); queryStr += '\"'+ str +'\"'; } else if (item.row != null) { var str = data.getValue(item.row, 0); queryStr += '\"'+ str +'\"'; } else if (item.column != null) { var str = data.getValue(0, item.column); queryStr += '\"'+ str +'\"'; } } query.setQuery(queryStr); // Apply query language statement. query.send(handleQueryResponse); // Send the query with a callback function. } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {legend: 'bottom',allowHtml:true}); } </script>