[JavaScript] 구글차트 활용

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
    google.charts.load('current', {'packages':['line']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, google.charts.Line.convertOptions(options));
     }
   </script>

  var today = new Date(); // 오늘 날짜
	var before = new Array(); // 이전 날짜 배열

	for(var i = 1 ; i < 7 ; i ++) { // 1주일전까지 날짜 구하기
		before[i] = new Date(today.getTime() - (i * 24 * 60 * 60 * 1000));
    // ex) before[1] = 1일전 , before[2] = 2일전
		before[i] = before[i].getDate() + '일';
	}
	today = today.getDate() + '일'; // 오늘 날짜에서 '일'만

	var userVisitCnt = new Array(7); // 방문자수 배열
	$.ajax({ // 배열에 방문자수 넣기
		type : 'post',
		url : '/admin/weekUserVisit',
		async: false,
		success : function(data) {
			for(var i in data) {
				userVisitCnt[i] = data[i];
			}
		}
	})

	var userRegCnt = new Array(7); // 회원가입수 배열

	$.ajax({ // 배열에 가입자수 넣기
		type : 'post',
		url : '/admin/weekUserReg',
		async: false,
		success : function(data) {
			for(var i in data) {
				userRegCnt[i] = data[i];
			}
		}
	})

	var max1 = 0; // 방문자수 최대
	var max2 = 0; // 가입자수 최대
	var weekUserVisit = 0; // 최신 1주일간 방문자 수
	for(var i = 0; i < 7; i++) { // 1주일간 방문자수 더하기
		weekUserVisit += userVisitCnt[i];
		if(max1 < userVisitCnt[i])
			max1 = userVisitCnt[i];
	}

	var weekUserReg = 0; // 최신 1주일간 방문자 수
	for(var i = 0; i < 7; i++) { // 1주일간 가입자수 더하기
		weekUserReg += userRegCnt[i];
		if(max2 < userRegCnt[i])
			max2 = userRegCnt[i];
	}

  google.charts.load('current', {'packages': ['line']});
  google.charts.setOnLoadCallback(drawChart1);
  function drawChart1() {

	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Day');
	data.addColumn('number', '방문자 수');
	data.addColumn('number', '회원가입 수');

	data.addRows([
		[before[6], userVisitCnt[6], userRegCnt[6]],
		[before[5], userVisitCnt[5], userRegCnt[5]],
		[before[4], userVisitCnt[4], userRegCnt[4]],
		[before[3], userVisitCnt[3], userRegCnt[3]],
		[before[2], userVisitCnt[2], userRegCnt[2]],
		[before[1], userVisitCnt[1], userRegCnt[1]],
		[today, userVisitCnt[0], userRegCnt[0]]
	]);

	var options = {
  		legend : {position: 'bottom'}, // 범례 위, 아래 지원 X
		chart: {
			title: '사용자 통계',
		subtitle: '일일 방문자 및 회원가입 수'
		},
		series: {
	        0: {targetAxisIndex: 0},
	        1: {targetAxisIndex: 1}
      	},
      	vAxes: {
			0: {viewWindow : {max : max1 + 4}},
			1: {viewWindow : {max : max2 + 4}}
		},
		vAxis:{
			gridlines: {count: 0},

		},
		hAxis: {
			gridlines: {count: 2}
		},
		colors: ['#620017','#0066ff'],
	};

	var chart = new google.charts.Line(document.getElementById('chart1'));

	chart.draw(data, google.charts.Line.convertOptions(options));