ダッシュボード

概要

ダッシュボードは、レポートデータをエリアに分けて、一つの画面上に表示する方法です。このレイアウトは、印刷したりPDFにエクスポートしたりする必要がない、非常に動的でインタラクティブなデータ視覚化を作成するのに役立ちます。

このチュートリアルでは、ダッシュボードを使った売上レポートを作成する手順を説明します。

新しいダッシュボードを作成する
レポートをOData APIエンドポイントにバインドする
ODataの$selectクエリーオプションを使用して、取得するデータの量を減らす
計算フィールドを追加する
レポートパラメータを作成する
Listデータ領域とApply Parametersアクションを使用して、実行時のフィルタパネルを作成する
実行時にデータをフィルタするために、TableおよびChartを追加する
スクロール可能なコンテナを作成する

前提条件

次の内容は、デザイナアプリを使用することを前提としています。また、データソースとして利用するMescius Data Serviceにアクセスするには、インターネット接続環境が必要です。

新しいレポートを作成する

デザイナアプリにて、［ファイル］メニューをクリックし、［ダッシュボード］ を選択して、新しいレポートを作成します。

新しいレポートを作成する方法

CreatingNewReport

データを連結する

データ連結は、レポートと表示されるレポートのデータの間に接続を確立します。このチュートリアルでは、Contosoという架空の組織の販売データを含むMescius Demo OData APIを使用します。

データソースを追加する

データベースに接続するには、Contoso OData APIのルートURL（https://demodata.mescius.jp/contoso/odata/v1）を使用できます。その中に、/DimCustomers、/DimStores、/DimProductsなどのエンドポイントで表示される複数のテーブルがあります。このようなデータベースに接続するためのレポートデータソースを作成するには、次の手順を実行します。

データタブを開き、［データソース］ の横の ［+ 追加］ アイコンをクリックします。
［データソースの編集］ ダイアログで、［名前］ フィールドに 「Contoso」 と入力し、［エンドポイント］ フィールドに 「https://demodata.mescius.jp/contoso/odata/v1」 と入力します。
［変更を保存］ ボタンをクリックします。

データソースを追加する方法

BandedList_datasource

データセットを追加する

データセットは、データソースの1つ以上のエンドポイントを表します。ダッシュボードを使った売上レポートに対しては、上記で追加したContosoデータソースの/DimPromotionsおよび/FactSalesのエンドポイントからデータにアクセスする必要があります。

以下の手順に従って、Promotionsデータセットを追加します。

［データ］ タブをクリックして、「Contoso」 データソースの横の ［+］ アイコンをクリックします。
［新規データセット］ ダイアログで、［名前］ フィールドに 「Promotions」 と入力し、［Uri/パス］ フィールドに 「/DimPromotions」 と入力し、［JSONパス］ フィールドに 「$.value.*」 と入力します。
デフォルトでは、各 「Promotions」 レコードには14個のフィールドが含まれていますが、全てのフィールドが必要ではありません。以下のように、クエリパラメータを使用してODataの$selectクエリーオプションを適用することで、取得されるフィールドを制限します。
［パラメータ］ セクションの右側にある ［+］ アイコンをクリックします。
新しく追加された ［パラメータ］ フィールドに 「$select」 と入力します。
［値］ フィールドに、「PromotionKey, PromotionType」 と入力します。
［検証］ ボタンをクリックします。
［データベースフィールド］ セクションに ［2項目］ のテキストが表示されていることを確認します。
［変更を保存］ ボタンをクリックします。

Promotionsデータセットデータセットを追加する方法

AddingDataSetpromotions

次に、Salesデータセットを追加します。

［新規データセット］ ダイアログで、［名前］ フィールドに 「Sales」 と入力し、［Uri/パス］ フィールドに 「/FactSales」 と入力し、［JSONパス］ フィールドに 「$.value.*」 と入力します。
デフォルトでは、各 「FactSales」 レコードには19個のフィールドが含まれていますが、全てのフィールドが必要ではありません。以下のように、クエリパラメータを使用してODataの$selectクエリーオプションを適用することで、取得されるフィールドを制限します。
［パラメータ］ セクションの右側にある ［+］ アイコンをクリックします。
新しく追加された ［パラメータ］ フィールドに 「$select」 と入力します。
［値］ フィールドに、「DateKey,StoreKey,SalesAmount,ChannelKey,ProductKey,SalesQuantity,PromotionKey」 と入力します。
［検証］ ボタンをクリックします。
［データベースフィールド］ セクションに ［7項目］ のテキストが表示されていることを確認します。
［変更を保存］ ボタンをクリックします。

