25.1 レガシー・チャートの管理

Oracle Application Expressのレガシー・チャートは、AnyChart HTML5 Chart ComponentとAnyChart Flash Chart Componentをベースにしています。

ヒント:

AnyChartチャートは、レガシー・アプリケーション・コンポーネントです。レガシー・コンポーネントは引き続きOracleでサポートされますが、Oracle JETチャートに基づく新しいチャートを作成することをお薦めします。チャートの作成を参照してください。

• チャートのレガシー・タイプについて
  Oracle Application ExpressのHTML5チャートとFlashチャートのサポートは、AnyChart HTML5 Chart ComponentとAnyChart Flash Chart Componentをベースにしています。AnyChartはフレキシブルなFlashおよびJavaScriptベースのソリューションで、開発者は動きがありコンパクトでインタラクティブなチャートを作成できます。
• レガシー・チャートのSQL問合せの作成
  レガシー・チャートを作成する場合は、次の構文を使用します。
• 新しいページへのレガシー・チャートの追加
  ページの作成ウィザードを使用して、新規ページにレガシー・チャートを追加します。
• ページ・デザイナでのレガシー・チャートの追加
  ページ・デザイナで既存のページにレガシー・チャートを追加します。
• レガシー・チャートの編集
  ページ・デザイナでレガシー・チャートを編集します。
• Flashチャートの保存について
  Flashチャートをローカルに保存するサポートを追加できます。
• FlashおよびHTML5チャートとのカスタムXMLの使用
  カスタムXMLを追加することで、レガシー・チャートのルック・アンド・フィールをさらにカスタマイズします。

25.1.1 チャートのレガシー・タイプについて

Oracle Application ExpressのHTML5チャートとFlashチャートのサポートは、AnyChart HTML5 Chart ComponentとAnyChart Flash Chart Componentをベースにしています。AnyChartはフレキシブルなFlashおよびJavaScriptベースのソリューションで、開発者は動きがありコンパクトでインタラクティブなチャートを作成できます。

• レガシーHTML5チャートについて
  
• レガシーFlashチャートについて
  

25.1.1.1 レガシーHTML5チャートについて

Oracle Application ExpressのHTML5チャートのサポートは、AnyChart HTML5 Chart Componentをベースにしています。HTML5チャートはJavaScriptチャート・エンジンを使用し、SVG形式のチャートをレンダリングします。Flashは最新のモバイル・デバイスのほとんどでレンダリングできませんが、現在は新しいHTML5チャート作成ソリューションを利用して、チャートをモバイル・アプリケーションに組み込むことができます。HTML5チャートは、次のモバイル・プラットフォームの一般的なブラウザと互換性があります。

• Android: バージョン3.1、3.2、4.0、4.0.3および4.1

• IOS (iPhone、iPad、iPod Touch): Safari 3.2以上が必要

ヒント:

詳細は、http://6.anychart.com/products/anychart/docsを参照してください。

25.1.1.2 レガシーFlashチャートについて

Oracle Application ExpressのFlashチャートのサポートは、AnyChart Flash Chart Componentをベースにしています。Flashチャートはブラウザでレンダリングされ、使用するにはFlash Player 9以上が必要です。AnyChart 6.0では、FlashチャートはFLASH_PREFERREDレンダリング・タイプを使用してレンダリングされます。チャートを表示するデバイスでFlash Playerを使用できない場合(iPhoneで表示されるページなど)、AnyChartは自動的にHTML5チャート・エンジンに切り替え、SVGベースのチャートを表示します。

25.1.2 レガシー・チャートのSQL問合せの作成

レガシー・チャートを作成する場合は、次の構文を使用します。

• レガシー・チャート構文
  
• ダイアル・チャート構文(FlashおよびHTML5)
  
• レガシー複数シリーズ構文(FlashおよびHTML5)
  
• レガシー・レンジ・チャート構文(FlashおよびHTML5)
  
• レガシー散布図構文(FlashおよびHTML5)
  
• レガシー・ローソク足チャート構文(FlashおよびHTML5)
  
• レガシー・ガント・チャート構文(Flashのみ)
  

25.1.2.1 レガシー・チャート構文

チャートを定義する場合は、チャート・タイプを選択し、次の構文を使用してSQL問合せを指定します。

SELECT link, label, value
FROM   ...

内容は次のとおりです。

• linkはURLです。

• labelは、バーに表示されるテキストです。

