Tableau 웹 데이터 커넥터(WDC)를 사용하여 Tableau Desktop에서 자사 데이터를 연결해 보았습니다.
했던 일
Tableau의 풍부한 외부 데이터 연계 중 하나인 웹 데이터 커넥터(WDC)를 사용해 보았습니다.
기본적으로 튜토리얼 대로 진행하고 있습니다.
구성
· Tableau Desktop
· HTML 파일 1개
· 통신용 JavaScript 파일 1개
・데이터 반환용 API(별도 준비)
※WDC의 Authentication은 이용하지 않고, 자사 API의 인증 기구를 이용했습니다.
HTML 파일
거의 샘플과 같습니다만, WDC용 데이터를 동적으로 작성할 수 있도록 파라미터를 3개 준비하고 있습니다.
index.html<html>
<head>
<title>VALUES Data Connect Sample</title>
<meta http-equiv="Cache-Control" content="no-store" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>
<script src="values_wdc.js" type="text/javascript"></script>
</head>
<body>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4">
prease input your API Key:<input type="text" id="apikey" value=""><br>
param1:<input type="text" id="param1" value="xxxxxx"><br>
param2:<input type="text" id="param2" value="xxxxxxxxxxxxx"><br>
param3:<input type="text" id="param3" value="xxx"><br>
<button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;">Get VALUES Data!</button>
<br>
</div>
</div>
</div>
</body>
</html>
통신용 JavaScript 파일
이쪽도 샘플을 참고로, 취득한 데이터를 배열에 push 해 가면 좋을 뿐이므로 간단합니다.
API의 편의상 application/json에서 POST에서 요청 헤더 추가 등이 필요하므로 샘플과 다릅니다.
tableau.connectionName은 연결 이름이고 tableSchema.alias는 테이블 이름입니다.
이번과 같이 폼 데이터를 연계하는 경우, 후술하는 바와 같이 읽을 때
tableau.connectionData
라는 식으로 데이터를 연계해야합니다.
values_wdc.js var myConnector = tableau.makeConnector();
myConnector.getSchema = function (schemaCallback) {
var cols = [
//割愛
];
var tableSchema = {
id: "test_table",
alias: "xxxxxxxxxxxx",
columns: cols
};
schemaCallback([tableSchema]);
};
myConnector.getData = function (table, doneCallback) {
var args = JSON.parse(tableau.connectionData);
str_param1 = args.param1;
str_param2 = args.param2;
str_param3 = args.param3;
str_apikey = args.apikey;
rdata = {param1:str_param1,param2:str_param2, param3:str_param3}
$.ajax({
beforeSend: function(request) {
request.setRequestHeader("Content-Type", 'application/json');
request.setRequestHeader("API-KEY", str_apikey);
},
contentType: 'application/json',
type:'POST',
dataType: "json",
data:JSON.stringify(rdata),
url: '/xxxxxxx/wdctestapi',
success: function(resp) {
//Your code
var feat = resp.result,
tableData = [];
// Iterate over the JSON object
for (var i = 0, len = feat.length; i < len; i++) {
tableData.push({
// 割愛
});
}
table.appendRows(tableData);
doneCallback();
}
});
};
tableau.registerConnector(myConnector);
})();
$(document).ready(function () {
$("#submitButton").click(function () {
var param1 = document.getElementById('param1').value;
var param2 = document.getElementById('param2').value;
var param3 = document.getElementById('param3').value;
var apikey = document.getElementById('apikey').value;
tableau.connectionData = JSON.stringify({ param1: param1, param2: param2, param3: param3, apikey: apikey });
tableau.connectionName = "VALUES DataConnect Test";
tableau.submit();
});
});
Tableau Desktop에서 연결
이쪽도 간단하고, 데이터 소스로부터 「웹 데이터 커넥터」를 선택해, WEB 서버에 둔 상술한 HTML 파일을 지정하는 것 뿐입니다. 그러면 아래 이미지와 같은 브라우저가 시작되고 버튼을 누르면 다른 데이터 소스처럼 데이터를 가져올 수 있었습니다.
1회 이렇게 HTML이 끼워지기 때문에, 자유도나 확장성이 높아져, 이번은 파라미터로 지정한 항목에 의해, 반환되는 데이터가 동적으로 바뀌는 느낌으로 하고 있습니다.
이상, 쉽게 Tableau에 자사 데이터를 가져올 수 있음을 확인했습니다.
소감
getSchema로 데이터를 정의하고 getData로 데이터를 검색하는 매우 간단한 흐름으로 구축할 수 있는 것이 인상적이었습니다. 원래 데이터가 웹을 통해 오는 것은 역시 꽤 괜찮은 느낌이 있습니다.
한편, WDC 경유로 차례차례로 데이터 세트를 추가해 UNION 해 나가는・・・라고 하는 것을 생각했습니다만 현시점에서는 Union에는 대응하지 않는다 과 같이 보입니다. 이것이 가능하면 더 Tableau와 Web이 연결되지 마라 ~라고 생각하기 때문에 희미하게 기대하고 있습니다.
Reference
이 문제에 관하여(Tableau 웹 데이터 커넥터(WDC)를 사용하여 Tableau Desktop에서 자사 데이터를 연결해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yuji_saito/items/db42e5f110756dbf1078
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
· Tableau Desktop
· HTML 파일 1개
· 통신용 JavaScript 파일 1개
・데이터 반환용 API(별도 준비)
※WDC의 Authentication은 이용하지 않고, 자사 API의 인증 기구를 이용했습니다.
HTML 파일
거의 샘플과 같습니다만, WDC용 데이터를 동적으로 작성할 수 있도록 파라미터를 3개 준비하고 있습니다.
index.html
<html>
<head>
<title>VALUES Data Connect Sample</title>
<meta http-equiv="Cache-Control" content="no-store" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>
<script src="values_wdc.js" type="text/javascript"></script>
</head>
<body>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4">
prease input your API Key:<input type="text" id="apikey" value=""><br>
param1:<input type="text" id="param1" value="xxxxxx"><br>
param2:<input type="text" id="param2" value="xxxxxxxxxxxxx"><br>
param3:<input type="text" id="param3" value="xxx"><br>
<button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;">Get VALUES Data!</button>
<br>
</div>
</div>
</div>
</body>
</html>
통신용 JavaScript 파일
이쪽도 샘플을 참고로, 취득한 데이터를 배열에 push 해 가면 좋을 뿐이므로 간단합니다.
API의 편의상 application/json에서 POST에서 요청 헤더 추가 등이 필요하므로 샘플과 다릅니다.
tableau.connectionName은 연결 이름이고 tableSchema.alias는 테이블 이름입니다.
이번과 같이 폼 데이터를 연계하는 경우, 후술하는 바와 같이 읽을 때
tableau.connectionData
라는 식으로 데이터를 연계해야합니다.
values_wdc.js
var myConnector = tableau.makeConnector();
myConnector.getSchema = function (schemaCallback) {
var cols = [
//割愛
];
var tableSchema = {
id: "test_table",
alias: "xxxxxxxxxxxx",
columns: cols
};
schemaCallback([tableSchema]);
};
myConnector.getData = function (table, doneCallback) {
var args = JSON.parse(tableau.connectionData);
str_param1 = args.param1;
str_param2 = args.param2;
str_param3 = args.param3;
str_apikey = args.apikey;
rdata = {param1:str_param1,param2:str_param2, param3:str_param3}
$.ajax({
beforeSend: function(request) {
request.setRequestHeader("Content-Type", 'application/json');
request.setRequestHeader("API-KEY", str_apikey);
},
contentType: 'application/json',
type:'POST',
dataType: "json",
data:JSON.stringify(rdata),
url: '/xxxxxxx/wdctestapi',
success: function(resp) {
//Your code
var feat = resp.result,
tableData = [];
// Iterate over the JSON object
for (var i = 0, len = feat.length; i < len; i++) {
tableData.push({
// 割愛
});
}
table.appendRows(tableData);
doneCallback();
}
});
};
tableau.registerConnector(myConnector);
})();
$(document).ready(function () {
$("#submitButton").click(function () {
var param1 = document.getElementById('param1').value;
var param2 = document.getElementById('param2').value;
var param3 = document.getElementById('param3').value;
var apikey = document.getElementById('apikey').value;
tableau.connectionData = JSON.stringify({ param1: param1, param2: param2, param3: param3, apikey: apikey });
tableau.connectionName = "VALUES DataConnect Test";
tableau.submit();
});
});
Tableau Desktop에서 연결
이쪽도 간단하고, 데이터 소스로부터 「웹 데이터 커넥터」를 선택해, WEB 서버에 둔 상술한 HTML 파일을 지정하는 것 뿐입니다. 그러면 아래 이미지와 같은 브라우저가 시작되고 버튼을 누르면 다른 데이터 소스처럼 데이터를 가져올 수 있었습니다.
1회 이렇게 HTML이 끼워지기 때문에, 자유도나 확장성이 높아져, 이번은 파라미터로 지정한 항목에 의해, 반환되는 데이터가 동적으로 바뀌는 느낌으로 하고 있습니다.
이상, 쉽게 Tableau에 자사 데이터를 가져올 수 있음을 확인했습니다.
소감
getSchema로 데이터를 정의하고 getData로 데이터를 검색하는 매우 간단한 흐름으로 구축할 수 있는 것이 인상적이었습니다. 원래 데이터가 웹을 통해 오는 것은 역시 꽤 괜찮은 느낌이 있습니다.
한편, WDC 경유로 차례차례로 데이터 세트를 추가해 UNION 해 나가는・・・라고 하는 것을 생각했습니다만 현시점에서는 Union에는 대응하지 않는다 과 같이 보입니다. 이것이 가능하면 더 Tableau와 Web이 연결되지 마라 ~라고 생각하기 때문에 희미하게 기대하고 있습니다.
Reference
이 문제에 관하여(Tableau 웹 데이터 커넥터(WDC)를 사용하여 Tableau Desktop에서 자사 데이터를 연결해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yuji_saito/items/db42e5f110756dbf1078
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Tableau 웹 데이터 커넥터(WDC)를 사용하여 Tableau Desktop에서 자사 데이터를 연결해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yuji_saito/items/db42e5f110756dbf1078텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