Salesデータセットを追加する方法

AddingDataSetSales

計算フィールドを追加する

レポートを簡単に作成するには、計算フィールドを追加します。Salesデータセットエディタを開いたままにしておくことを前提としています。

［計算フィールド］ セクションの右側にある ［+］ アイコンをクリックします。
新しく追加された項目の ［フィールド名］ フィールドに 「SalesYear」 と入力します。
［値］ フィールドに 「{Year(DateKey)}」 と入力します。この式はYear関数を使用して販売年を返します。

上記で説明したように、次の計算フィールドを追加します。

フィールド名	値
SalesMonth	`{Month(DateKey)}`
SalesChannel	`{Switch(ChannelKey = 1, "店舗", ChannelKey = 2, "オンライン", ChannelKey = 3, "カタログ", ChannelKey = 4, "再販業者")}`
ProductCategory	`{Switch(ProductKey < 116, "オーディオプレーヤー", ProductKey >= 116 And ProductKey < 338, "テレビとビデオ", ProductKey >= 338 And ProductKey < 944, "コンピュータ", ProductKey >= 944 And ProductKey < 1316, "カメラ", ProductKey >= 1316, "携帯電話")}`

［データセットの編集］ダイアログでは、［変更を保存］ボタンをクリックします。

SalesChannelとProductCategoryの式は、Switch関数を使用して、チャネルのID（ChannelKey）によって販売チャネルの名前を決定し、製品のID（ProductKey）によって商品カテゴリを決定します。

計算フィールドを追加する方法

AddingCalculatedField

レポートにパラメータを追加する

販売レポートでは、レポートパラメータを使用して販売データを販売年ごとにフィルタします。Yearレポートパラメータを作成するには、以下の手順に従います。

レポートデザイナの右上隅から、［データ］ アイコンをクリックします。
［パラメータ］ の隣にある ［+ 追加］ をクリックします。［レポートパラメータ1］ というパラメータが追加されます。
［レポートパラメータ1］ をクリックして、［パラメータの編集］ を表示します。
［名前］ フィールドに 「Year」 と入力し、 ［ダイアログの表示文字列］ フィールドに 「年」 と入力します。
［データタイプ］ を 「Integer」 に設定します。
［非表示］ を 「はい」 に設定します。
［既定値］ セクションの ［値を直接入力］ オプションをクリックします。
［値］ プロパティの右側にある ［+］ をクリックし、「2007」 と入力します。

パラメータを追加する方法

AddingReportParameter

フィルタパネルを作成する

Yearパラメータの値を設定するには、Salesデータセットからのすべての個別の年を表示する対話的なパラメータパネルを使用します。

デザイン面をクリックし、［高さ］ プロパティを 「25cm」 に設定して、次の手順に従います。
ツールボックスからContainerをドラッグ＆ドロップしてページの左上隅に配置します。

［プロパティ］ウィンドウでは、Containerの次のプロパティを設定します。

プロパティ	値
共通 > 名前	`FilterPanel`
罫線 > 幅	`0.25pt`
罫線 > スタイル	`Solid`
罫線 > 色	`Gainsboro`
位置とサイズ > 左	`1cm`
位置とサイズ > 上	`1cm`
位置とサイズ > 幅	`23cm`
位置とサイズ > 高さ	`2.5cm`

ツールボックスからTextBoxコントロールをContainerコントロールにドラッグ＆ドロップして、Containerの左上隅に配置します。TextBoxのプロパティを次のように設定します。

プロパティ	値
共通 > 名前	`FilterPanelHeader`
共通 > 値	売上高を確認する年を選択
テキスト > 太さ	`Bold`
テキスト> 水平方向の整列	`Center`
テキスト> 垂直方向の整列	`Middle`
位置とサイズ > 左	`0.6cm`
位置とサイズ > 上	`0.6cm`
位置とサイズ > 幅	`5.7cm`
位置とサイズ > 高さ	`1.3cm`