• valueは、バー・サイズを定義する数値列です。

次に例を示します。

SELECT null, last_name, salary
FROM   employees
WHERE  DEPARTMENT_ID = :P101_DEPARTMENT_ID

25.1.2.2 ダイアル・チャート構文(FlashおよびHTML5)

ダイアル・チャートを作成するには、ダイアル・チャート・タイプを選択し、次の構文を使用してSQL問合せを指定します。

SELECT value , maximum_value [ ,low_value [ ,high_value] ]
FROM   ...

内容は次のとおりです。

• valueは、ダイアルの開始位置です。

• maximum_valueは、ダイアルでの推定最高位置です。

• low_valueおよびhigh_valueは、履歴上の最低値および最高値です。

次に例を示します。

SELECT dbms_random.value(500, 1200), 1300, dbms_random.value(100, 200)
FROM DUAL

25.1.2.3 レガシー複数シリーズ構文(FlashおよびHTML5)

列チャートおよび行チャートには、1つのSQL問合せで複数シリーズを定義できます。これらのチャート・タイプのシリーズ名は、問合せ内の関連する列別名から導出されます。複数シリーズのチャートを定義するには、次の構文を使用します。

SELECT link, label, series_1_value [, series_2_value [, ...]]
FROM   ...

25.1.2.4 レガシー・レンジ・チャート構文(FlashおよびHTML5)

レンジ・チャートは、各バーに2つの値が必要です。レンジ・チャートを作成するには、チャートを作成し、次の構文を使用してSQL問合せを提供します。

SELECT link, label, low_value, high_value 
FROM   ...

25.1.2.5 レガシー散布図構文(FlashおよびHTML5)

レガシー散布図は、各ポイントにx値およびy値が必要です。レンジ・チャートを作成するには、チャートを作成し、次の構文を使用してSQL問合せを提供します。

SELECT link, label, x_value, y_value 
FROM   ...

25.1.2.6 レガシー・ローソク足チャート構文(FlashおよびHTML5)

レガシー・ローソク足チャートには、各ローソク足に始値、安値、高値および終値が必要です。ローソク足チャートを作成するには、チャートを作成し、次の構文を使用してSQL問合せを指定します。

SELECT link, label, open, low, high, close
FROM   ...

25.1.2.7 レガシー・ガント・チャート構文(Flashのみ)

プロジェクト・ガント・チャートでは、各タスクのタスク名、タスクID、親タスクID、実際の開始日と終了日、および進捗の値が必要になります。計画開始日と計画終了日の2つの値も必要に応じて使用できます。プロジェクト・ガント・チャートを作成するには、Flashチャートを作成し、次の構文を使用してSQL問合せを指定します。

SELECT link, task_name, task_id, parent_task_id, actual_start_date, actual_end_date, progress
FROM   ...

リソース・ガント・チャートでは、各タスクのリソースID、リソース名、親リソースID、および実際の開始日と終了日の値が必要になります。リソース・ガント・チャートを作成するには、Flashチャートを作成し、次の構文を使用してSQL問合せを指定します。

SELECT link, resource_id, resource_name, resource_parent_id, actual_start_date, actual_end_date
FROM   ...

リソース・ガント・チャートで親子階層データを表すには、START WITH..CONNECT BY構文を使用してSQL問合せを指定します。

SELECT link,
           resource_id,
           resource_name,
           resource_parent_id,
           actual_start_date,
           actual_end_date,
FROM ...
START WITH resource_parent_id IS NULL
CONNECT BY PRIOR resource_id = resource_parent_id
ORDER SIBLINGS BY resource_name

25.1.3 新しいページへのレガシー・チャートの追加

ページの作成ウィザードを使用して、新規ページにレガシー・チャートを追加します。

新しいページにチャートを追加するには、次のステップを実行します。

注意:

レガシーAnyChartチャートは、レガシー・アプリケーション・コンポーネントです。レガシー・コンポーネントは引き続きOracleでサポートされますが、かわりにOracle JETデータ視覚化に基づく新しいチャートを作成することをお薦めします。

