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

2017/04/22

技術

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>

view raw tableau js API test.html hosted with ❤ by GitHub

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

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

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

壁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になっているので注意ですな。

	<!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>