Dev Chongmin

만들려는 사이트가 주식 커뮤니티인 만큼 자신의 자산 추이를 한눈에 볼 수 있는 그래프를 추가하고 싶었는데

그 방법으로 구글차트를 이용해 보겠습니다.

그래프 하단에 날짜를 지정하고 자산을 입력한 다음 추가 버튼을 누르면 그 정보가 데이터베이스 입력되고 동시에 

그래프와 하단의 목록에 뜨게됩니다.

우선 구글 차트에 들어가서 원하는 차트 타입을 누릅니다.

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

저는 선 그래프를 이용했기 때문에 line chart로 설명을 하겠습니다.

왼쪽에 line charts를 눌러주시고 Code it yourself on JSPFiddle을 누르면

예제 코드를 볼 수 있고 데이터도 바꾸면서 확인할 수 있습니다. 

html의 script를 본인 html head태그 안에 넣어주시고 

div 태그는 그래프가 그려질 장소이니 그래프를 보여줄 곳에 넣어주면 됩니다.

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawchart);
function drawchart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Dogs');

      data.addRows([ ]);

      var options = { };

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

      chart.draw(data, options);
    }

구글 차트의 기본적인 구조입니다. 

차트를 로드하고 .setOnLoadCallback(); 함수로 html이 전부 로드된 후 매개변수에 들어간 함수를 호출합니다.

data 변수에 데이터 테이블을 생성하고 .addColumn으로 열을 추가합니다

열의 데이터 타입은 많이 있으니 직접 검색해보시면 됩니다.  

.addRows는 만들어진 열에 데이터를 추가하는 것으로 배열 형식으로 추가할 수 있습니다.

options는 그래프의 옵션을 정하는 변수로 x축, y축, 그래프 사이즈 등 여러 옵션을 설정할 수 있습니다.

chart에 그래프가 그려질 곳을 설정하고 .draw로 데이터와 옵션을 추가해 그립니다.

저는 oracle db에 있는 데이터를 받아와 출력할 생각이기 때문에 .addRow만 좀 다르게 해 주면 됩니다.한 번에 그리는 방법도 있을 수 있는데 저는 제 실력이 부족해서 한번에 데이터를 받아와 그리는 것을 못했습니다.그래서 html이 전부 그려지고  빈 차트를 그린 후에 거기에 데이터를 추가하는 방법을 선택했습니다.

google.charts.load('current', {packages: ['corechart', 'line'], callback: drawBasic});	
google.charts.setOnLoadCallback(addData);
var data;
var chart;
var options;
function drawBasic() { 
      data = new google.visualization.DataTable();
      data.addColumn('datetime', 'year');
      data.addColumn('number', 'Property');

      data.addRows([
      ]);
      options = {
              width:'100%'
      }

      chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

먼저 빈 차트를 그리는 코드입니다.

변수를 두 번째에 그릴 때도 사용할 것이기 때문에 함수 밖에 변수를 설정해줍니다.

저는 x축을 날짜별로 보여줄 거라 데이터 타입을 datetime으로 설정했습니다.

data 행은 두 번째 그릴 때 추가할 거라 빈 값으로 설정해주고 그려주면 끝납니다.

var year = [];
var month = [];
var day = [];
var value = [];	 	
<%for(GraphVO gv : glist){%>
year.push(<%=gv.getYear()%>);
month.push(<%=gv.getMonth()%>);
day.push(<%=gv.getDay()%>);
value.push(<%=gv.getMoney()%>);
<% }%>
var len = year.length;
function addData(){
    var arr = new Array();
    for(let i = 0; i<len; i++){
         arr = [new Date(year[i],month[i]-1,day[i]),value[i]];
         data.addRow(arr);
     }
    options = {
            pointSize: 5,
            width:'100%',
            hAxis: {
              title: 'Time',
              format:'yy-MM',
              ticks: [new Date(year[0],month[0]-1,day[0]),new Date(year[len-1],month[len-1]-1,day[len-1])]
            },
            explorer: { axis: 'horizontal' }
          };
    chart.draw(data, options);
}

데이터를 전부 출력하기 위해 컨트롤러에서 받아온 데이터를 변수 배열에 추가해주시고요

for문으로 위에 설정해둔 data 변수에 .addRow해서 일일이 추가해줍니다.

원하는 옵션도 추가해주시고 다시 그려주면 끝납니다.

더 쉬운 방법도 물론 있을 수 있으나 처음 사용하다 보니 미숙해서

빈 차트에 새로운 데이터를 덮어 씌우는 방법을 사용해봤습니다.

아래는 전체 코드입니다.

전체 코드 - https://github.com/seohakman/stockCommu/blob/main/src/main/webapp/member/FinancialGraph.jsp