グラフ表示は数量を視覚的に表現するには最も有効で優れた手段であると言えます。
情報システム部門は基本はエンド・ユーザーの要望の実現ですが
経営層や管理職にグラフによる視覚効果を積極的にアピールすることによって
情報システム部門の存在価値を高めることができます。
SVG によるグラフ作成
5250 エミュレータでは文字ベースが中心であったためにグラフ表示には
あまり馴染みはありませんが HTML の Web の世界でもグラフ表示は
それほど容易なものではありません。
HTML には基本的にグラフ表示のためのタグは用意されていないからです。
それでもグラフは
SVG (=Scalable Vector Graphics )
というグラフ表示の仕様があり、これは XML + JavaScript ライブラリーに
よってグラフを表示するというものです。
XML や JavaScript に馴染みのない IBM i の開発者が SVG を使ってグラフを
開発するというのはかなりの学習と手間を必要とします。
CRTGRAPH コマンドによるグラフ作成
AutoWeb では CRTGRAPH というコマンドが提供されており
これによってグラフを簡単に表示することができます。
ITEMS([ラベル+数量(11,2)]) + .... +追加のURL表示([表示]:[位置]) + PCオーガナイザー開始
CRTGRAPH コマンドの詳細は こちら を参照してください。
CRTGRAPH コマンドによって作成できるグラフ
縦棒グラフ(*COLUMN), 横棒グラフ(*BAR), 円グラフ(*PIE),
面グラフ(*AREA), 折れ線グラフ(*LINE)
のいずれかを指定することができます。
グラフの項目
グラフの項目として項目の見出しとなるラベル(20A) + 数量(11,2)を
最大 30 項目
まで指定することができます。
追加の表示
グラフを同じ画面上に画面分割(スプリット・ウィンドウ)して
表示することを指定することができます。
またそのときの追加の表示位置を指定することができます。
( *TOP, *BOTTOM, *RIGHT, *LEFT
)
グラフ・メニューのサンプル
GO QTROBJ/GRAPH
または GO QTROBJ/DDS
(DDS開発メニュー)の
「6.画像およびグラフ・メニュー」を選択すると次のような
グラフ・メニューが表示されます。
【解説】
グラフ表示の「11. 縦棒グラフ」〜「15. 面グラフ」のいずれかを
選択するとサンプルのグラフを表示することができます
- 縦棒グラフ
- 横棒グラフ
- 円グラフ
- 折れ線グラフ
- 面グラフ
グラフを表示するサンプルCMD : TATGRF
0001.00 CMD PROMPT(' 縦棒グラフ ') 0002.00 PARM KWD(POSITION) TYPE(*CHAR) LEN(7) RSTD(*YES) + 0003.00 DFT(*BOTTOM) VALUES(*TOP *BOTTOM *RIGHT + 0004.00 *LEFT) PROMPT(' 表示位置 ')
グラフを表示するサンプルCLP : TATGRFCL
0001.00 PGM PARM(&POSITION) 0002.00 /*-------------------------------------------------------------------*/ 0003.00 /* TATGRFCL : 海面漁獲量ランキング */ 0004.00 /* */ 0005.00 /* 縦棒グラフ */ 0006.00 /* */ 0007.00 /* 2017/06/08 作成 */ 0008.00 /*-------------------------------------------------------------------*/ 0009.00 DCL VAR(&POSITION) TYPE(*CHAR) LEN(7) 0010.00 0011.00 CALL PGM(QTROBJ/DSPGRAPH) PARM('001' '*COLUMN ' + 0012.00 &POSITION) 0013.00 ENDPGM
【解説】
この縦棒グラフの表示 CLP は DSPGRAPH
という名前の汎用的なプログラムに
「海面漁獲量グラフ」を示す「001
」というパラメータと縦棒グラフを示す「*COLUMN
」という
パラメータとコマンドから受け取った表示位置を示す「POSITION
」というパラメータを
渡します。
0001.00 PGM PARM(&HOKCOD &GRAPH &POSITION) 0002.00 /*-------------------------------------------------------------------*/ 0003.00 /* DSPGRAPH : グラフ表示 */ 0004.00 /* */ 0005.00 /* 2017/06/08 作成 */ 0006.00 /*-------------------------------------------------------------------*/ 0007.00 DCLF FILE(QTRFIL/HOKRIKU) RCDFMT(*ALL) 0008.00 DCL VAR(&POSITION) TYPE(*CHAR) LEN(7) 0009.00 DCL VAR(&GRAPH) TYPE(*CHAR) LEN(10) 0010.00 DCL VAR(&MSG) TYPE(*CHAR) LEN(132) 0011.00 DCL VAR(&MSGID) TYPE(*CHAR) LEN(7) 0012.00 DCL VAR(&MSGF) TYPE(*CHAR) LEN(10) 0013.00 DCL VAR(&MSGFLIB) TYPE(*CHAR) LEN(10) 0014.00 DCL VAR(&MSGDTA) TYPE(*CHAR) LEN(132) 0015.00 DCL VAR(&TYPE) TYPE(*CHAR) LEN(1) 0016.00 DCL VAR(&TOPGMQ) TYPE(*CHAR) LEN(10) 0017.00 DCL VAR(&MSGTYPE) TYPE(*CHAR) LEN(10) + 0018.00 VALUE('*ESCAPE ') 0019.00 DCL VAR(&APIERR) TYPE(*CHAR) LEN(116) + 0020.00 VALUE(X'000074') /* 2 進数 */ 0021.00 DCL VAR(&NULL4) TYPE(*CHAR) LEN(4) + 0022.00 VALUE(X'00000000') 0023.00 DCL VAR(&TITLE) TYPE(*CHAR) LEN(30) 0024.00 MONMSG MSGID(CPF0000) EXEC(GOTO CMDLBL(ERROR)) 0025.00 0026.00 /*( 環境の取得 )*/ 0027.00 RTVJOBA TYPE(&TYPE) 0028.00 IF COND(&TYPE *EQ '0') THEN(DO) /* バッチ */ 0029.00 CHGVAR VAR(&TOPGMQ) VALUE('*SYSOPR ') 0030.00 ENDDO /* バッチ */ 0031.00 ELSE CMD(DO) /* 対話式 */ 0032.00 CHGVAR VAR(&TOPGMQ) VALUE('*TOPGMQ ') 0033.00 ENDDO /* 対話式 */ 0034.00 0035.00 /*( パラメータの取得 )*/ 0036.00 IF COND(&HOKCOD *EQ '001') THEN(DO) 0037.00 CHGVAR VAR(&TITLE) VALUE(' 海面漁獲量グラフ ') 0038.00 ENDDO 0039.00 IF COND(&HOKCOD *EQ '002') THEN(DO) 0040.00 CHGVAR VAR(&TITLE) VALUE(' 人口グラフ ') 0041.00 ENDDO 0042.00 IF COND(&HOKCOD *EQ '003') THEN(DO) 0043.00 CHGVAR VAR(&TITLE) VALUE(' カニ漁獲量グラフ ') 0044.00 ENDDO 0045.00 IF COND(&HOKCOD *EQ '004') THEN(DO) 0046.00 CHGVAR VAR(&TITLE) VALUE(' 米生産量グラフ ') 0047.00 ENDDO 0048.00 IF COND(&HOKCOD *EQ '005') THEN(DO) 0049.00 CHGVAR VAR(&TITLE) VALUE(' 面積比較グラフ ') 0050.00 ENDDO 0051.00 IF COND(&HOKCOD *EQ '006') THEN(DO) 0052.00 CHGVAR VAR(&TITLE) VALUE(' 年間積雪日数グラフ ') 0053.00 ENDDO 0054.00 IF COND(&HOKCOD *EQ '007') THEN(DO) 0055.00 CHGVAR VAR(&TITLE) VALUE(' 年間降雪量グラフ ') 0056.00 ENDDO 0057.00 0058.00 /*( キーのセット )*/ 0059.00 OVRDBF FILE(HOKRIKU) TOFILE(QTRFIL/HOKRIKU) + 0060.00 POSITION(*KEYAE 1 HOKRIKUR &HOKCOD) + 0061.00 SECURE(*YES) OVRSCOPE(*JOB) 0062.00 /*( レコードの取得 )*/ 0063.00 RCVF RCDFMT(HOKRIKUR) 0064.00 MONMSG MSGID(CPF0864) EXEC(GOTO CMDLBL(REDEND)) 0065.00 DLTOVR FILE(HOKRIKU) LVL(*JOB) 0066.00 MONMSG CPF9800 0067.00 /*( グラフに表示する )*/ 0068.00 CRTGRAPH GPAPH(&GRAPH) TEXT(&TITLE) ITEMS((' 新潟県 ' + 0069.00 &HOKSU1) (' 石川県 ' &HOKSU2) (' 富山県 ' + 0070.00 &HOKSU3) (' 福井県 ' &HOKSU4)) + 0071.00 ADDURL(*YES &POSITION) 0072.00 RETURN 0073.00 0074.00 REDEND: 0075.00 SNDPGMMSG MSG(' レコード ' *CAT &HOKCOD *CAT + 0076.00 ' が見つかりませんでした。 ') + 0077.00 MSGTYPE(*DIAG) 0078.00 RETURN 0079.00 0080.00 APIERR: 0081.00 CHGVAR VAR(&MSGID) VALUE(%SST(&APIERR 9 7)) 0082.00 CHGVAR VAR(&MSGDTA) VALUE(%SST(&APIERR 17 100)) 0083.00 CHGVAR VAR(&MSGF) VALUE('QCPFMSG ') 0084.00 CHGVAR VAR(&MSGFLIB) VALUE('QSYS ') 0085.00 GOTO SNDMSG 0086.00 0087.00 ERROR: RCVMSG MSGTYPE(*LAST) RMV(*NO) MSG(&MSG) + 0088.00 MSGDTA(&MSGDTA) MSGID(&MSGID) MSGF(&MSGF) + 0089.00 MSGFLIB(&MSGFLIB) 0090.00 SNDMSG: IF COND(&MSGID *EQ ' ') THEN(DO) 0091.00 SNDPGMMSG MSGID(CPF9897) MSGF(QCPFMSG) MSGDTA(&MSG) + 0092.00 TOMSGQ(&TOPGMQ) MSGTYPE(&MSGTYPE) 0093.00 ENDDO 0094.00 ELSE CMD(DO) 0095.00 SNDPGMMSG MSGID(&MSGID) MSGF(&MSGFLIB/&MSGF) + 0096.00 MSGDTA(&MSGDTA) TOMSGQ(&TOPGMQ) + 0097.00 MSGTYPE(&MSGTYPE) 0098.00 ENDDO 0099.00 ENDPGM
【解説】
この DSPGRAPH
という名前の CLP は多様なグラフを表示するための汎用的なプログラムです。
最後には
0067.00 /*( グラフに表示する )*/ 0068.00 CRTGRAPH GPAPH(&GRAPH) TEXT(&TITLE) ITEMS((' 新潟県 ' + 0069.00 &HOKSU1) (' 石川県 ' &HOKSU2) (' 富山県 ' + 0070.00 &HOKSU3) (' 福井県 ' &HOKSU4)) + 0071.00 ADDURL(*YES &POSITION)
によってグラフを表示しています。
もうひとつこのプログラムで参考にして頂きたいことは
0007.00 DCLF FILE(QTRFIL/HOKRIKU) RCDFMT(*ALL)
で定義されているキーつき索引ファイル QTRFIL/HOKRIKU
に対して
0058.00 /*( キーのセット )*/ 0059.00 OVRDBF FILE(HOKRIKU) TOFILE(QTRFIL/HOKRIKU) + 0060.00 POSITION(*KEYAE 1 HOKRIKUR &HOKCOD) + 0061.00 SECURE(*YES) OVRSCOPE(*JOB) 0062.00 /*( レコードの取得 )*/ 0063.00 RCVF RCDFMT(HOKRIKUR) 0064.00 MONMSG MSGID(CPF0864) EXEC(GOTO CMDLBL(REDEND)) 0065.00 DLTOVR FILE(HOKRIKU) LVL(*JOB) 0066.00 MONMSG CPF9800
によってキーでアクセスしていることです。
CLP でデータ・ベースを READ
する例は珍しくありませんが
CLP によってキーでデータ・ベースを読み取る珍しい例でもあります。
DDS ソースにグラフを埋め込むには
5250 ハンドラーを使用すれば DDS ソース内にグラフを埋め込むことができます。
次は QTRSRC / QDSPSRC. PGM120FM からの抜粋でグラフだけを表示しています。
DDS ソースにグラフを埋め込むには GRAPH キー・ワードを指定します。
GRAPH キー・ワードの仕様
GRAPH [タイプ] WIDTH(幅) HEOGHT(高さ) TEXT("タイトル") ITEMS(("項目名1" 数1) ("項目名2" 数2) .... ("項目名30", 数30)
のようにして最大 30 項目を指定することができます。
[ タイプ ] | ・・・・・ |
*BAR : 横棒グラフ *PIE : 円グラフ *COLUMN : 縦棒グラフ *LINE : 折れ線グラフ *AREA : 面グラフ |
---|---|---|
[ 高さ ] | ・・・・・ | グラフの高さをピクセル値で指定します。 |
[ 幅 ] | ・・・・・ | グラフの横幅をピクセル値で指定します。 |
[ TEXT ] | ・・・・・ | グラフの見出しタイトルを 30 バイト以内で指定します。 |
[ 項目名 ] | ・・・・・ | グラフ項目のラベルを 20 バイト以内で指定します。 |
[ 数 ] | ・・・・・ | グラフの数量を 11(2) 以内で指定します。 |
A R DSPGRAPH A TEXT(' グラフの表示 ') A OVERLAY A PUTRETAIN *( 横棒グラフ ) A 18 83GRAPH *BAR WIDTH(365) HEIGHT(280) - A TEXT(" 戦国大名勢力図 ") - A ITEMS((" 織田信長 " &P1) - A (" 武田信玄 " &P2) - A (" 上杉謙信 " &P3) - A (" 徳川家康 " &P4) - A (" 北条氏康 " &P5)) *( 円グラフ ) A 18135GRAPH *PIE WIDTH(220) HEIGHT(220) - A TEXT(" 戦国大名勢力図 ") - A ITEMS((" 織田信長 " &P1) - A (" 武田信玄 " &P2) - A (" 上杉謙信 " &P3) - A (" 徳川家康 " &P4) - A (" 北条氏康 " &P5)) A P1 4S 0H A P2 4S 0H A P3 4S 0H A P4 4S 0H A P5 4S 0H
【解説】
この例では横棒グラフ ( *BAR ) と円グラフ ( *PIE ) のふたつのグラフを指定しています。
項目の数値は数値を直接指定するのではなく変数値で指定しています。
&P1 〜 &P5 がグラフの値を示す変数であり
A P1 4S 0H
のようにして非表示 ( H ) で定義してください。( P ではありません。)
このグラフを表示する RPG プログラム: PGM120R では
初期サブルーチン: *INZSR の中で
*( GRDBOX の値を設定 ) C Z-ADD 78 P78 C Z-ADD 82 P82 C Z-ADD 89 P89 C Z-ADD 99 P99 C Z-ADD 16 P16 C Z-ADD 35 P35 C Z-ADD 160 P160
のようにして項目の数値を与えています。
DSPF の作成は必ず CRTEXDSPF (拡張表示装置ファイル作成)によって
DSPF を作成してください。
また実行は 5250 ハンドラーが組み込まれたプログラムによって実行してください。
5250 ハンドラーは GRAPH キー・ワードを検知すると CRTGRAPH コマンドを実行して
作成されたグラフを HTML に埋め込みます。
従って DDS にグラフを埋め込むには
- ● グラフ作成のオプションが契約導入されている
- ● CRTEXDSPF コマンドによって DSPF を作成する
- ● 5250 ハンドラーが組み込まれたプログラムによって実行する
の 3 つの条件が必要です。
[ 参考リンク ]
( http://218.44.135.18/QSYS.LIB/QTRSRC.LIB/QDSPSRC.FILE/PGM120FM.MBR )
PGM120R : DDS グラフを実行する RPG ソース( http://218.44.135.18/QSYS.LIB/QTRSRC.LIB/QRPGLESRC.FILE/PGM120R.MBR )