ツールボックスからListコントロールをContainerコントロールにドラッグ＆ドロップし、プロパティを次のように設定します。

プロパティ	値
共通 > 名前	`YearList`
アクション > 種類	`Apply Parameters`
アクション > パラメータの適用	値： {SalesYear}
データ > データセット	`Sales`
グループ > 式	`{SalesYear}`
データなし > 水平方向の整列	`Center`
データなし > 垂直方向の整列	`Middle`
位置とサイズ > 左	`7cm`
位置とサイズ > 上	`0cm`
位置とサイズ > 幅	`15.3cm`
位置とサイズ > 高さ	`2.5cm`
レイアウト > 行または列のカウント	`3`

ツールボックスからTextBoxコントロールをListコントロールにドラッグ＆ドロップして、Listの左上隅に配置します。TextBoxのプロパティを次のように設定します。

プロパティ	値
共通 > 名前	`YearText`
共通 > 値	`{SalesYear}`
罫線 > 幅	`0.5pt`
罫線 > スタイル	`{IIF(SalesYear = @Year, "Dashed", "None")}`
罫線 > 色	`Black`
テキスト> 水平方向の整列	`Center`
テキスト> 垂直方向の整列	`Middle`
位置とサイズ > 左	`0.6cm`
位置とサイズ > 上	`0.6cm`
位置とサイズ > 幅	`3.8cm`
位置とサイズ > 高さ	`1.3cm`

上記のプロパティを設定した後、レポートは次のようになります。

AddFilterPanel

レポートをプレビューすると、2007年、2008年、2009年が横方向に表示されます。現在のパラメータの値と一致する年は罫線で強調されます。任意の年をクリックして、パラメータ値を調整できます。

Tableを追加する

選択されている年の各月の売上高を表示するには、Tableコントロールを使用します。

ツールボックスからTableコントロールをドラッグ＆ドロップして、フィルタパネルの下に配置します。テーブルの次のプロパティを設定します。

プロパティ	値
共通 > 名前	`SummaryTable`
罫線 > 幅	`0.25pt`
罫線 > スタイル	`Solid`
罫線 > 色	`Gainsboro`
位置とサイズ > 左	`1cm`
位置とサイズ > 上	`4.5cm`
データ > データセット	`Sales`

［データ］ セクションの ［フィルタ］ プロパティの横の ［+ 追加］ アイコンをクリックします。
［+ 追加］ ボタンをクリックし、リストから ［SalesYear］ を選択します。
「=」記号の右側にあるテキスト領域をクリックして、ドロップダウンリストからYearを選択します。
テーブル内の任意の場所をクリックして、グループエディタを表示します。<詳細グループ> を選択します。［グループ > 式］ および ［データ > 並べ替えの式］ に 「{SalesMonth}」 と入力します。この設定により、月ごとに1つの詳細行が生成され、昇順に並べ替えられます。
3番目の列のハンドラを右クリックし、コンテキストメニューで ［削除］ を選択します。1番目の列のハンドラをクリックし、［プロパティ］ウィンドウでは ［幅］ プロパティを 「6.5cm」 に設定します。2番目の列のハンドラをクリックし、［幅］ プロパティを 「3.8cm」 に設定します。

テーブルの各セルにTextBoxコントロールが含まれています。テーブル内のセルをクリックして、次のようにTextBoxのプロパティを設定します。

行	列	プロパティ	値
1番目	1番目	名前	`SummaryTableHeader`
		値	`{@Year}年　月次売上高`
2番目	1番目	名前	`SalesMonth`
		値	`{SalesMonth}月`
2番目	2番目	名前	`SalesAmount`
		値	`{Sum(SalesAmount)}`
		表示形式	`c0`
3番目	1番目	名前	`TextTotal`
		値	`Total:`
		テキスト > 太さ	`Bold`
		テキスト> 水平方向の整列	`Right`
3番目	2番目	名前	`SalesAmountTotal`
		値	`{Sum(SalesAmount)}`
		表示形式	`c0`
		テキスト > 太さ	`Bold`

