[Tableau Tip] 생성한 대시보드 화면 임베딩하기

Table of Contents

1. Introduction
2. Tableau 대시보드 임베딩 준비하기
3. JavaScript을 이용한 대시보드 임베딩
4. iframe을 이용한 대시보드 임베딩
5. Reference

 

Introduction

Tableau의 Public 버전은 Desktop 버전과 Server 버전을 오픈 서비스로 제공하는 버전이라고 생각하는 것이 좋다. Desktop 버전은 로컬 PC에서 데이터 시각화 작업을 하기 위한 클라이언트 툴이라면 Server는 작업한 시각화를 서버로 배포하여 웹뷰를 쉽게 제공하기 위한 툴인데, Public 버전은 Desktop버전과 동일하게 데이터 시각화 작업이 가능하다. 단, Public 버전에서는 파일 데이터를 불러와서 작업은 가능하나 데이터베이스와 연동은 제한을 두고 있으며, 오픈된 곳에 대시보드를 저장하기 때문에 공개가 가능한 데이터를 활용해야 한다는 점을 기억해야 한다.

 

Tableau 대시보드 임베딩 준비하기

"움직이는 이미지를 활용한 대시보드 구성하기"에서 gif 파일을 이용하여 좀 더 역동적인 대시보드를 구성하였다. 해당 대시보드는 public에 저장되어 있다. 해당 링크를 접속하면 그림 1과 같이 대시보드가 게시된 것을 확인할 수 있다. 만약 대시보드가 준비되어 있지 않을 경우에는 Public을 이용하여 대시보드를 구축하고 이를 Public에 게시해보자

 - 대시보드 URL : public.tableau.com/profile/.1651#!/vizhome/gif_16182940609810/sheet0_1

[그림 1] 작성된 대시보드

 

 

Tableau Public 뿐만 아니라 Server에 게시할 경우 하단에 메뉴바가 나타난다. 하단에 위치한 메뉴바를 간단하게 설명하면 가장 왼쪽부터 '바로 이전으로 돌아가기', '바로 다음으로 넘어가기', '처음으로 돌아가기', '공유', '다운로드', '최대화'로 구성되어 있다. 하단의 공유 버튼을 클릭하면 그림 2와 같은 팝업이 나타난다.

[그림 2] 공유 팝업창

 

JavaScript를 이용하여 해당 대시보드를 임베딩할 경우 내장 코드를 사용하고 iframe을 이용하여 대시보드를 임베딩할 경우에는 링크를 사용한다.

 

JavaScript를 이용한 대시보드 임베딩

JavaScript를 이용하여 Tableau 대시보드를 임베딩하기 위해 내장 코드를 작성해야 한다. Tableau Server, Online, Public에 따라 URL의 차이가 있으나 큰 틀에서는 큰 차이가 없다. 

- Tableau Server일 경우

<script type='text/javascript' src='http://myserver/javascripts/api/viz_v1.js'></script> 
<div class='tableauPlaceholder' style='width:800; height:600;'> 
<object class='tableauViz' width='800' height='600' style='display:none;'>
   <param name='host_url' value='http%3A%2F%2Fmyserver%2F' /> 
   <param name='site_root' value=&#47;t&#47;Sales' /> 
   <param name='name' value='MyCoSales&#47;SalesScoreCard&#47;' /> 
   <param name='tabs' value='yes' /> 
   <param name='toolbar' value='yes' /></object></div>

- Tableau Online일 경우

<script type='text/javascript' src='https://online.tableau.com/javascripts/api/viz_v1.js'></script> 
<div class='tableauPlaceholder' style='width:800; height:600;'> 
<object class='tableauViz' width='800' height='600' style='display:none;'>
   <param name='host_url' value='https%3A%2F%2Fonline.tableau.com%2F' /> 
   <param name='site_root' value='&#47;t&#47;Sales' /> 
   <param name='name' value='MyCoSales&#47;SalesScoreCard&#47;' /> 
   <param name='tabs' value='yes' /> 
   <param name='toolbar' value='yes' />
</object>
</div> 

- Tableau Public일 경우

<div class='tableauPlaceholder' id='viz1620223393381' style='position: relative'>
<noscript>
<a href='#'>
<img alt='움직이는 이미지 활용하기 ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;gi&#47;gif_16182940609810&#47;sheet0_1&#47;1_rss.png' style='border: none' />
</a>
</noscript>
<object class='tableauViz'  style='display:none;'>
 <param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' />
 <param name='embed_code_version' value='3' />
 <param name='site_root' value='' />
 <param name='name' value='gif_16182940609810&#47;sheet0_1' />
 <param name='tabs' value='no' />
 <param name='toolbar' value='yes' />
 <param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;gi&#47;gif_16182940609810&#47;sheet0_1&#47;1.png' />
 <param name='animate_transition' value='yes' />
 <param name='display_static_image' value='yes' />
 <param name='display_spinner' value='yes' />
 <param name='display_overlay' value='yes' />
 <param name='display_count' value='yes' />
 <param name='language' value='ko' />
