2024年8月14日水曜日

Google ChartsをOracle APEXのアプリケーションに組み込む

Google Chartsを、Oracle APEXのアプリケーションに組み込んでみます。Google Chartsの使い方自体には、ほとんど触れません。

今までにOracle JET, Chart.jsおよびApexChartsをOracle APEXに組み込む方法を紹介しています。それと同じチャートを、Google Chartsで表示してみます。


直接Google Chartsで描画



Google ChartsのQuickstartを参考にして、div要素にチャートを描画します。

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

https://www.gstatic.com/charts/loader.js


静的コンテンツのリージョンの名前をGoogle Chartsとし、ソースのHTMLコードに以下を記述します。

<div id="myChart"></div>


タイプが非表示のページ・アイテムP1_VALUEを作成し、計算を作成します。実行のポイントはリージョンの前、計算のタイプにSQL問合せ(単一の値を返す)を選択し、SQL問合せとして以下を記述します。
select
    json_arrayagg(
        json_array( ename, sal )
        order by empno
    )
from emp where deptno = 10

チャートを描画するJavaScriptのコードを、ページ・プロパティのページ・ロード時に実行に記述します。


以上で実装は完了です。ページを実行すると以下のように表示されます。




テンプレート・コンポーネントの作成



Google Chartsのバー・チャートを描画するテンプレート・コンポーネントについて、設定内容を説明します。

テンプレート・コンポーネントの名前はGoogle Charts Bar Chartとしました。テンプレートの部分には以下を記述しています。カスタム要素はa-google-charts-bar-chartです。



カスタム属性としてCSS Classes、Groups、Value、Color、Orientationに加えてWidthとHeightをカスタム属性に加えています。レポートの列にチャートを表示する際に、幅の自動調整がいまひとつだったため、チャートの描画領域のWidthとHeightを指定できるようにしました。両方とも整数を指定します。


チャートの向きの指定であるOrientationは、Google Chartsに与えるオプションのbars属性の値になります。静的LOVのhorizontalの戻り値はhorizontal、verticalの戻り値はverticalとします。


テンプレート・コンポーネントのファイルとして、Google Chartsの実体となるloader.jsをアップロードします。JavaScriptのディレクトリはjsとします。

ディレクトリをjs、ファイル名をscript.jsとして、カスタム要素a-google-charts-bar-chartの実装を記述します。


ロードするファイルURLのJavaScriptに以下を記述します。

#PLUGIN_FILES#js/loader#MIN#.js
#PLUGIN_FILES#js/script#MIN#.js


以上でテンプレート・コンポーネントは完成です。

リージョンにGoogle Chartsのテンプレート・コンポーネントを実装します。

タイプが非表示のページ・アイテムP2_VALUEを作成し、計算を設定します。計算の設定は前出のP1_VALUEと同じです。


識別の名前をGoogle Charts、タイプをGoogle Charts Bar Chartとします。


リージョンの属性を開き、GroupsとしてENAME, SAL、ValueとしてP2_VALUE、Colorとして#309fdb、Orientationとしてhorizontalを設定します。


以上で実装は完了です。ページを実行すると以下のように表示されます。



対話モード・レポートへの組み込み



対話モード・レポートのソースのSQL問合せとして以下を記述します。
select
    dname,
    json_arrayagg(
        json_array( ename, sal )
        order by empno asc
    ) value,
    '' chart
from emp_dept_v group by dname

対話モード・レポートの列CHARTを選択し、識別のタイプをGoogle Charts Bar Chartに変更します。

設定のCSS Classesにw400、GroupsにENAME,SAL、Valueに列VALUE、Colorに#309fdb、Orientationにhorizontalを設定します。


以上で実装は完了です。ページを実行すると以下のように表示されます。


今回の記事は以上になります。

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

Google ChartsのJavaScriptファイルはテンプレート・コンポーネントには含めず、
https://www.gstatic.com/charts/loader.js
を参照するようにしています。

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

完
投稿者 時刻:
ラベル: , ,