Tableau Dashboardをwebに埋め込む技術(Tableau Javascript APIとか)

この記事はちゅらデータアドベントカレンダーの10日目の記事です。

概要

皆さんはTableauでデータ可視化ダッシュボードを作ったことなどありますか？
Tableauだけでダッシュボードを作成することはもちろん可能なのですが、複数間での画面遷移や、tableauの機能にはない実装をしようとすると、web上にtableau Dashboardを配置し、webからコントロールする必要が出てきます。
本記事では、webにTableau Dashboardを埋め込む際に必須なTableau Javascript APIの紹介及び、webに埋め込む際のTipsを紹介いたします。
また筆者環境ではVue.js環境にtableau dashboardを埋め込んでいます。

※ ここで言うTableau Dashboardとは、tableau server上やTableau Onlineに実装しているDashboardのことを想定していて、URLからアクセスできるものを想定しています。

Tableau Javascript APIの紹介とwebへの埋め込み

tableau javascript apiはwebに描画したtableau dashboardをjavascriptからコントロールできるようにするためのapiで以下のような機能があります。

• Dashboardの描画
• Filter条件の変更
• PDF、画像、クロス集計表、データの出力
• パラメータの更新
• ワークブックタブの切り替え
• ユーザがtableau dashboardを操作した際のイベント定義

上記などの機能があります。

詳しくは以下チュートリアルを御覧ください。

チュートリアルで紹介されているwebに埋め込むコード

実際にwebに埋め込む際は以下のように実装していきます。

function initializeViz() {
  
  var placeholderDiv = document.getElementById("tableauViz");
  var url = "https://public.tableau.com/views/WorldIndicators/GDPpercapita";
  var options = {
    width: placeholderDiv.offsetWidth,
    height: placeholderDiv.offsetHeight,
    hideTabs: true,
    hideToolbar: true,
    onFirstInteractive: function (obj) {
      // 受け取った値に応じてsize変更する
      obj.$viz.setFrameSize(viewsize[0], viewsize[1]);
      workbook = obj.$viz.getWorkbook();
      activeSheet = workbook.getActiveSheet();
      // ダッシュボード全体のパラメータを変更
      workbook.changeParameterValueAsync(
        "year_set_parameter",
        targetyear_to
      ).then(console.log('parameter set with' + filters.targetyear_to))
      // filter定義の変更
      activeSheet.applyFilterAsync(
        "Year", year_arr, tableau.FilterUpdateType.REPLACE
      ).then(function(res){console.log(res)}, function(err){console.log(err)})
    }
  };
  this.viz = new tableau.Viz(placeholderDiv, url, options);
}      

上記のコードは初期表示だけに対応しますが、webからTableauのfilterやパラメータなどを更新したい場合もあるかと思います。
そのためvizオブジェクトは後から更新できるように、ダッシュボードごとに管理しておく必要があります。
また筆者環境ではVue.jsを使用しているため、コンポーネントごとで管理しています。

webにダッシュボードを配置する際のTips集

webに複数のダッシュボードを同時に貼り付けたのですが、いくつかのダッシュボードが全く表示されない

以下のように、setFrameSizeを実行することで筆者環境では解決されました。

obj.$viz.setFrameSize(viewsize[0], viewsize[1]);

Tableau Dashboard上では横に並べてDashboardを作っているが、webに埋め込むとレイアウトがずれてグラフが縦に並んでしまう

表示するURLに明示的に:device=desktopというオプションをつけることで解決しました。
【変更前】https://public.tableau.com/views/WorldIndicators/GDPpercapita?:language=ja&:display_count=y&:origin=viz_share_link
【変更後】https://public.tableau.com/views/WorldIndicators/GDPpercapita?:language=ja&:display_count=y&:device=desktop&:origin=viz_share_link

まとめとか、所感とか

webにTableauを埋め込むということをここ２ヶ月ほどやっておりますが、正直あまりおすすめできるものではありません。
Tableau Javascript APIも開発時のエラーとしてほとんど何の情報も出ないのでデバッグ作業がしんどかったり、そもそもTableauがgit管理などできるようなものではないので管理が大変だったりします。
おすすめはしないですが、必要に迫られた場合は参考にしていただければ幸いです。