</object>
</div>
<script type='text/javascript'>
 var divElement = document.getElementById('viz1620223393381');
 var vizElement = divElement.getElementsByTagName('object')[0];
 if ( divElement.offsetWidth > 800 ) {
   vizElement.style.width='1082px';
   vizElement.style.height='744px';
   } else if ( divElement.offsetWidth > 500 ) {
     vizElement.style.width='1082px';
     vizElement.style.height='744px';
   } else {
     vizElement.style.width='100%';
     vizElement.style.height='727px';
   }
 var scriptElement = document.createElement('script');
 scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
 vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>

 

다만, 아래의 내장 코드를 사용할 경우에 일부 매개 변수(Parameter)를 수정해야 한다.

매개 변수	값	설명	예시
dataDetails	no	툴바에서 뷰에 사용된 데이터의 세부 정보를 표시하는 데이터 세부 정보 단추를 숨깁니다.	<param name='dataDetails' value='no' />
alerts	no	툴바에서 사용자가 데이터 기반 알림을 만들 수 있게 해 주는 알림 단추를 숨깁니다.	<param name='alerts' value='no'/>
customViews	no	툴바에서 사용자가 사용자 지정 뷰를 저장할 수 있게 해 주는 뷰 단추를 숨깁니다.	<param name='customViews' value='no'/>
device	desktop; tablet; phone	대시보드에 휴대기기를 위한 레이아웃이 있는 경우 화면 크기에 관계없이 특정 레이아웃을 표시합니다. 이 매개 변수가 설정되어 있지 않으면 Tableau Server 또는 Tableau Online에서 화면 크기를 감지하여 해당하는 레이아웃을 로드합니다. 예제에 대해서는 대시보드 내장을 참조하십시오.	<param name='device' value='phone'/>
filter	문자열	뷰가 열릴 때 표시되는 데이터를 필터링합니다. URL 매개 변수를 사용하여 필터링할 수도 있습니다.	<param name='filter' value='Team=Blue'/>
host_url	문자열	필수 항목입니다. URL에 나타나는 서버 이름입니다.	http://myserver.exampleco.com/'> <param name="host_url" value="http://localhost/">
linktarget	문자열	외부 하이퍼링크에 대한 대상 창 이름입니다.	<param name="linktarget" value="_blank"/>
load-order	숫자	다중 뷰가 내장된 경우 페이지에서 뷰가 로드되는 순서를 결정합니다. 음수가 허용됩니다.	<param name="load-order" value="2"/>
mobile	yes	모바일 장치에 맞게 터치 방식에 최적화된 퀵 필터를 표시합니다.	<param name='mobile' value='yes'/>
name	문자열	이 구조에 필요한 개체 매개 변수: [workbook name]/[sheet name]/[optional custom view name] 선택적 사용자 지정 뷰 이름 형식: username@domain/[custom view name] Tableau Server 또는 Tableau Online URL을 참조하여 name의 값을 확인하는 경우 URL의 끝 부분에 있는 세션 ID(:iid=<n>)를 제외합니다.	<param name='name' value='ExampleCoSales/Sales'/> <param name='name' value='ExampleCoSales/Sales/jsmith@example.com/EastRegionSales'/>
:original_view	yes	name 변수가 통합 문서, 또는 이 매개 변수가 포함된 시트 URL을 참조하고 사용자 지정 뷰를 명시적으로 참조하지 않는 경우 해당 뷰를 원래 뷰로 표시합니다.	<param name='filter' value=':original_view=yes'/>
path (Tableau Server에만 해당합니다. Tableau Online에는 적용할 수 없습니다.)	문자열	신뢰할 수 있는 인증 전용인 경우 ticket 매개 변수와 함께 사용할 수 없습니다. name수의 값을 재정의하며, URL로 사용됩니다. 자세한 내용은 Tableau Server 관리자 도움말에서 티켓을 사용하여 뷰 표시(Link opens in a new window)를 참조하십시오.	<param name='path' value='trusted/Etdpsm_Ew6rJY-9kRrALjauU/views/workbookQ4/SalesQ4'/> http://tableauserver/trusted/Etdpsm_Ew6rJY-9kRrALjauU/views/workbookQ4/SalesQ4?:embed=yes&:tabs=yes
showShareOptions	true; false	내장된 뷰에 공유 옵션을 표시할지 여부를 제어합니다.	<param name='showShareOptions' value='true' />
site_root	문자열	필수 항목입니다. 사이트 이름입니다. 기본 사이트 값은 Null(value='')입니다. 서버가 다중 사이트 서버인 경우 신뢰할 수 있는 인증을 사용하려면 Tableau Server 도움말에서 티켓을 사용하여 뷰 표시(Link opens in a new window)를 참조하십시오.	<param name='site_root' value='/#/Sales'/> <param name='site_root' value=''/>
subscriptions	no	툴바에서 사용자가 정기적인 간격으로 뷰의 스냅샷을 받기 위해 이메일 구독을 설정할 수 있게 해 주는 구독 단추를 숨깁니다.	<param name='subscriptions' value='no'/>
tabs	yes; no	탭을 표시하거나 숨깁니다.	<param name='tabs' value='yes'/>
ticket (Tableau Server에만 해당합니다. Tableau Online에는 적용할 수 없습니다.)	문자열	신뢰할 수 있는 인증 전용인 경우 path매개 변수와 함께 사용할 수 없습니다. 신뢰할 수 있는 티켓 상환 URL을 생성하려면 name 개체와 함께 사용해야 합니다. 자세한 내용은 Tableau Server 도움말에서 티켓을 사용하여 뷰 표시(Link opens in a new window)를 참조하십시오.	<param name='ticket' value='9D1ObyqDQmSIOyQpKdy4Sw==:dg62gCsSE0QRArXNTOp6mlJ5'/> http://tableauserver/trusted/9D1ObyqDQmSIOyQpKdy4Sw==:dg62gCsSE0QRArXNTOp6mlJ5/views/workbookQ4/SalesQ4?:embed=yes&:tabs=yes
toolbar	yes; no; top	툴바는 기본적으로 아래쪽에 표시됩니다. 이 매개 변수를 top으로 설정하면 툴바가 뷰 위쪽에 배치되고 no로 설정하면 내장된 뷰에서 툴바가 제거됩니다.	<param name='toolbar' value='top'/>
tooltip	yes; no	도구 설명은 기본적으로 표시되지만 이 매개 변수를 no로 설정하면 내장된 뷰에서 도구 설명이 제거됩니다.	<param name='tooltip' value='no'/>

 