上記のプロパティを設定した後、レポートは次のようになります。

TableCellsConfig

レポートをプレビューして、フィルタパネルで年を切り替えると、テーブルが更新され、選択されている年のデータが表示されます。

Chartを追加する

選択されている年の販売チャネルごとに売上高を表すには、Chartを追加します。Chartを追加するには、以下の手順に従います。

ツールボックスからChartをドラッグ＆ドロップして、Tableの横に配置します。チャートウィザードが表示されます。
チャートウィザードの ［データおよび種類］ セクションで、［データセット］ ドロップダウンリストから ［Sales］ を選択し、横棒を選択します。

［次へ］ をクリックします。［横棒設定］ ページで、［データ］ セクションのフィールドを 「{SalesAmount}」 に設定し、集計を 「Sum」 に設定します。［カテゴリ］ セクションのフィールドを 「{SalesChannel}」 に設定し、［次へ］ をクリックします。

［プレビュー］ ページで、［パレット］ ドロップダウンリストで 「Grayscale」 を選択し、［完了］ をクリックします。
エクスプローラを開きます。

エクスプローラで、Chart1を選択します。プロパティウィンドウに次のプロパティを設定します。

プロパティ	値
共通 > 名前	`ChartSalesPerChannel`
罫線 > 幅	`0.25pt`
罫線 > スタイル	`Solid`
罫線 > 色	`Gainsboro`
位置とサイズ > 左	`12cm`
位置とサイズ > 上	`4.5cm`
位置とサイズ > 幅	`11.5cm`
位置とサイズ > 高さ	`9cm`
インターナショナル > 言語	`Japanese - Japan`

［データ］ セクションの ［フィルタ］ プロパティの横の ［+ 追加］ アイコンをクリックします。［+ 追加］ ボタンをクリックし、リストから ［SalesYear］ を選択します。「=」記号の右側にあるテキスト領域をクリックして、ドロップダウンリストからYearを選択します。
エクスプローラで、ChartSalesPerChannelの下にある ［ヘッダ］ を選択し、次のプロパティを設定します。
プロパティ
値
キャプション
{@Year}年　販売経路別売上高
テキスト> 水平方向の整列
Left
テキスト> 垂直方向の整列
Top
レイアウト > パディング
2pt
エクスプローラのプロットエリアの下にある ［X軸-[Plot1]］ を選択し、［線］ セクションの ［表示］ を 「いいえ」 に設定します。
エクスプローラのプロットエリアの下にある ［Y軸-[Plot1]］ を選択し、次のプロパティを設定します。
プロパティ
値
タイトル
テキストを削除します
線 > 表示
いいえ
ラベル > 表示
いいえ
主グリッド線 > グリッド線を表示
いいえ

プロパティ	値
キャプション	{@Year}年　販売経路別売上高
テキスト> 水平方向の整列	`Left`
テキスト> 垂直方向の整列	`Top`
レイアウト > パディング	`2pt`

プロパティ	値
タイトル	テキストを削除します
線 > 表示	`いいえ`
ラベル > 表示	`いいえ`
主グリッド線 > グリッド線を表示	`いいえ`

エクスプローラのChartSalesPerChannelの下にある ［プロット-Plot1］ を選択し、次のプロパティを設定します。

プロパティ	値
エンコーディング > カテゴリの並べ替えの式	`{Sales Amount}`
エンコーディング > カテゴリの並べ替えの順序	`Ascending`
エンコーディング > カテゴリの並べ替えの集計	`Sum`
ラベルのテキスト > テンプレート	`{valueField.value:c0}`

上記のプロパティを設定した後、レポートは次のようになります。

ConfigureThePlot

レポートをプレビューして、フィルタパネルで年を切り替えると、チャートとテーブルの両方が動的に更新され、選択されている年のデータが表示されます。

スクロール可能なコンテナを作成する

次は、選択されている年の各売上高の詳細を表示するテーブルを追加します。同じ年に対して多数の売上記録が存在する可能性があるため、テーブルはスクロール可能で列ヘッダが固定されます。

ツールボックスからContainerコントロールをドラッグ＆ドロップして、SummaryTableの下に配置します。Containerの次のプロパティを設定します。

プロパティ	値
共通 > 名前	`DetailsTableContainer`
罫線 > 幅	`0.25pt`
罫線 > スタイル	`Solid`
罫線 > 色	`Gainsboro`
位置とサイズ > 左	`1cm`
位置とサイズ > 上	`14cm`
位置とサイズ > 幅	`23cm`
位置とサイズ > 高さ	`10cm`
レイアウト > オーバーフロー	`Auto`

ツールボックスからTableコントロールをドラッグ＆ドロップして、DetailsTableContainerの左上隅に配置します。Tableの次のプロパティを設定します。
プロパティ
値
共通 > 名前
DetailsTable
データ > データセット
Sales
位置とサイズ > 左
0cm
位置とサイズ > 上
0cm
レイアウト > 行の固定表示
1
［データ］ セクションの ［フィルタ］ プロパティの横の ［+ 追加］ アイコンをクリックします。［+ 追加］ ボタンをクリックし、リストから ［SalesYear］ を選択します。「=」記号の右側にあるテキスト領域をクリックして、ドロップダウンリストからYearを選択します。
3番目の列のハンドラを右クリックし、コンテキストメニューで ［列］ > ［列の挿入］ > ［さらに表示］ の順に選択します。［列を挿入］ ダイアログで、［カウント］ を 「3」 に、［位置］ を 「右」 に設定し、［挿入］ ボタンをクリックします。各列の列ハンドラをクリックし、次のプロパティを設定します。
列
位置とサイズ > 幅
1番目
2.5cm
2番目
3.8cm
3番目
4.5cm
4番目～ 6番目
3.8cm

プロパティ	値
共通 > 名前	`DetailsTable`
データ > データセット	`Sales`
位置とサイズ > 左	`0cm`
位置とサイズ > 上	`0cm`
レイアウト > 行の固定表示	`1`

列	位置とサイズ > 幅
1番目	`2.5cm`
2番目	`3.8cm`
3番目	`4.5cm`
4番目～ 6番目	`3.8cm`

テーブルの各セルにTextBoxコントロールが含まれています。テーブル内のセルをクリックして、次のようにTextBoxのプロパティを設定します。

行	列	プロパティ	値
1番目	1番目	名前	`DateHeader`
		値	`販売日`
2番目	1番目	名前	`DateValue`
		値	`{DateKey}`
		テキスト> 水平方向の整列	`Left`
1番目	2番目	名前	`SalesChannelHeader`
		値	`販売経路`
2番目	2番目	名前	`SalesChannelValue`
		値	`{SalesChannel}`
1番目	3番目	名前	`ProductCategoryHeader`
		値	`製品カテゴリ`
2番目	3番目	名前	`ProductCategoryValue`
		値	`{ProductCategory}`
1番目	4番目	名前	`DiscountTypeHeader`
		値	`割引の種類`
2番目	4番目	名前	`DiscountTypeValue`
		値	`{Lookup(PromotionKey, PromotionKey, PromotionType, "Promotions")}`
1番目	5番目	名前	`SalesQuantityHeader`
		値	`数量`
		テキスト> 水平方向の整列	`Right`
2番目	5番目	名前	`SalesQuantityValue`
		値	`{SalesQuantity}`
1番目	6番目	名前	`SalesAmountHeader`
		値	`売上金額`
		テキスト> 水平方向の整列	`Right`
2番目	6番目	名前	`SalesAmountValue`
		値	`{SalesAmount}`
		表示形式	`c0`

最初の行ハンドラをクリックし、プロパティウィンドウで ［TextBox］ タブに切り替えます。選択した行の次のプロパティを設定します。
プロパティ
値
背景 > 背景色
White
罫線 > 幅
0.5pt
罫線 > スタイル > 下
Solid
罫線 > 色
Black

プロパティ	値
背景 > 背景色	`White`
罫線 > 幅	`0.5pt`
罫線 > スタイル > 下	`Solid`
罫線 > 色	`Black`

レポートを表示する

［プレビュー］ をクリックし、レポートの最終結果を表示します。
年を切り替えて、選択した年に対応するすべての販売記録を確認できます。

レポートを表示する方法

ReportPreview