グラフ

見出しのアイコン

グラフ表示は数量を視覚的に表現するには最も有効で優れた手段であると言えます。
情報システム部門は基本はエンド・ユーザーの要望の実現ですが
経営層や管理職にグラフによる視覚効果を積極的にアピールすることによって
情報システム部門の存在価値を高めることができます。

SVG によるグラフ作成

5250 エミュレータでは文字ベースが中心であったためにグラフ表示には
あまり馴染みはありませんが HTML の Web の世界でもグラフ表示は
それほど容易なものではありません。
HTML には基本的にグラフ表示のためのタグは用意されていないからです。
それでもグラフは

SVG (=Scalable Vector Graphics )

というグラフ表示の仕様があり、これは XML + JavaScript ライブラリーに
よってグラフを表示するというものです。
XML や JavaScript に馴染みのない IBM i の開発者が SVG を使ってグラフを
開発するというのはかなりの学習と手間を必要とします。

CRTGRAPH コマンドによるグラフ作成

AutoWeb では CRTGRAPH というコマンドが提供されており
これによってグラフを簡単に表示することができます。

CRTGRAPH ------ TEXT('グラフの表題') --GRAPH([グラフの種類])--
    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 つの条件が必要です。

[ 参考リンク ]
PGM120FM : DDS グラフの DSPF ソース

( 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 )