Tableau 10 新機能 : JavaScript API の改善 #tableau

Tableau 10 新機能紹介シリーズ、当エントリは『JavaScript API improvements』に関する、正式リリース前の先取り内容紹介となります。Tableau Public では、新規に追加された 10.0 系のメソッドやクラスが既に使用できるようになっているので、使用方法とサンプルを紹介します。

• Coming Soon
• Tableau 10 新機能紹介 ｜ シリーズ ｜ Developers.IO

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

Tableau Public で動作確認ができる…ということで、現行のライブラリは下記から取得することができます。いつの間にか tableau-2.js が 10.0 系の API を使用することができる tableau-2.1.0.js を読み込むようになっていました。( 2016 年 6 月 14 日時点の最新 )

https://public.tableau.com/javascripts/api/tableau-2.js
https://public.tableau.com/javascripts/api/tableau-2.1.0.js

リファレンス

現在、英語版のみ 10.0 系のリファレンスが用意されています。
http://onlinehelp.tableau.com/v10.0/api/js_api/en-us/JavaScriptAPI/js_api_ref.htm

Sheet クラスの新 API

Sheet クラスに getSummaryDataAsync(), getUnderlyingDataAsync() メソッドが追加されました。これらのメソッドは、Tableau Desktop の データの表示 機能で取得できるサマリー データと参照元データを Web 上の Tableau ビューから取得する API です。

メソッド名	戻り値	詳細
getSummaryDataAsync(options)	Promise<DataTable>	現在表示されているシートで使用されているフィールドのサマリー データを Promise オブジェクトを介して返す
getUnderlyingDataAsync(options)	Promise<DataTable>	現在表示されているシートで使用されているフィールドの参照元データを Promise オブジェクトを介して返す

メソッドのオプション

前述の各メソッドのオプション (options) のパラメータは以下のとおりです。

プロパティ名	型	詳細
maxRows	number	取得レコード数 ( 0 の場合は全件取得 )
ignoreAliases	boolean	「別名を表示」を無視 する / しない を示すブール値
ignoreSelection	boolean	ビュー内グラフの選択状態を する / しない を示すブール値
includeAllColumns	boolean	「すべてのフィールドを表示」の ON/OFF を示すブール値

実装例

var options = {
  'maxRows'           : 10,    // 表示行数 ( 0 === ALL )
  'ignoreAliases'     : false, // 「別名を表示」  無視する / 無視しない
  'ignoreSelection'   : true,  // ビュー内グラフの選択状態を 無視する / 無視しない
  'includeAllColumns' : false  // 「すべてのフィールドを表示」 ON/OFF
};

workbook = viz.getWorkbook();

activeSheet = workbook.getActiveSheet();

var onSuccess = function(dataTable) {
  //TODO:
};

var onFault = function() {
  //TODO:
};

activeSheet
  // .getSummaryDataAsync(options) //「サマリー」データ取得
  .getUnderlyingDataAsync(options) //「参照元」データ取得
  .then(onSuccess, onFault);

DataTable クラス

getSummaryDataAsync(), getUnderlyingDataAsync() メソッドのいずれかを使用して返されるオブジェクトは、API のソースを読む限り、DataTable クラス的な名前のオブジェクトで、以下のメソッドが実装されています。

ss.initClass($tableauSoftware_DataTable, $asm, {
  getName: function DataTable$GetName() {
    return this.$impl.get_name();
  },
  getData: function DataTable$GetData() {
    return this.$impl.get_rows();
  },
  getColumns: function DataTable$GetColumns() {
    return this.$impl.get_columns();
  },
  getTotalRowCount: function DataTable$GetTotalRowCount() {
    return this.$impl.get_totalRowCount();
  }
});

メソッド名	戻り値	詳細
getName()	string	取得したデータテーブル種別を示す文字列を返す 'Summary Data Table' ( サマリデータ ), 'Underlying Data Table' ( 参照元データ )
getTotalRowCount()	number	取得したデータテーブルのレコード数を返す
getColumns()	Array<Column>	取得したデータテーブルのカラム情報を保持した配列を返す
getData()	Array<Array<Object>>	取得したデータテーブルのレコード情報を保持した配列を返す

サンプル

しんや氏サンプルが使用している参照元データの一部をビューの外に出力するサンプルを作成してみました。

まとめ

Tableau JavaScript API の新機能について触れてみました。10.0 系以前の Tableau サーバでは取得できなかったビューのデータがまとめて取得できるようになったので、今まで以上に Tableau ビューだけでは表現しきれないような可視化コンテンツを作ることができるようになったのではないかと思います。