1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。
3. 「ページの作成」をクリックします。
4. 「ページの作成」で、次のステップを実行します。
   1. ユーザー・インタフェース: ページのユーザー・インタフェースを選択します(オプション)。
      この属性は、古いテーマを使用し、デスクトップおよびモバイル・ユーザー・インタフェースが定義されているアプリケーションに対してのみ表示されます。
   2. ページ・タイプ: 「レガシー・ページ」→「AnyChartチャート」を選択します。

      ヒント:

      コンポーネント・ページは、ページ・レベルの機能を提供し、指定されたアプリケーション内でレポート、フォーム、チャート、カレンダなどを複数回追加できます。機能ページは、アプリケーション・レベルの機能を提供し、アプリケーションごとに1回のみ追加できます。

5. 「チャート・タイプ」で、次のステップを実行します。
   1. チャートのレンダリング: チャート・タイプを選択します。
      属性の詳細は、フィールドレベル・ヘルプを参照してください。
   2. チャート・タイプ: チャート・タイプを指定します。チャート・タイプによっては、追加で選択するように求められる場合があります。
   3. 「次へ」をクリックします。
6. 「チャート・タイプ」でチャート・タイプを選択し、「次へ」をクリックします。
7. 「ページおよびリージョン属性」で、次のステップを実行します。
   1. ページ番号: チャートを作成するページ番号を入力します。
   2. ページ名: ページ名を入力します。
   3. ページ・モード: ページ・モードを選択します。

      詳細は、フィールドレベル・ヘルプを参照してください。

   4. ブレッドクラム: ページでブレッドクラム・ナビゲーション・コントロールを使用するかどうか、およびどのブレッドクラム・ナビゲーション・コントロールを使用するかを選択します。
   5. 「次へ」をクリックします。
8. 「ナビゲーションのプリファレンス」で、このページに含めるナビゲーションのタイプを指定し、「次へ」をクリックします。ナビゲーション・オプション(ナビゲーション・メニューまたはタブなど)はカレント・アプリケーションのテーマに応じて決まります。
9. 「チャート属性」で、該当する属性を指定します。

   ヒント:

   表示される属性は、チャート・タイプによって異なります。属性の詳細は、フィールドレベル・ヘルプを参照してください。

10. 「ソース」で、次のステップを実行します。

    チャートを表示するためのデータを戻す問合せを入力します。必要な問合せフォーマットは、チャート・タイプに応じて異なります。

    1. SQL問合せ、またはSQL問合せを戻すPL/SQLファンクションを入力: チャートに移入するSQL問合せを指定します。例は、フィールドレベル・ヘルプを参照してください。
    2. 問合せは次のいずれかの方法で指定します。

       • 表示されているフィールドにSQL問合せを入力します。

       • 「問合せの作成」ボタンをクリックします。ビルド・チャート問合せウィザードが表示されたら、画面に表示されるステップに従います。

    3. 問合せの検証を実行/検証せずに問合せを保存: チャート問合せを検証するかどうかを指定します。可能な場合は常に問合せを検証する必要があります。ただし、セッション内でアイテムを参照する場合は、ページを実行するまでこれを行うことはできません。このような場合は、検証しないで保存します。
    4. 送信するページ・アイテム: チャート・データが各リクエストで読み取られるときにセッション・ステートに設定される、カレント・ページのページ・アイテムのカンマ区切りリストを入力します。
    5. 最大行数: チャートの表示に使用する行の最大数を入力します。
    6. データが見つからなかった場合のメッセージ: 問合せによって行が戻されない場合に使用するテキストを入力します。
    7. 関連するチャート属性を指定します。

       属性の詳細は、フィールドレベル・ヘルプを参照してください。

11. 「作成」をクリックします。

関連項目:

• チャートのレガシー・タイプについて

• レガシー・チャートのSQL問合せの作成

25.1.4 ページ・デザイナでのレガシー・チャートの追加

ページ・デザイナで既存のページにレガシー・チャートを追加します。

ページ・デザイナでレガシー・チャートを追加するには、次のステップを実行します。

1. ページ・デザイナで、チャートを含むページを表示します。
2. ギャラリから「ギャラリ・メニュー」をクリックして、「レガシー・コンポーネントの表示」を選択します。
3. ギャラリで、チャート - AnyChart [レガシー]を右クリックして「追加先」を選択し、適切な位置を選択します。

   ヒント:

   ギャラリで、マウスを使用してチャート - AnyChart [レガシー]を選択して、「レイアウト」タブの適切な位置までドラッグすることもできます。

   ページ・デザイナは、次に必要なアクションを示します。

   「メッセージ」タブには、対応する必要のあるメッセージを示す赤または黄色のバッジが表示されます。「メッセージ」タブには、次の2つのタイプのメッセージが表示されます。

   • エラー - エラー・メッセージは赤で表示されます。エラー・メッセージを選択すると、プロパティ・エディタに関連する属性が赤で表示されます。ページを保存する前にエラーに対処する必要があります。

   • 警告 - 警告メッセージは黄色で表示されます。警告メッセージを選択すると、プロパティ・エディタで、関連する属性が黄色で表示されます。ページを保存する前にエラーに対処する必要があります。警告メッセージには対処しないでページを保存できることに注意してください。

4. チャートを編集します。
   チャートには、リージョン属性、チャート属性およびシリーズ属性の3種類の属性があります。
   属性は、グループに編成されています。グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。または、「グループに移動」をクリックしてグループを選択できます。

   ヒント:

   属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

5. リージョン属性を編集します。
   1. 「レンダリング」タブで、チャートを見つけて選択します。
      プロパティ・エディタにチャート・リージョン属性が表示されます
   2. 「識別」で、「タイトル」を編集します。
   3. その他の属性を確認して編集します。
6. チャート属性を編集します。
   1. 「レンダリング」タブで、チャートを探して「属性」ノードを選択します。
   2. 属性を確認して編集します。
7. シリーズを編集します。
   1. 「レンダリング」タブで、「シリーズ」ノードを選択します。
   2. 「ソース」の属性を編集します。
   3. その他の属性を確認して編集します。
8. 「保存」をクリックします。

関連項目:

ページ・デザイナでのページの表示

25.1.5 レガシー・チャートの編集

ページ・デザイナでレガシー・チャートを編集します。

• チャート属性の編集
  
• HTML5チャートからFlashチャートへの切替え
  
• 非同期更新の有効化
  

25.1.5.1 チャート属性の編集

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

1. ページ・デザイナでカレンダを含むページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。

   ページ・デザイナが表示されます。

   チャートには、リージョン属性、チャート属性およびシリーズ属性の3種類の属性があります。プロパティ・エディタでは、属性はグループに編成されています。グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。または、「グループに移動」をクリックしてグループを選択できます。

   ヒント:

   属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

2. リージョン属性を編集するには、次のステップを実行します。
   1. 「レンダリング」タブで、チャートを見つけて選択します。
      プロパティ・エディタにチャート・リージョン属性が表示されます
   2. プロパティ・エディタでリージョン属性を確認して編集します。
3. レガシー・チャートを編集するには、次のステップを実行します。
   1. 「レンダリング」タブで、チャートを探して「属性」ノードを選択します。
   2. プロパティ・エディタでチャート属性を確認して編集します。
4. シリーズを編集するには、次のステップを実行します。
   1. 「レンダリング」タブで、「シリーズ」ノードを選択します。
   2. プロパティ・エディタでシリーズ属性を確認して編集します。
5. 「保存」をクリックします。

注意:

「ページ・デザイナでのページの表示」

25.1.5.2 HTML5チャートからFlashチャートへの切替え

HTML5チャートの作成後は、「チャート属性」ページでチャート属性を編集することによって、そのレンダリングをFlashに切り替えることができます。

HTML5チャートをFlashチャートに切り替えるには、次のステップを実行します。

1. ページ・デザイナでページを表示します。
2. チャート属性を編集します。
   1. 「レンダリング」タブで、チャートを探して「属性」ノードを選択します。
   2. 属性を確認して編集します。
   属性は、グループに編成されています。グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。または、「グループに移動」をクリックしてグループを選択できます。

   ヒント:

   属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

3. 「外観」を検索します。
4. 「レンダリング」で、「Flashチャート」を選択します。
5. 「保存」をクリックします。

関連項目:

• 「ページ・デザイナでのページの表示」

• 「フィールドレベル・ヘルプの表示」

25.1.5.3 非同期更新の有効化

チャート属性ページで「非同期更新」属性を有効にするか、「リフレッシュ」アクションとともに動的アクションを使用すると、FlashチャートおよびHTML5チャートで情報を監視できます。

• 非同期更新属性の有効化
  
• ページ・デザイナでのリフレッシュ動的アクションの作成
  

25.1.5.3.1 非同期更新属性の有効化

「非同期更新」属性を有効にすると、チャートが更新され、指定した時間間隔内に基礎となるデータで行われた変更が反映されます。

非同期更新を有効にするには、次のステップを実行します。

