[D3.js] 구글 차트 데이터추가

codingman (64)in #dclick • 5 years ago (edited)

[D3.js] 구글 차트 데이터추가

구글 차트 안내: https://developers.google.com/chart/interactive/docs/

데이터 시각화에서 가장 중요한 것은 데이터인데 이 데이터를 구글 차트에서 간단히 추가를 해보는 시간을 갖겠습니다. 간단히 데이터를 추가해서 데이터를 시각화해야 좀 더 이해가 쉽기 때문에 복잡한 형태를 빼고 간단히 Rows() 데이터를 추가하는 실험으로 post 내용을 꾸며 봤네요.

1. 데이터 추가

데이터테이블 클래스 출처 :
https://developers.google.com/chart/interactive/docs/reference#QueryResponse_getDataTable

위 데이터테이블 클래스에 대한 래퍼런스 정보를 한번 읽어보시는 것도 좋습니다.
우선 데이터테이블이 예로 아래와 같이 있다고 가정 합시다.

       var data = new google.visualization.DataTable();
        data.addColumn('string', 'DataName');
        data.addColumn('number', 'Value');
        data.addRows([
          ['data1', 10],
          ['data2', 20],
          ['data3', 30],
          ['data4', 40],
          ['data5', 50]
        ]);

data은 두개의 필드로 구성되어 있습니다. DataName, Value 구성되는데 DataName은 string 문자열이고 Value은 숫자형의 데이터로 설정되어 있고 Rows()함수로 한번에 5개의 데이터를 추가해서 하나의 data(데이터테이블 변수)을 완성하게 됩니다. 이 데이터를 시각화 하면 다음과 같습니다.

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

[결과]

데이터 필드를 추가

데이터 필드를 추가한다면 어디를 수정해야 할까요. data.addColumn(타입, 이름) 함수를 추가하변 됩니다. Value필드를 하나 더 추가해 보죠.

  data.addColumn('string', 'DataName');
  data.addColumn('number', 'V1');
    data.addColumn('number', 'V2');

필드를 추가했으니 데이터 추가해서 수정해야 겠죠.

        data.addRows([
          ['data1', 10,100],
          ['data2', 20,200],
          ['data3', 30,300],
          ['data4', 40,400],
          ['data5', 50,500]
        ]);

[결과]

기존 데이터테이블에 데이터를 추가

이제는 이미 형태가 만들어진 데이터테이블에 데이터를 추가하는 방법을 알아봅시다.

새로운 데이터를 추가한다면 두가지 방법이 있습니다.

일일히 추가 : 위의 기존테이블에 addRows(1)하면 한개의 row의 데이터가 추가되는데 setCell()함수로 행과 열로 해당 위치에 값을 추가하게 됩니다.

       data.addRows(1);
       data.setCell(5, 0, 'data6');
       data.setCell(5, 1, 60);
       data.setCell(5, 2, 600);

row 한번에 추가 : addRo()으로 한번에 값을 추가합니다.

     data.addRow(['data7', 70, 700]);

둘 중에서 두번째 방식이 추가하기 쉽겠죠. 첫번째 일일히 추가하는 방식에서는 행과 열의 이전 위치 번호를 알고 있어야 하기 때문에 불편합니다.

아무튼 이런식으로 데이터를 추가하여 데이터를 간단히 시각화 할 수 있습니다.

데이터 추가를 알아야 하는 이유는 실시간 갱신 시 기존 데이터에서 계속 데이터를 누적시키면서 차트의 데이터를 계속 갱신할 수 있기 때문에 간단한 원리지만 꼭 알아 두셔야 합니다.

2. 실험

데이터를 추가하는 방식을 전부 합쳐서 실험해 보죠.

[전체소스]

  <body>
    <div id="chart_div"></div>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'DataName');
        data.addColumn('number', 'V1');
        data.addColumn('number', 'V2');
        data.addRows([
          ['data1', 10,100],
          ['data2', 20,200],
          ['data3', 30,300],
          ['data4', 40,400],
          ['data5', 50,500]
        ]);

       data.addRows(1);
       data.setCell(5, 0, 'data6');
       data.setCell(5, 1, 60);
       data.setCell(5, 2, 600);
      

       data.addRow(['data7', 70, 700]);


        var options = {'title':'TEST BARCHART',
                       'width':400,
                       'height':300};

       var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
           chart.draw(data, options);    
     }         
    </script>
  </body>

[결과]

마무리

오늘은 간단히 데이터를 추가하는 방법을 살펴보았네요. 원래는 데이터를 딜레이 시간을 주거나 새로운 데이터를 버턴을 눌러서 추가하거 하는 방식으로 코딩을 할까 했는데 그렇게 하면 불필요한 코딩이 추가 되기 때문에 의미 전달이 안될 수 있기에 딱 필요한 부분만 코딩을 했네요.
이 데이터 추가 방법을 이용하여 나중에 실시간 갱신에 응용하면 좋을 듯 싶네요.