엑셀(Excel) 그래프를 웹 게시에 무료로 Google Data Studio 사용하기

Excel 을 웹에 게시하는 일반적이고 효율적인 방법인

Google Spreadsheet 를 사용하는 방법은 아래 글에서 살펴보았습니다

https://robocomman.tistory.com/380

Excel 그래프를 웹에서 보기 편하게 Google spreadsheet 사용하기

이 글에서는

좀 더  전문적인 무료 그래프 작성 및 게시도구인

Google Data Studio 를 사용하는 방법을 공유해 드립니다

 

우선 아래의 Google Data Studio 사이트에 접속합니다

Google 계정이 있으면 무료로 사용이 됩니다

https://datastudio.google.com/

Data Studio Product Overview

접속하면 아래의 화면이 나옵니다

1. 빈 보고서를 눌러줍니다

 

보고서에 데이터 추가 화면이 나오면

Google 스프레드시트를 이용하는 것이 일반적이겠죠

그래프를 그려볼 적당한 Excel 파일을 Google 스프레드시트에 넣어준 후

Google Data Studio 에서 보고서에 데이터 추가를 수행해 주세요

 

Google 스프레드시트에 올려 놓은 코로나 세계Chart 파일이 보입니다

파일을 선택하면 아래와 같이

워크시트 및 데이터 이름과 데이터 범위 선택이 나옵니다

'첫 번째 행을 헤더로 사용' : 첫 번째 행을 데이터 이름으로 사용

'숨겨진 셀 및 필터링된 셀 포함' 은 표현 그대로의 내용이고요

'범위 지정' 은 그래프에 사용할 데이터의 범위입니다

A1:B52 등의 엑셀에서 셀범위 지정방법을 사용하면 됩니다

그 다음 추가 버튼을 눌러 줍니다

확인 메시지가 나오면 '보고서에 추가'를 누릅니다

 

진입하면 처음에는 조금 이해하기 어려운 화면이 나옵니다

하지만 그리 복잡하지 않습니다

자동으로 만들어진 차트가 원하는 차트면 크기만 조절해서 사용하면 되나

지금은 그렇지 않네요

선택해서 지우고 새로 만듭니다

'차트 추가'를 누르면 차트 모양이 다양하게 나옵니다

원하는 모양을 선택합니다

저는 선차트를 선택하고 위치를 지정하니 아래와 같이 나옵니다

그래프를 선택하면 그래프를 편집할 수 있는 항목들이 보입니다

오른쪽 중간의 측정항목에 자동생성된 'Record Count' 항목이 들어가 있네요

측정항목은 그래프의 범례에 들어갈 항목들이라고 보면 됩니다

오른쪽 사용가능한 필드에서

원하는 항목인 국가를 끌어서 측정항목에 넣어줍니다

오스트리아를 끌어서 넣으니 그래프가 나타납니다

Record count 는 삭제하고

다른 국가들도 넣어줍니다

그래프를 살펴보면

좀 이상합니다

날짜가 뒤죽박죽이네요

오른쪽 아래의 '정렬' 에 오스트리아가 선택되어 있네요

'정렬'의 오스트리아를 클릭 후 Date 를 선택하고 '오름차순' 을 선택합니다

원하는 그래프와 유사하네요

 

이제 크기를 조정할 차례입니다

티스토리 블로그의 반응형 스킨을 사용하여 컴퓨터와 스마트폰이나 테블릿에서

Google Data Studio 의 그래프를 모두 볼 수 있게 하려면

가로 1024 세로 576 수준이 적당합니다

페이지 > 현재 페이지 설정 > 스타일 을 눌러서 설정해 줍니다

기본인 1200, 900 은 너무 커서 화면에 보여줄 때 Interpolation 이 발생하여

실제 화면에서 보면 오히려 그래프의 선명도가 떨어져 보입니다

이제 그래프 크기도 최대한 키워줍니다

단 상단 우측의 조절아이콘이 범위를 벗어나지 않게 해야하고

하단은 유튜브의 하단메뉴 같은 Google Data Studio 메뉴가 나타나므로

상단과 하단은 약간의 여유를 둡니다

완성단계로 보이지만

한가지 더 좋은 기능을 설정합니다

오른쪽 중간의 선택 측정항목 슬라이더를 켜 줍니다

그래프의 상단 우측에 그래프에 나타날 범례를 선택할 수 있는 아이콘에 추가됩니다

그래프가 잘 동작하는지 보려면

우측 상단의 '보기' 를 클릭합니다

'보기'를 눌러서 수행하는 동작은

웹 사용자가 할 수 있는 동작과 동일합니다

마우스 포인터를 오른쪽에 위치하니

4/11 자의 데이터들을 쉽게 보여주는 반응형 그래프가 나타납니다

미국의 수치가 높아서 아래쪽의 그래프들이 안보이니

상단 우측의 '선택 측정항목' 아이콘을 눌러서 미국을 제외해봅니다

 

미국을 제외하니

왼쪽의 환자수치 크기도 1만 수준으로 자동으로 조절되어

다른 국가들의 그래프를 자세히 볼 수 있게 자동조절 됩니다

 

 

그래프가 원하는 형태로 잘 동작하는 것을 확인했으니

티스토리에 게시합니다

오른쪽 상단의 '수정' 버튼을 눌러 다시 편집상태로 되돌아간 후

파일 > 보고서 삽입을 누릅니다

 

확인 메뉴가 나오면

삽입 사용 설정을 눌러줍니다

HTML 코드가 나옵니다

반응형이 아닌 고정형입니다

이리저리 찾아보고 테스트 해보니

간단하게 <iframe width='600' 이 부분을 <iframe width='100%' 로 바꾸는 것이 가장 적당합니다

혹시 더 좋은 방법이 있다면 댓글 부탁드립니다~

 

실제 게시된 화면은 아래와 같습니다

오른쪽 하단을 보면 전체화면 그래프도 지원됩니다

아래 글의 맨 하단에서 반응형의 실제 작동 확인이 가능합니다

https://robocomman.tistory.com/380

Excel 그래프를 웹에서 보기 편하게 Google spreadsheet 사용하기

내용이 도움되었다면 아래의 공감 하트를 클릭해 주시고
질문은 댓글 달아주세요~

또한 필요한 분들에게 아래의 이 글 주소를 전달해 주시면 좋겠습니다~

https://robocomman.tistory.com/384