ダッシュボードのボタンで最近数日の記録を確認

1.問題の説明

ダッシュボードで指定区間の日付データを検索する時に、対応するボタン（パラメータパネルにはありません）をクリックして、最新のデータを検索できます。例えば、「過去7日間」、「過去14日間」などです。

下図の通りです。

2.ソリューション

開始日と終了日の2つの日付ウィジェットを直接にbodyにドラッグし、ボタンウィジェットを追加します。

ボタンウィジェットにJSクリックイベントを設定し、ボタンをクリックした後に開始時刻ウィジェットに値を設定し、データセットのSQL文に日付を渡し、対応するデータを検索します。

1.帳票設計

1.ダッシュボードを新規作成し、データセットds1を追加します。SQL検索文は次の通りです。

2.下図のようにダッシュボードスタイルを設計します。

3.下図のように折れ線グラフにデータをバインドします。

4.下図のように、開始時刻の日付ウィジェットを選定し、ウィジェット名をstarttimeに変更し、既定の日付ウィジェット値を設定します。

5.下図のように、終了時刻の日付ウィジェットを選定し、ウィジェット名をendtimeに変更し、既定の日付ウィジェット値を設定します。

6.「過去7日間」ボタンを例に、JSクリックイベントを追加します。「過去 14 日間」ボタンも同様に設置し、開始時刻を定義する数式を変更すればできます。

JS コードは次の通りです。

var K1='${=date(2005,1,22)-7}';//開始時刻を定義します
//alert(K1);
_g().getWidgetByName("starttime").setValue(K1);//K1値を開始時刻ウィジェットに設定します
_g().getWidgetByName("starttime").fireEvent("afteredit");//開始ウィジェットの編集後イベントをトリガーします

2.効果のプレビュー

1.PC端末

ダッシュボードを保存し、「PC端末プレビュー」をクリックすると、1.1節のような効果が得られます。

2.モバイル端末

今日を終了日にし、その前の7日間を読み込む機能は、どのように設定しますか。

上の例のボタンのクリックイベントのコードを次のように置換すればよいです。

var mydate = new Date(); //日付オブジェクトを作成し、戻り値は現在の日付（時、分、秒を含む）です
var K1 = new Date();//過去7日間の日付を処理するため
K1.setDate(K1.getDate()-7); //日付オブジェクトの「日」を当時-7に設定します
//alert(K1);
_g().getWidgetByName("starttime").setValue(K1);//K1値を開始時刻ウィジェットに設定します
_g().getWidgetByName("starttime").fireEvent("afteredit");
_g().getWidgetByName("endtime").setValue(mydate);//K1値を終了時刻ウィジェットに設定します
_g().getWidgetByName("endtime").fireEvent("afteredit");//開始ウィジェットの編集後イベントをトリガーします