7 積上げ棒チャートの作成方法

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

Oracle HTML DBでは、積上げ棒チャートはSVGチャートとしてのみ使用できます。積上げ棒チャートを作成する場合は、チャートを積上げ棒チャートとして作成するか、または通常の（HTML以外の）棒チャートを作成した後、それに問合せを追加することができます。

このチュートリアルでは、デモンストレーション・アプリケーション（サンプル・アプリケーション）内の既存のデータを使用して積上げ棒チャートを作成する方法について説明します。

この章の内容は次のとおりです。

サンプル・アプリケーションへのアクセス
積上げ棒チャートの作成
シリーズの追加
チャート書式の変更
チャートの表示

サンプル・アプリケーションへのアクセス

サンプル・アプリケーションにアクセスするには、次の手順を実行します。

Oracle HTML DBにログインします。
「作業領域管理」リストから、「デモンストレーション・アプリケーションをレビュー」を選択します。
サンプル・アプリケーションを検索し、「ステータス」列を確認します。
1. 「ステータス」列に「インストール済」が表示されている場合は、「アクション」列の「実行」をクリックします。
2. 「ステータス」列に「インストールされていません」が表示されている場合は、「アクション」列の「インストール」を選択します。Application Builderホームページが表示されたら、「実行」アイコンをクリックします。
プロンプトが表示されたら、適切なユーザー名およびパスワードを入力して、「ログイン」をクリックします。
- 「ユーザー名」に、demoまたはadminのいずれかを入力します。
- 「パスワード」に現行の作業領域名をすべて小文字で入力します。

積上げ棒チャートの作成

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

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

新しいページを作成するには、次の手順を実行します。

「作業領域」ホームページにナビゲートします。
「アプリケーション」リストから、「サンプル・アプリケーション」を選択します。
「ページを作成」をクリックします。
「コンポーネントを含むページ」を選択して「次へ」をクリックします。
「コンポーネント・タイプを選択」で、「チャート」を選択して「次へ」をクリックします。
「積上げ棒」を選択して「次へ」をクリックします。
「ページ属性を指定」で、次の手順を実行します。
1. 「ページ」に、750と入力します。
2. 「ページ名」に、Revenue by Categoryと入力します。
3. 「リージョン名」に、Revenue by Categoryと入力します。
4. 「次へ」をクリックします。
「タブ・オプション」で、デフォルトの「タブを使用しない」を受け入れて「次へ」をクリックします。
「シリーズ問合せ」で、次の手順を実行します。
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 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」の左にある「チャート」を選択します。

「チャート・シリーズ」で、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が表示されます。実行していない場合は、適切なユーザー名およびパスワードを入力して「ログイン」をクリックします。
- 「ユーザー名」に、demoまたはadminのいずれかを入力します。
- 「パスワード」に、現行の作業領域名をすべて小文字で入力します。
ページ750にナビゲートします。

図7-1に示すとおり、「Revenue by Category」チャートが表示されます。

図7-1 「Revenue by Category」棒チャート

ヒント:

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

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

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

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