Tableau DesktopでNext・Backボタンを実装してチャートを切り替える方法

Tableauを含めたBIツールは、データを用いて利用者の意思決定を支援するためのものです。
その意思決定をより強力にサポートする方法の1つに、データをただ羅列するのではなく、順序立てて理解できるように見せる「データストーリーテリング」があります。
Tableau Desktopには、複数のシートやダッシュボードを順番に表示する「ストーリー」機能もあるため、単純に画面を順番に見せるだけであれば、その機能を利用する方が簡単です。
一方で、ボタンのデザインや配置を自由に調整したい場合や、1つのダッシュボード内で一部のチャートだけを切り替えたい場合には、ストーリー機能だけでは実現しにくいことがあります。
そこで本記事では、パラメーターアクションを利用して、ダッシュボード内に独自の「Next」「Back」ボタンとページ選択ボタンを実装し、ストーリー性をもたせた画面遷移を実現する方法をご紹介します。

■目標物

目指す画面イメージは以下の通りです。

下側にあるボタンで3つの画面を切り替えられるようにしています。ロジックを簡単に説明すると、3つの画面にそれぞれidをもたせて、ボタンではパラメータを変動させます。
そのパラメータに合致するidをもつ画面を表示させる、というイメージです。
以降では、ダッシュボードの作成方法について順に説明していきます。
データソースはサンプルスーパーストアを使用します。

■切り替えるチャートの作成

ボタンより上側の、切り替わる対象のチャートを作成していきます。以下のイメージを目指して作成します。

①パラメータ「ダッシュボードid」を作成
まず、ボタンで切り替えるパラメータを作成します。ダッシュボード側で切り替える画面は3つなので、1, 2, 3のいずれかの値をもつように設定します。

②計算フィールド「1ページ目表示」を作成
例えば1ページ目は、パラメータの値が1なら表示する、といったフィルターをかけるための計算フィールドを作成します。

③計算フィールド「1ページ目表示」をフィルターに適用
先ほど作成した計算フィールドをフィルターに適用します。

2ページ目、3ページ目も同様に作成します。
※2ページ目はパラメータが2のとき、3ページ目はパラメータが3のときに表示されるようにしています。

■「Next」「Back」ボタンの作成

次に、パラメータの値を増減させるボタンを作成します。
「Next」を押せばパラメータの値が1増える、「Back」を押せばパラメータの値が1減る、といった挙動を目指します。
目指すイメージは以下の通りです。（「Next」ボタン）

①計算フィールド「進むボタンのパラメータ」を作成
パラメータの値を1増やすための計算フィールドを作成します。この計算フィールドを詳細マークに配置することで、ボタンをクリックしたときにパラメータの値を1増やす、というアクションを設定することができます。

※戻るボタンの場合は [ダッシュボードid] – 1

②計算フィールド「ダミー1」「ダミー2」を作成
ボタンを連続で選択できるようにするための計算フィールドを作成します。Tableauの仕様上一度クリックしたシートは選択状態になり、連続して値の増減ができないため、以下の計算フィールドが必要になります。

③作成した計算フィールドを詳細マークに配置
計算フィールド「進むボタンのパラメータ」「ダミー1」「ダミー2」を詳細マークに配置します。このとき、「進むボタンのパラメータ」については最小値を選択します。（合計を避ける。最大値でも平均値でも可）

④計算フィールド「進むボタン」を作成
ボタンに表示させる文字列（今回は「Next」）をもつ計算フィールドを作成します。

※戻るボタンの場合は ‘Back’

⑤ 「進むボタン」 をテキストマークに配置
④で作成した計算フィールドをテキストマークに配置します。

■ ●ボタンの作成

以下の赤枠のボタンを作成していきます。
今見てるのは何枚目の画面かを色で識別できるかつ、押下すると該当の画面を表示できるようなボタンです。

目指すイメージは以下の通りです。

①計算フィールド「1ページ目ボタンのパラメータ」を作成
パラメータに1を代入するための計算フィールドを作成します。この計算フィールドを詳細マークに配置することで、ボタンをクリックしたときにパラメータの値を1とする、というアクションを設定することができます。

※2ページ目ボタンなら2、3ページ目ボタンなら3を記入

②作成した計算フィールドを詳細マークに配置
計算フィールド「1ページ目ボタンのパラメータ」と、前工程で作成した「ダミー1」「ダミー2」を詳細マークに配置します。このとき、「1ページ目ボタンのパラメータ」については最小値を選択します。

③形状を円にする
マークカードのドロップダウンより、円を選択します。

④計算フィールド「1ページ目ボタンの色」を作成
該当の画面が表示されていれば黒色、そうでなければグレーで表示させるための計算フィールドです。

⑤「1ページ目ボタンの色」を色マークに配置
「1ページ目ボタンの色」を色マークに配置します。その後、パラメータを変えながら、色の編集よりパラメータが1のときは黒、そうでないときはグレーを割り当てます。

■ダッシュボードアクションの設定

ここからはダッシュボードの作成に入っていきます。各チャートを任意の場所に配置し、ボタンを押下したときのアクションを設定していきます。

■「Next」ボタンのアクション設定

①「ダッシュボード」タブより「アクション」を選択
まず「Next」ボタンを押下したときのアクションを設定します。「ダッシュボード」タブより「アクション」を選択し、「アクションの追加」をクリックします。

②パラメーターの変更
次に「パラメーターの変更」をクリックします。

以下のように設定します。ソースフィールドは「最小値(進むボタンのパラメータ)」です。

※ソースシートとソースフィールドに指定する項目は、NextボタンかBackボタンかで変わるので注意

③フィルター
今度は「アクションの追加」より「フィルター」をクリックします。

以下のように設定します。 これはボタンを連続で選択できるようにするための設定です。
ダミー2にダミー1の値が入ることにより選択が解除されます。選択項目をクリアした結果を「すべての値を表示」にしているため、何も選択されていない状態へ戻ります。

※ソースシートには「進むボタン」を指定している。またソースシートとターゲットシートに指定する項目は、NextボタンかBackボタンかで変わるので注意

■ ●ボタンのアクション設定

①「ダッシュボード」タブより「アクション」を選択
「Next」ボタンのときと同様、「ダッシュボード」タブより「アクション」を選択し、「アクションの追加」をクリックします。

②パラメーターの変更
以下のように設定します。 ソースフィールドは「最小値(1ページ目ボタンのパラメータ)」です。

※ソースシートとソースフィールドに指定する項目は、どのページに対応するボタンかで変わるので注意

③フィルター
以下のように設定します。 「Next」ボタンと同様に、連続で選択できるようにするための設定です。

※ソースシートとターゲットシートに指定する項目は、どのページに対応するボタンかで変わるので注意

これで、表示させるチャートを切り替えるボタンを実装したダッシュボードは作成完了となります。
用意するワークシートや計算フィールドも多く、簡単に実装できるものではないですが、「Next」や「Back」というボタンを用意してストーリー性をもたせることで、利用者によりスムーズな意思決定を促すことができる、おもしろい機能だと思います。