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

[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를 이용하겠다.

<2021년 2월 15일 자 삼성전자 1년 주가 차트>

1. 구글 차트 API / Google Chart API

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

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); }

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

<갓-구글신의 가호를 받아 차트를 그리는 모습>

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

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)); }

<꺾은선 차트 (line)>

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

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); }

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

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

반응형

from http://givemethesocks.tistory.com/36 by ccl(A) rewrite - 2021-02-15 14:26:29