2025年3月14日金曜日

任意のSELECT文をデータ・ソースとしたJETチャートを動的に生成する

チャートのタイプ（バーまたはパイ・チャート）を選択し、任意のSELECT文をデータ・ソースとしたJETチャートを動的に生成するAPEXアプリケーションを作成します。

作成するAPEXアプリケーションは以下のように動作します。


以下より作成したAPEXアプリケーションについて説明します。

最初に空のAPEXアプリケーションを作成します。名前はDynamic JET Chartとします。


機能はすべてホーム・ページに実装します。ホーム・ページをページ・デザイナで開きます。


チャート・タイプを選択するページ・アイテムとしてP1_CHART_TYPEを作成します。タイプは選択リスト、ラベルはChart Typeとします。

LOVのタイプに静的値を選択します。NULL表示値は- Select Chart Type -とします。


LOVの静的値として表示値がPie Chart、値がpieと表示値がBar Chart、値がbarのペアを設定します。


データ・ソースとなるSELECT文を記述するページ・アイテムとしてP1_SQLを作成します。タイプはテキスト・フィールド、ラベルはSource SQL Statementとします。


チャートを生成するボタンとしてGENERATEを作成します。外観のホットをオン、テンプレート・オプションのWidthをStretchにします。

動作のアクションとして動的アクションで定義を設定します。JETチャートのHTML要素はサーバー側で生成しますが、チャートの描画はクライアント側のJavaScriptで行います。


JETチャートを描画するリージョンを作成します。識別の名前はChart、タイプは静的コンテンツとし、ソースのHTMLコードとして以下を記述します。

<div id="chart"></div>

外観のテンプレート・オプションのBody Heightを640px、Top MarginをMediumに設定しています。


JETチャートのHTML要素を生成するプロセスを、Ajaxコールバックとして実装します。

識別の名前はGET_CHART、タイプとしてコードを実行を選択します。ソースのPL/SQLコードとして以下を記述します。



作成したAjaxコールバックGET_CHARTをボタンGENERATEをクリックしたときに呼び出すように、動的アクションを作成します。

ボタンGENERATEに動的アクションを作成します。識別の名前はonClick GENERATEとします。タイミングのイベントはデフォルトのクリックです。


TRUEアクションとして以下のJavaScriptコードを実行します。JETチャートのHTML要素はデータベース・サーバーで生成しますがページの再ロードを避けるため、画面への描画はブラウザ上で実施します。
apex.server.process( "GET_CHART", {
    pageItems: "#P1_CHART_TYPE,#P1_SQL"
}, {
    success: function( data )  {
        apex.debug.info(data.markup);
        const elem = document.getElementById("chart");
        elem.insertAdjacentHTML('afterbegin', data.markup);
    }
} );

最後にページ・プロパティに、JETのライブラリをロードするために必要な設定を追加します。ページにチャート・リージョンが含まれる場合は、Oracle APEXがJETライブラリをロードするためのコードを生成します。しかし、今回作成しているアプリにはJETを必要としているコンポーネントがページにないため、JETライブラリがロードされません。

ページ・プロパティのJavaScriptのファイルURLに以下を記述します。

[require jet]

ページ・ロード時に実行に以下を記述します。

require(["ojs/ojchart"], function() {});

CSSのファイルURLに以下を記述します。

#JET_CSS_DIRECTORY#redwood/oj-redwood-notag-min.css


以上でAPEXアプリケーションは完成です。アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。

Oracle JETのドキュメントへのリンクは以下になります。
https://www.oracle.com/webfolder/technetwork/jet/index.html

主にCookbookとAPI Documentを参照することになりますが、わかりやすいとはいえないです。
https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html
https://docs.oracle.com/en/middleware/developer-tools/jet/18/reference-api/index.html

Oracle JETはサンプルも少なく扱いにくい印象がありましたが、Claude 3.7 Sonnetに聞くとそれなりの回答が返されます。ドキュメントにあたる前に生成AIに聞くと時短になります。


今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/dynamic-jet-chart.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完 
投稿者 時刻:
ラベル: