8 積上げ棒グラフの作成方法

積上げ棒グラフには、複数の問合せの結果が重なって（縦または横のいずれかに）積み上げられて表示されます。積上げ棒グラフは、各棒のセグメントで表されるデータ・ポイントの絶対値、および棒に積み上げられた各シリーズのデータ・ポイントで表される合計値を示す場合に使用すると有効です。

アプリケーション・ビルダーでは、積上げ棒グラフはSVGチャートとしてのみ使用できます。積上げ棒グラフを作成する場合は、チャートを積上げ棒グラフとして作成するか、または通常の（HTML以外の）棒グラフを作成した後、それに問合せを追加することができます。

このチュートリアルでは、デモンストレーション・アプリケーション（サンプル・アプリケーション）内の既存のデータを使用して積上げ棒グラフを作成する方法について説明します。チュートリアルを始める前に、サンプル・アプリケーションがインストールされていることを確認します。「サンプル・アプリケーションのインストールの確認」を参照してください。

内容は次のとおりです。

積上げ棒グラフの作成
シリーズの追加
チャート書式の変更
チャートの表示

参照:

『Oracle Database Application Expressユーザーズ・ガイド』の「チャートの作成」

積上げ棒グラフの作成

初期レポートを作成する場合は、リージョンを既存のページに追加して積上げ棒グラフとして定義するか、または新しいページを作成することができます。次の演習では、サンプル・アプリケーション内に新しいページを作成します。

チャートには、サンプル・アプリケーション内から製品カテゴリごとに売上の合計が表示されます。先月以前の過去12か月の売上が含まれます。次の演習では、製品カテゴリ（電話、コンピュータ、オーディオおよびビデオ）ごとに4つの問合せ（シリーズと呼ばれる）を作成します。

新しいページを作成するには、次のステップを実行します。

「作業領域」ホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
「サンプル・アプリケーション」をクリックします。
「ページの作成」をクリックします。
「ページ」で、「チャート」を選択して「次へ」をクリックします。
「積上げ棒(縦)」を選択して「次へ」をクリックします。
「ページ属性」で、次のステップを実行します。
1. 「ページ番号」に、750と入力します。
2. 「ページ名」に、Revenue by Categoryと入力します。
3. 「リージョン・テンプレート」で、デフォルトを受け入れます。
4. 「リージョン名」に、Revenue by Categoryと入力します。
5. 「チャートのカラー・テーマ」で、デフォルトを受け入れます。
6. 「ブレッドクラム」で、デフォルトを受け入れます。
7. 「次へ」をクリックします。
「タブ・オプション」で、デフォルトの「タブを使用しない」を受け入れて「次へ」をクリックします。
「問合せ」で、次のステップを実行します。
1. 「シリーズ名」に、Phonesと入力します。
2. SQLで、次のように入力します。
```
SELECT NULL l,
       sales_month,
       revenue
   FROM (
SELECT TO_CHAR(o.order_timestamp,'Mon YYYY') sales_month,
       SUM(oi.quantity * oi.unit_price) revenue,
       TO_DATE(to_char(o.order_timestamp,'Mon YYYY'),'Mon YYYY') sales_month_order
  FROM DEMO_PRODUCT_INFO p,
       DEMO_ORDER_ITEMS oi,
       DEMO_ORDERS o
 WHERE o.order_timestamp <= (trunc(sysdate,'MON')-1)
   AND o.order_timestamp > (trunc(sysdate-365,'MON'))
   AND o.order_id = oi.order_id
   AND oi.product_id = p.product_id
   AND p.category = 'Phones'
GROUP BY TO_CHAR(o.order_timestamp,'Mon YYYY')
ORDER BY sales_month_order
)
```
  チャートのSELECT構文は次のとおりです。
```
SELECT link, label, value
```
  SELECT構文には、3つすべてのアイテムを指定する必要があります。この例では、リンクは該当するリンク先ページがないため、NULLと定義されます。
  
  情報がアルファベット順に表示されるため、積上げグラフのシリーズのSELECT文にORDER BYを含めることができないことに注意してください。日付をアルファベット順に表示することは意味がありません。たとえば、10月は9月の前に表示されます。データを日付順に表示するのがより適切な方法です。データを日付順で表示するには、ネストしたSELECT文内でデータを順序付けする必要があります。
3. 「データが見つからなかった場合のメッセージ」に、次のように入力します。
```
No orders found in the past 12 months.
```
4. 「次へ」をクリックします。
選択内容を確認して、「終了」をクリックします。

「成功」ページが表示されます。

シリーズの追加

問合せを定義するリージョンを指定して新しいページを作成した後、シリーズを追加する必要があります。次の演習では、アプリケーションの製品カテゴリ（コンピュータ、オーディオおよびビデオ）ごとにシリーズを追加します。電話カテゴリはすでに作成されています。

コンピュータ・カテゴリのシリーズを追加するには、次のステップを実行します。

「成功」ページで、「ページの編集」を選択します。

ページ750のページ定義が表示されます。
「リージョン」で、「Revenue by Category」の横にある「SVGチャート」をクリックします。

「チャート属性」タブが選択された状態で「SVGチャート」ページが表示されます。「チャート・シリーズ」までスクロールします。 1つのシリーズのみが表示されていることを確認します。

コンピュータのチャート・シリーズを追加します。

「チャート・シリーズ」にスクロールして、「シリーズの追加」をクリックします。
「シリーズ名」に、Computerと入力します。
「シリーズ問合せ」までスクロールします。

SQLで、次のように入力します。

SELECT NULL l,
       sales_month,
       revenue
   FROM (
SELECT TO_CHAR(o.order_timestamp,'Mon YYYY') sales_month,
       SUM(oi.quantity * oi.unit_price) revenue,
       TO_DATE(to_char(o.order_timestamp,'Mon YYYY'),'Mon YYYY') sales_month_order
  FROM DEMO_PRODUCT_INFO p,
       DEMO_ORDER_ITEMS oi,
       DEMO_ORDERS o
 WHERE o.order_timestamp <= (trunc(sysdate,'MON')-1)
   AND o.order_timestamp > (trunc(sysdate-365,'MON'))
   AND o.order_id = oi.order_id
   AND oi.product_id = p.product_id
   AND p.category = 'Computer'
GROUP BY TO_CHAR(o.order_timestamp,'Mon YYYY')
ORDER BY sales_month_order
)

このSQLが以前のシリーズと一致するようにしてください。唯一の違いは、WHERE句内のカテゴリです。

「データが見つからなかった場合のメッセージ」に、次のように入力します。
```
No orders found in the past 12 months.
```
ページ上部の「変更の適用」をクリックします。

オーディオのチャート・シリーズを追加します。

「チャート・シリーズ」で、「シリーズの追加」をクリックします。
「シリーズ名」に、Audioと入力します。
「シリーズ問合せ」までスクロールします。

SQLで、次のように入力します。

SELECT NULL l,
       sales_month,
       revenue
   FROM (
SELECT TO_CHAR(o.order_timestamp,'Mon YYYY') sales_month,
       SUM(oi.quantity * oi.unit_price) revenue,
       TO_DATE(to_char(o.order_timestamp,'Mon YYYY'),'Mon YYYY') sales_month_order
  FROM DEMO_PRODUCT_INFO p,
       DEMO_ORDER_ITEMS oi,
       DEMO_ORDERS o
 WHERE o.order_timestamp <= (trunc(sysdate,'MON')-1)
   AND o.order_timestamp > (trunc(sysdate-365,'MON'))
   AND o.order_id = oi.order_id
   AND oi.product_id = p.product_id
   AND p.category = 'Audio'
GROUP BY TO_CHAR(o.order_timestamp,'Mon YYYY')
ORDER BY sales_month_order
)

「データが見つからなかった場合のメッセージ」に、次のように入力します。
```
No orders found in the past 12 months.
```
ページ上部までスクロールして「変更の適用」をクリックします。

ビデオのチャート・シリーズを追加します。

「チャート・シリーズ」にスクロールして、「シリーズの追加」をクリックします。
「シリーズ名」に、Videoと入力します。
「シリーズ問合せ」までスクロールします。

SQLで、次のように入力します。

SELECT NULL l,
       sales_month,
       revenue
   FROM (
SELECT TO_CHAR(o.order_timestamp,'Mon YYYY') sales_month,
       SUM(oi.quantity * oi.unit_price) revenue,
       TO_DATE(to_char(o.order_timestamp,'Mon YYYY'),'Mon YYYY') sales_month_order
  FROM DEMO_PRODUCT_INFO p,
       DEMO_ORDER_ITEMS oi,
       DEMO_ORDERS o
 WHERE o.order_timestamp <= (trunc(sysdate,'MON')-1)
   AND o.order_timestamp > (trunc(sysdate-365,'MON'))
   AND o.order_id = oi.order_id
   AND oi.product_id = p.product_id
   AND p.category = 'Video'
GROUP BY TO_CHAR(o.order_timestamp,'Mon YYYY')
ORDER BY sales_month_order
)

「データが見つからなかった場合のメッセージ」に、次のように入力します。
```
No orders found in the past 12 months.
```
ページ上部の「変更の適用」をクリックします。

チャート書式の変更

次に、リージョン・フッターを追加して、軸タイトル付きのチャートの外観を向上させます。

Y軸の書式を設定するには、次のステップを実行します。

「軸の設定」までスクロールします。
「Y軸の書式」に、次のように入力します。
```
FML999G999G999G999G990
```
これによって、sales_month列が金額として書式設定されますが、セントは表示されません。
スクロールして「リージョン定義」タブを選択します。
「ヘッダーおよびフッター」までスクロールします。

「リージョン・フッター」に、次のように入力します。

Note: This reflects sales for the 12 months prior to the current month.

「変更の適用」をクリックします。

チャートの表示

完成したチャートは、表示できます。

チャートを実行するには、次のステップを実行します。

ページの右上にある「ページの実行」アイコンをクリックします。
このセッションですでにサンプル・アプリケーションを実行した場合、ページ750が表示されます。

ユーザー名とパスワードを入力するように要求されたら、次のステップを実行します。
1. 「ユーザー名」に、demoまたはadminのいずれかを入力します。
2. 「パスワード」に、作業領域名を小文字で入力します。
3. 「ログイン」をクリックします。
4. ページ下部の「開発者」ツールバーの「ページ1の編集」をクリックします。
  
  ページ定義が表示されます。
5. 「ページ」フィールドに、750と入力して「実行」をクリックします。
6. 右上にある「ページの実行」アイコンをクリックします。
図8-1に示すとおり、「Revenue by Category」グラフが表示されます。

図8-1 「Revenue by Category」棒グラフ

「図8-1「Revenue by Category」棒グラフ」の説明

ヒント:

実行しているアプリケーション内の新しいページにナビゲートする方法の1つとして、2番目のパラメータ（ページ識別子）を750に変更する方法があります。次に例を示します。

http://apex.oraclecorp.com/pls/apex/f?p=2046:1: ...

これを次のように変更します。

http://apex.oraclecorp.com/pls/apex/f?p=2046:750: ...