はじめてのTableauで外部ページからグラフを呼び出すまで

初めてtableauに触ったので覚えたことなどをメモしつつ、任意のページでjs APIからグラフを呼び出してみよう。

Tableau?

読み方:タブロー
言語:フランス語
できること:データビジュアライゼーションが簡単にできる。
データはエクセルやらCSVやらJSONやらいろんなデータが読み込める。
ACCESSとかEXCELとかよりすごいぞ!

Tableauにはいろんな種類がある

Tableau Server…サーバーにインストールするタイプ。ちょっとした事はwebからも変更できるけど、基本的にデスクトップにアプリケーションをDLしてそこからデータ操作。
Tableau Public…作ったデータビジュアライゼーションを世界と共有できる。デスクトップにアプリケーションをDLしてそこからデータ操作。無料で使える。
Tableau Online…クラウド版。web上で操作が完結。

社で依頼されて触ったので私が初めて触った環境はTableau Server
学んだことをまとめようとTableau Publicでアカウントを作ってみたので、この記事の動作確認はServerとPublicのみです。

jsで任意のページに呼び出した結果

シンプルに呼び出したものがこちら
地獄のような見づらいグラフが出ていますね。これは私のグラフづくりのセンスの問題なのでタブローのせいじゃないです。
最近「Githubを積極的に使おう運動」をはじめましたので、その一環でgistでコードを表示します。うまくできるかな?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tableau js API test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//online.tableau.com/javascripts/api/tableau-2.0.0.min.js"></script>
<script type="text/javascript">
var viz;
var sheet;
var current_sheet;
function initViz() {
var placeholderDiv = $("#tableau-root");
var url = 'https://public.tableau.com/views/pokemon_28/dashboard';
options = {
width: "1400px",
height: "600px",
hideTabs: true,
hideToolbar: true
};
viz = new tableau.Viz(placeholderDiv, url, options);
}
</script>
</head>
<body onload="initViz();">
<div id="tableau-root"></div>
</body>
</html>

こちら今はただ表示しているだけなので、こちらをかっこよくカスタムしていくのが着地点です。つづきは長くなるので、別の記事で。

色々やってみた際の壁と解決策

誰もやらなさそうな凡ミス集です。

壁1:403 Forbiddenが…

js APIで呼び出そうとしたら以下のようなエラーが…。

http://public.tableau.com/vizportal/api/web/v1/auth/signin?path=... 403 (Forbidden)

URL、間違ってた。
http://public.tableau.com/views/{workbookName}/{viewName}
こちらのviewNameに存在しないviewを指定していましたね。
ちなみにこの場合、Vizが出るはずの場所に403 Forbiddenの表示が出るんだけど、その際にTableauがnginx/1.8.1で動いている事が確認できるぞ。

壁2:getUnderlyingDataAsyncがない…

Tableau 10から導入されたというfunctionが動かない。なぜだ。
と思っていたら呼び出しているjsが違ったのであった。
参考:https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_concepts_get_API.htm?Highlight=tableau%20public%20js%20api
本来tableau-2.min.jsを呼び出すべきところを、tableau-2.0.0.min.jsを呼び出していたのでした。
8系まではv8なのに9.0から2.0.0となり、9.1から2になっているので注意ですな。


Profile picture

ぴーやま
プログラミングを嗜んでします。中華料理で出てくるたまごふわふわのコーンスープが好きです。