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

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.3.1 チャートのレガシー・タイプについて

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

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

25.3.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.3.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.3.2 レガシー・チャートのSQL問合せの作成

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

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

25.3.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.3.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.3.2.3 レガシー複数シリーズ構文(FlashおよびHTML5)

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

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

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

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

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

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

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

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

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

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

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

25.3.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.3.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.3.4 ページ・デザイナでのレガシー・チャートの追加

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

レガシー・チャートには、リージョン属性、チャート属性およびシリーズ属性の3種類の属性があります。チャート・シリーズのソースは、SQL問合せとして定義されます。

ページ・デザイナでレガシー・チャートを追加するには:

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

   ヒント:

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

4. ページ・デザイナでは、次に行う処理が示されます。エラーがある場合は、「メッセージの表示」アイコンがページ開発者ツールバーに表示されます。
   1. ページ・デザイナ・ツールバーの「メッセージの表示」アイコンをクリックします。
      「メッセージ」ダイアログに、対処する必要があるエラーが表示されます。
   2. エラーを選択すると、プロパティ・エディタの関連する属性がハイライトされます。
5. シリーズを編集します。

   「シリーズ」ノードがチャート・リージョンの「レンダリング」タブに表示されます。

   1. 「レンダリング」タブで、「シリーズ」ノードを選択します。
   2. ソース、SQL問合せ: チャート・シリーズに対するSQL問合せを入力します。
6. リージョン属性を編集します。
   1. 左ペイン(「レンダリング」タブ)で、チャートを選択します。
      プロパティ・エディタの「リージョン」タブにリージョン属性が表示されます
   2. プロパティ・エディタでリージョン属性を確認して編集します。
7. チャート属性を編集します。
   1. プロパティ・エディタで、「属性」タブを選択します。
   2. 必要なチャート属性を編集します。
8. 「保存」または「ページの保存と実行」をクリックします。

関連項目:

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

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

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

• レガシー・チャート属性の編集
  
• HTML5チャートからFlashチャートへの切替え
  
• 自動リフレッシュ更新の有効化
  

25.3.5.1 レガシー・チャート属性の編集

チャートには、リージョン属性、チャート属性およびシリーズ属性という3つのタイプの属性があります。「レンダリング」タブでチャートを選択すると、プロパティ・エディタに「リージョン」(リージョン属性を含む)と「属性」(チャート属性を含む)の2つのタブが表示されます。シリーズ属性は、チャートの下の「レンダリング」タブに表示されます。

チャート属性を編集するには:

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

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

   プロパティ・エディタにチャート属性が表示されます。属性は、グループに編成されます。属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

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

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

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

HTML5チャートをFlashチャートに切り替えるには:

1. ページ・デザイナでページを表示します。
2. チャート属性を編集します。
   1. 「レンダリング」タブで、チャートを見つけて選択します。
   2. プロパティ・エディタで「属性」タブを選択します。
   3. 属性を確認して編集します。
   属性は、グループに編成されています。属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。
3. 「外観」の「レンダリング」で、「Flashチャート」を選択します。
4. 「保存」をクリックします。

関連項目:

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

• ヘルプの表示

25.3.5.3 自動リフレッシュ更新の有効化

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

• 「自動リフレッシュ」属性の有効化
  
• ページ・デザイナでのリフレッシュ動的アクションの作成
  

25.3.5.3.1 「自動リフレッシュ」属性の有効化

「自動リフレッシュ」属性を有効にすると、チャートが更新され、指定した時間間隔内に基礎となるデータで行われた変更が反映されます。

自動リフレッシュを有効化するには:

1. ページ・デザイナでページを表示します。
2. 「レンダリング」タブで、チャートを見つけて選択します。
3. プロパティ・エディタで「属性」タブを選択します。
   属性は、グループに編成されています。属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。
4. 「自動リフレッシュ」グループを検索します。
   1. 自動リフレッシュ: 「オン」に設定します。
   2. 間隔: リフレッシュ間隔を秒単位で指定します。
5. 「保存」をクリックします。

ノート:

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

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

リフレッシュ動的アクションを作成するには:

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

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

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

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

   ヒント:

   属性についてさらに学習するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。

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

ノート:

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

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

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

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

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

関連項目:

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

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

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

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

1. ページ・デザイナでページを表示します。
2. 「レンダリング」タブで、チャートを見つけて選択します。
3. プロパティ・エディタで「属性」タブを選択します。
   属性は、グループに編成されています。属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。
4. 「カスタムXML」を検索します。
   1. カスタム: 「はい」を選択します。
   2. XML: このチャートのカスタム・チャートXMLを入力します。詳細は、AnyChart XMLリファレンスを参照してください。
5. 「保存」をクリックします。

ヒント:

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

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