JavaScript活用例①：日付ピッカー

このコンテンツでは、日付ピッカーを作成する方法について説明しています。
本コンテンツで利用したバージョンは、Spotfire Analyst 14.0です。ご利用環境によって、一部画面構成が異なる場合がありますので、ご了承ください。

はじめに
日付ピッカーの作成手順

はじめに

ダッシュボードのカスタマイズをすることで、ユーザーにとってより分かりやすく・見やすい画面を作成できます。本コンテンツでは、HTML/JavaScriptを用いて、テキストエリアの入力フィールドにおいて日付をカレンダー形式で入力させる日付ピッカーをご紹介します。

日付ピッカーとは

日付ピッカーはユーザーがカレンダーから日付を選択できるインターフェースです。日付を選択する際、小さなポップアップカレンダーからマウスで簡単に日付の設定ができます。また、カレンダーで選択した日をプロパティコントロールと紐づけることで、設定した期間のデータのみを表示することができます。

ダッシュボードの完成形・本コンテンツで使用するひな形は、以下のリンクよりダウンロード可能です。
・【ひな型】date_picker.dxp
・【完成形】date_picker.dxp

日付ピッカーの作成手順

手順①：日付ピッカーを作成するテキストエリアを追加

オーサリングバーの「ビジュアライゼーションタイプ」から「テキストエリア」を追加します。

手順②：HTMLを編集

テキストエリア上で右クリックして「HTMLを編集」を選択し、以下のHTMLスクリプトを入力します。下図「HTMLを編集」画面の緑色で表示されている文字はコメントアウトに該当するため、入力は必須ではありません。

【HTML】


              <!--JavaScriptと連動させるためのidタグ-->

              <span id="date1">

              

              <!--文書のプロパティを表すSpotfire独自の表現-->

              開始日：

              </span>

手順③：「開始日」を表す文書のプロパティを作成

「HTMLを編集」ウィンドウの上部にある「プロパティコントロールの挿入」> 「入力フィールド」の順に選択 > 「プロパティコントロール」ウィンドウ画面で「新規」をクリックします。

手順④：「開始日」を表す文書のプロパティを作成

「新しいプロパティ」ダイアログにおいて、以下を設定し、「OK」をクリックします。

プロパティ名：任意の名前（今回はStartDate）
データ型：Date

その後、「プロパティコントロール」ウィンドウ右下にある「タイプ」で日付の表示形式を「年-月-日」に設定して「OK」をクリックします。

手順⑤：「終了日」を表す文書のプロパティを作成

手順②-④と同様の手順を行い、終了日に該当する以下のHTMLスクリプトを追加します。

【HTML】


              <!--改行-->

              <BR></BR>

              

              <!--JavaScriptと連動させるためのidタグ-->

              <span id="date2">

              

              <!--文書のプロパティを表すSpotfire独自の表現-->

              終了日：

              </span>

手順⑥：カレンダーを表示するJavaScriptを追加

「HTMLを編集」ウィンドウから「JavaScriptを挿入」ウィンドウを開き、「新規」を選択 > 「新規スクリプト」ウィンドウで以下を設定し、「OK」をクリックします。

スクリプト名：任意の名前（今回はDatePicker）
スクリプト：以下JavaScriptを記載「スクリプト名」（任意）

を入力し、「スクリプト」に以下のスクリプトを書いて「OK」をクリックします。

【JavaScript】


              //HTMLドキュメントの中で、IDがdateの要素内にあるinput要素を選択します。この選択された要素が変数dateInputに格納されます。

              dateInput1 = document.querySelector("#date1 input")

              dateInput2 = document.querySelector("#date2 input")

              

              //input要素のデータ型をdateに設定

              dateInput1.type="date";

              dateInput2.type="date";

              

              //input要素の値が変更されたときに実行される関数。

              dateInput1.onchange = ()=>{dateInput.focus();dateInput.blur();}

              dateInput2.onchange = ()=>{dateInput.focus();dateInput.blur();}

手順⑦：日付ピッカー作成

「JavaScriptを挿入」ウィンドウで「OK」をクリック > 「HTMLを編集」ウィンドウ左上にある保存アイコンをクリックすると、日付ピッカーが作成できます。

手順⑧：日付ピッカーとグラフの連動

日付ピッカーで選択した範囲のデータのみ表示させる設定をします。
日付ピッカーと連動させたいグラフ上で右クリックしてプロパティ > 「データ」タブ内の
「式を利用したデータの制限」の右側にある「編集」をクリック > 「式を使用したデータの制限」ウィンドウの式欄に以下の式を入力して「OK」をクリックして連動設定は完了です。

式：([timestamp]>=DocumentProperty("StartDate")) And ([timestamp]<=DocumentProperty("EndDate"))

※以下は該当のカラムまたはプロパティ名に変更してください。
[timestamp]：日付を表すカラム
"StartDate” ：開始日を表す文書のプロパティ名
“EndDate” ：終了日を表す文書のプロパティ名