[Tableau] JavaScript API “Tableau” ビューの生成および破棄

車輪開発大好きおたいがです。こんにちは。ご無沙汰しております。( 挨拶 )

案件で Tableau JavaScript API を使用することになったので、実務を考慮した How To を段階的にまとめていきたいと思います。

Tableau JavaScript ライブラリの取得 ( 参照 )

現行のライブラリは下記から取得することができます。( 2015 年 7 月 13 日時点の最新 )

http://online.tableau.com/javascripts/api/tableau-2.0.0.min.js
http://public.tableau.com/javascripts/api/tableau-2.0.1.min.js

"Tableau" ビューの生成

まず、ビューの埋め込み対象となる DOM を用意します。

<div data-js="tableau-root" style="display: block;"></div>

ビュー対象となる DOM を jQuery で参照させてビューを生成します。( Tableau JavaScript API の Viz オブジェクトをインスタンス化することでビューが生成されます )

(function(){
    /**
     * Viz オブジェクト
     * @property viz
     * @type {Object}
     */
    var viz;
    /**
     * WorkBook オブジェクト
     * @property workbook
     * @type {Object}
     */
    var workbook;
    /**
     * アクティブな Sheet オブジェクト
     * @property activeSheet
     * @type {Object}
     */
    var activeSheet;
    /**
     * Viz クラスの初期化処理
     * @method initializeViz
     */
    var initializeViz = function () {
        var placeholderDiv = $('[data-js=tableau-root]')[0];
        // Tableau public の場合
        // http://public.tableau.com/views/≪workbookName≫/≪viewName≫
        var url = 'http://public.tableau.com/views/cm-awsmembers-blogposts/sheet0';
        var options = {
            'width'              : 800,
            'height'             : 640,
            'hideTabs'           : true,
            'hideToolbar'        : true,
            'onFirstInteractive' : function () {
                workbook = viz.getWorkbook();
                activeSheet = workbook.getActiveSheet();
            }
        };
        viz = new tableau.Viz(placeholderDiv, url, options);
    };
    $(initializeViz);
}());

"Tableau" ビューの破棄

Viz オブジェクトインスタンスの dispose() メソッドをコールすることで、画面からビューが削除されます。

viz.dispose();

サンプル

Plnkr 上で Tableau JavaScript API を使用して、しんや氏が作成したビューを表示させてみました。

まとめ

Tableau JavaScript API を使用してビューの生成 / 破棄を制御することによって、複数のビュー表示切替を行儀よく処理することができます。仮に SPA のような Web アプリケーションであったとしても、安全に取り扱えそうです。