iframe을 이용한 대시보드 임베딩하기

iframe을 이용하여 Tableau 대시보드를 임베딩하기 위해 링크를 이용한다. Tableau Server, Online, Public에 따른 차이가 없다. iframe의 URL은 각 각의 버전에 따라 다르게 나타나겠지만 해당 URL을 활용한다는 점에선 동일하다.

 

 - Tableau Server

<iframe src="http://myserver/t/Sales/views/MyCoSales/SalesScoreCard
?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600">
</iframe> 

 

 - Tableau Online

<iframe src="https://online.tableau.com/t/Sales/views/MyCoSales/SalesScoreCard
?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600">
</iframe>

 

- Tableau Public

<iframe src="https://public.tableau.com/views/gif_16182940609810/sheet0_1
?:embed=yes&:showVizHome=no" width="1024" height="700">
</iframe>

 

iframe을 이용하여 간단히 작성한 html 문서이다. 현재 테스트 해본 결과 github markdown에서는 iframe이 적용이 안되는 것으로 보인다. github에서 테스트 했을 때 <iframe> </iframe> 영역이 텍스트로 나타났다. "embed iframe in github markdown" 페이지에서도 github에선 HTML Extension을 적용할 수 없다고 소개하고 있다.

 - 테스트 결과 URL : github.com/jjy8517/image/blob/main/readme.md

 

html_iframe임베딩.html

0.00MB

 

JavaScript와 동일하게 일부 매개 변수를 통해 컨트롤 할 수 있다.

 

