[Web] 구글 차트 API / Google Chart API

0. 들어가기 / 차트

-. 위키피디아의 차트 페이지에 들어가면 차트에 대한 한줄 설명이 있다. 차트(chart)는 데이터를 그래픽으로 표현한 것으로, 그 안의 데이터는 바 차트의 막대, 라인 차트의 선, 파이 차트의 조각과 같은 기호로 나타낸다.

A chart is a graphical representation of data, in which "the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart". A chart can represent tabular numeric data, functions or some kinds of quality structure and provides different info.

-. 혹은, 데이터 시각화 페이지에는 이렇게 기술되어 있다. 데이터 시각화(data visualization)는 데이터 분석 결과를 쉽게 이해할 수 있도록 시각적으로 표현하고 전달되는 과정을 말한다. 데이터 시각화의 목적은 도표(graph)라는 수단을 통해 정보를 명확하고 효과적으로 전달하는 것이다.

Data visualization (often abbreviated data viz[1]) is an interdisciplinary field that deals with the graphic representation of data. It is a particularly efficient way of communicating when the data is numerous as for example a Time Series.

-. 결국, 숫자로 나열된 표는 사람이 알아먹기 힘드니, 알아보기 쉽게 만들겠다 란게 그래프, 차트의 목적이라고 할 수 있겠다. 연구를 하지 않는 일반인이 '차트'하면 떠올리는 건 주식 차트일테다. 이러한 그래프를 그리기 위해 구글 API를 이용하겠다.

1. 구글 차트 API / Google Chart API

-. 위대하신 갓-구글께서는 아주 간단한 코드만으로 차트를 그릴 수 있게 제공을 해주신다. 우선 Line chart 예제를 따라 작업을 해보기로 했다.

<html>
<head>
<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 = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

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

    chart.draw(data, options);
  }
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

-. 해당 예제 코드를 그대로 chart-line.html이란 파일에 저장하고, 크롬 창에 드래그 해서 갖다 붙인다.

-. 난 꺾은선 차트가 좋으니 하나 더 해본다.

<html>
<head>
<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,
        axes: {
          x: {
            0: {side: 'bottom'}
          }
        }
      };

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

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
</script>
</head>
<body>
<div id="lineChart" style="width: 900px; height: 500px"></div>
</body>
</html>

-. 마지막으로, 주식장에서 많이 쓰이는 봉차트 (candle chart)까지 추가.

<html>
  <head>
    <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 = google.visualization.arrayToDataTable([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]
      // Treat first row as data as well.
    ], true);

    var options = {
      legend:'none'
    };

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

    chart.draw(data, options);
  }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

-. 딱히 어려울 건 없는데, 차트 구조마다 데이터를 다르게 넣어줘야 하니, 그부분을 Flask에서 손보면 될 것 같다.

-. 다음 글은 Flask + jinja 구조에 Google Chart를 얹는 것으로 결정.

728x90

저작자표시

'Web' 카테고리의 다른 글

[web] 반응형 테이블 만들기 - css grid (0)	2021.03.19
[Web] 네이버 주식시세 가져오기 시도중 (1)	2021.03.05
[Web] KRX 주식 시세 - 이상함. (0)	2021.03.05
개인도메인 구글 서치콘솔 등록 (0)	2021.02.24
[Web] 신용카드 혜택 모으기 - 네이버 신용카드 정보 크롤링 (1) (2)	2021.02.16