1. ページ・デザイナでページを表示します。
2. 「レンダリング」タブで、チャートを探して「属性」ノードを選択します。
   属性は、グループに編成されています。グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。または、「グループに移動」をクリックしてグループを選択できます。

   ヒント:

   属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

3. 「自動リフレッシュ」グループを検索します。
   1. 「自動リフレッシュ」で、「はい」を選択します。
   2. 「間隔」で、リフレッシュ間隔を秒単位で指定します。
4. 「保存」をクリックします。

注意:

「ページ・デザイナでのページの表示」

25.1.5.3.2 ページ・デザイナでのリフレッシュ動的アクションの作成

リフレッシュ動的アクションを作成するには、次の手順を実行します。

1. ページ・デザイナでページを表示します。
2. 左ペインで「動的アクション」タブをクリックします。
3. 「動的アクション」で、「イベント」を右クリックし、「動的アクションの作成」を選択します。

   「メッセージ」タブに、対処が必要なメッセージを示す赤または黄色の印が表示されます。メッセージを選択すると、プロパティ・エディタに関連する属性が表示されます。赤いエラー・メッセージは、保存する前に対処する必要があります。

   ページ・デザイナの属性は、グループに編成されています。グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。または、「グループに移動」をクリックしてグループを選択できます。

4. プロパティ・エディタで、次の動的アクション属性を編集します。

   ヒント:

   属性の詳細は、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。

   1. 指定、名前 - 動的アクションの名前を入力します。
   2. 実行オプション、順序 - このコンポーネントの順序を指定します。これによって実行の順序が決まります。
   3. 時期、イベント - 動的アクションを起動するイベントを指定します。
   4. 時期、選択タイプ - イベントのトリガーに使用するページ要素または構成体のタイプを選択します。特定の選択タイプの使用例は、関連する属性のヘルプを参照してください。
   次に、イベントがTrueと評価された場合に実行するアクションを定義します。
5. 「レンダリング」タブで、Trueの下の最初のアクションを選択します。プロパティ・エディタで、次のアクション属性を編集します。
   1. 識別、アクション: 「リフレッシュ」を選択します。
   2. 影響を受ける要素、選択タイプ: 「リージョン」を選択します。
   3. 影響を受ける要素、リージョン: チャートを含むリージョンを選択します。
6. 「保存」をクリックします。

注意:

「ページ・デザイナでのページの表示」

25.1.6 Flashチャートの保存について

Flashチャートをローカルに保存するサポートを追加できます。

イメージの保存をサポートするには、AnyChartはhttp://www.anychart.comに存在するサーバー側スクリプトを使用する必要があります。イメージの保存を試みると、データはBase64エンコーディングでこのサーバーに送信されます。次に、サーバーでデコードされ、デコードされたレスポンスが戻されます。

チャートの保存をローカルでサポートする場合は、デコーディング・スクリプトをローカル・サーバーでホストする必要があります。Flashチャートでは、AnyChart JavaScriptのファンクションgetPNGを使用する必要もあります。デフォルトでは、チャート・リージョンは埋込みHTMLタグを使用し、AnyChart JavaScriptコールを使用しません。AnyChart JavaScriptコールを使用するには、Flashチャートのリージョン・ソースを変更する必要があります。

関連項目:

ローカルでのFlashチャート保存のサポートを追加する方法については、AnyChartユーザーズ・ガイドでイメージまたはベクター・ファイルとしてのチャート保存に関する説明を参照してください。

25.1.7 FlashおよびHTML5チャートとのカスタムXMLの使用

カスタムXMLを追加することで、レガシー・チャートのルック・アンド・フィールをさらにカスタマイズします。

カスタムXMLを使用して、レガシー・チャートのルック・アンド・フィールを制御するには、次のステップを実行します。

1. ページ・デザイナでページを表示します。
2. 「レンダリング」タブで、チャートを探して「属性」ノードを選択します。
   属性は、グループに編成されています。グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。または、「グループに移動」をクリックしてグループを選択できます。

   ヒント:

   属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

3. 「カスタムXML」を検索します。
   1. カスタム: 「はい」を選択します。
   2. XML: このチャートのカスタム・チャートXMLを入力します。詳細は、AnyChart XMLリファレンスを参照してください。
4. 「保存」をクリックします。

ヒント:

サポートされているチャートのXML書式の詳細は、次のサイトのAnyChart XMLリファレンスを参照してください。

http://6.anychart.com/products/anychart/docs/