Google API 선 그래프
Open API/Google2016. 11. 18. 11:56
반응형
구글 API를 이용한 선 그래프 그리기 샘플 코드입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>누적 예약 현황</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1"
, {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['month', '2011', '2012'],
['1월 1주', 10, 0],
['1월 2주', 30, 0],
['1월 3주', 50, 0],
['1월 4주', 70, 50],
['2월 1주', 90, 100],
['2월 2주', 110, 150],
['2월 3주', 130, 250],
['2월 4주', 150, 500],
['3월 1주', 170, 600],
['3월 2주', 190, 680],
['3월 3주', 210, 750],
['3월 4주', 230, 900],
['4월 1주', 250, 900],
['4월 2주', 270, 900],
['4월 3주', 290, 920],
['4월 4주', 310, 920],
['5월 1주', 330, 930],
['5월 2주', 350, 950],
['5월 3주', 370, 950],
['5월 4주', 390, 970],
['6월 1주', 410, 970],
['6월 2주', 500, 990],
['6월 3주', 530, 1000],
['6월 4주', 600, 1200],
['7월 1주', 700, 1250],
['8월 2주', 750, 1300],
['9월 3주', 850, 1350],
['9월 4주', 1000, 1350]
]);
var options = {
title: '2011년 통계'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
댓글()