매개 변수	값	설명	예시
:alerts	no	내장된 뷰에서 알림 단추를 숨깁니다.	http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:alerts=no
:customViews	no	내 변경 내용 저장 옵션입니다.	http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:customViews=no
:device	desktop; tablet; phone	대시보드에 휴대기기를 위한 레이아웃이 있는 경우 화면 크기에 관계없이 특정 레이아웃을 표시합니다. 이 매개 변수가 설정되어 있지 않으면 Tableau Server 또는 Tableau Online에서 화면 크기를 감지하여 해당하는 레이아웃을 로드합니다. 예제에 대해서는 대시보드 내장을 참조하십시오.	http://tabserver/views/sales/sales_dashboard?:device=tablet
:display_count (Tableau Public만 해당)	yes	왼쪽 아래에서 Tableau 로고를 클릭하면 총 페이지뷰 수가 표시됩니다.	https://public.tableau.com/en-us/s/gallery/what-emoji-say-about-music?:display_count=yes
:embed	yes	필수 URL 매개 변수입니다. 맨 위 탐색 영역을 숨겨 웹 페이지에 뷰 통합을 향상시킵니다.	http://tabserver/views/Date-Time/DateCalcs?:embed=yes
:format	pdf; png	뷰를 PDF 또는 .png 파일로 표시합니다.	http://tabserver/views/Sales/Q2?:format=pdf
:highdpi	false	고해상도 디스플레이 및 기기를 위해 표준 DPI(Dots Per Inch)를 사용하여 뷰를 렌더링합니다.	http://tableauserver/views/Sales/Q2?:highdpi=false
:linktarget	문자열	외부 하이퍼링크에 대한 대상 창 이름입니다.	http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:linktarget=_blank
:record_performance (Tableau Server에만 해당합니다. Tableau Online에는 적용할 수 없습니다.)	yes	뷰의 성능 기록을 시작합니다. 이 매개 변수를 URL 끝에 있는 세션 ID(:iid=<n>) 바로 앞에 추가합니다. 자세한 내용은 Tableau Server 도움말에서 성능 기록 만들기(Link opens in a new window)를 참조하십시오.	http://tabserver/views/Sales2013/Regions?:recordperformance=yes
:refresh	yes	Tableau Server 또는 Tableau Online의 최신 데이터를 사용하여 뷰를 렌더링합니다. 자세한 내용은 데이터 새로 고침 또는 자동 업데이트 일시 중지을 참조하십시오. 팁: 뷰를 지속적으로 새로 고치려면 웹 페이지의 <head> 섹션에 <meta http-equiv="refresh" content="#">을 추가합니다. 여기서 #은 새로 고침 간격(초)입니다.	http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:refresh=yes
:render	true; false; 숫자	클라이언트 쪽 렌더링이 사용으로 설정된 경우(기본값) 이 매개 변수를 false로 설정하면 세션에 대해 서버 쪽 렌더링을 사용하도록 설정됩니다. true로 설정하면 세션에 대해 클라이언트 쪽 렌더링이 강제 수행됩니다. 1에서 100까지의 숫자를 입력하여 복잡성 임계값을 설정할 수 있으며, 이 값을 넘으면 뷰가 서버에서 렌더링됩니다. 자세한 내용은 Tableau Server 도움말에서클라이언트 쪽 렌더링 정보(Link opens in a new window)를 참조하십시오.	http://tabserver/views/Date-Time/DateCalcs?:render=false
:revert	all; filters; sorts; axes; shelves	항목을 원래 상태로 되돌립니다.	http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:revert=all
:showAppBanner	false	모바일 웹 브라우저에서 “Tableau Mobile에서 열기” 배너를 숨깁니다.	http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:showAppBanner=false
:showAskData	false	내장된 뷰의 툴바에서 데이터에 질문 단추를 숨 깁니다. 기본적으로 데이터에 질문 단추가 표시됩니다.	http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:showAskData=false
:showShareOptions	true; false	내장된 뷰에 공유 옵션을 표시할지 여부를 제어합니다.	http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:showShareOptions=true
:showVizHome (Tableau Public만 해당)	yes; no	Tableau Public의 콘텐츠 탐색 인터페이스를 표시하거나 숨깁니다. 다른 웹 페이지에 비주얼리제이션을 내장할 경우 no로 설정하십시오.	https://public.tableau.com/en-us/s/gallery/what-emoji-say-about-music?:showVizHome=no
:subscriptions	no	내장된 뷰에서 구독 단추를 숨깁니다.	http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:subscriptions=no
:tabs	yes; no	탭을 표시하거나 숨깁니다.	http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:tabs=no
:toolbar	yes; no; top	이 매개 변수가 설정되지 않은 경우 기본적으로 아래쪽에 툴바가 표시됩니다. no인 경우 내장된 뷰에서 툴바가 제외됩니다. top인 경우 뷰 위쪽에 툴바가 배치됩니다.	http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:toolbar=no
:tooltip	yes; no	이 매개 변수가 설정되지 않은 경우 기본적으로 뷰에 도구 설명이 표시됩니다. no로 설정되어 있으면 내장된 뷰에서 도구 설명이 제외됩니다.	http://tabserver/views/workbookQ4/SalesQ4?:embed=yes&:tooltip=no

 

Reference

"태블로 help", Tableau, help.tableau.com/current/pro/desktop/ko-kr/default.htm

"[Tableau Tip] gif로 대시보드 구성하기", jaydata.tistory.com/94

"embed iframe in github markdown", www.javaer101.com/en/article/18379275.html