Image-Charts: 棒グラフ, 生成
Image-Charts: 棒グラフ, 生成 (Image-Charts: Bar Chart, Create)
数値TSVデータ(国別人口、月別売上、など)から棒グラフや折れ線グラフを生成します。グラフは Image-Chart を使用して自動的に生成されます。Y軸目盛は自動的に最適化されます。X軸目盛はTSVの一行目が参照されます。画像はPNG形式で出力されます。
Configs
  • A1: TSV文字列をセットしてください *#{EL}
  • B1: PNGファイル(棒グラフ/折れ線グラフ)の保存ファイル名をセットしてください#{EL}
  • B2: PNGファイル(棒グラフ/折れ線グラフ)が格納されるファイル型データ項目を選択してください (追加) *
  • C1: “集約棒グラフ縦” 以外のグラフを出力したい場合、グラフTypeをセットしてください#{EL}
  • C2: グラフの色を指定したい場合、系列カラーバリエーション値をセットしてください#{EL}
  • C3: グラフ背景色を指定したい場合、Fill値をセットしてください#{EL}
  • C4: “800×450” 以外のサイズで出力したい場合、画像サイズをセットしてください#{EL}
  • C5: 凡例ラベルを表示したい場合、パイプ区切りでセットしてください#{EL}
Script (click to open)
// GraalJS Script (engine type: 2)

//////// START "main()" /////////////////////////////////////////////////////////////////

main();
function main(){ 

//// == Config Retrieving / 工程コンフィグの参照 ==
const strInputTsv  = configs.get      ( "StrConfA1" );    /// REQUIRED
  if( strInputTsv=== "" ){
    throw new Error( "\n AutomatedTask ConfigError:" +
                     " Config {A1:Tsv} is empty \n" );
  }
let   strSaveas    = configs.get      ( "StrConfB1" );    // NotRequired
  if( strSaveas  === "" ){
    engine.log( " AutomatedTask ConfigWarning:" +
                " Config {B1:Saveas} is empty" );
  }
const filesPocket  = configs.getObject( "SelectConfB2" ); /// REQUIRED

let   strType      = configs.get      ( "StrConfC1" );    // NotRequired
  if( strType    === "" ){
      strType      = "bvg";
  }
let   strColors    = configs.get      ( "StrConfC2" );    // NotRequired
  if( strColors  === "" ){
      strColors    = "4F81BDff,C0504Dff,9BBB59ff,8064A2ff,4BACC6ff,F79646ff";
  }
let   strFill      = configs.get      ( "StrConfC3" );    // NotRequired
  if( strFill    === "" ){
      strFill      = "c,s,ffffffff";
  }
let   strSize      = configs.get      ( "StrConfC4" );    // NotRequired
  if( strSize    === "" ){
      strSize      = "800x450";
  }
const strLegend    = configs.get      ( "StrConfC5" );    // NotRequired

// for Enterprise
let strApiDomain      = "https://image-charts.com/";
let strGENERATED_HASH = "";


//// == Data Retrieving / ワークフローデータの参照 ==
let filesAttached = engine.findData( filesPocket ); // java.util.ArrayList
if( filesAttached === null ) {
  engine.log( " AutomatedTask FilesArray {B2}: (empty)" );
  filesAttached = new java.util.ArrayList();
}else{
  engine.log( " AutomatedTask FilesArray {B2}: " +
              filesAttached.size() + " files" );
}


//// == Calculating / 演算 ==
/// Extract from TSV
let arrInputTsv   = strInputTsv.split("\n");
let strChartData  = "a:";
let strTsvLabels  = arrInputTsv[0];
for( let i = 1; i < arrInputTsv.length; i++ ){
  if( arrInputTsv[i] === "" ){ continue; }
  let arrCells = arrInputTsv[i].split("\t");
  for( let j = 0; j < arrCells.length; j++ ){
    let strCell   = arrCells[j].replace(/,/g, '');
    let numCell   = parseFloat( strCell );
    if( isNaN( numCell ) ){
        numCell   = 0;
    }
    strChartData += numCell + ",";
  }
  strChartData    = strChartData.slice( 0, -1 ); // remove ","
  strChartData   += "|";
}
strChartData    = strChartData.slice( 0, -1 ); // remove "|"

/// Adjust labels to the image width
const numCharWidth  = 8;
const numImageWidth = parseInt( strSize, 10 ); // "800x450" -> 800
const arrTsvLabels  = strTsvLabels.split("\t");
let   strAxis       = "";
for( let i = 0; i < arrTsvLabels.length; i++ ){
  let strTmpAxis = "0:|";
  for( let j = 0; j < arrTsvLabels.length; j++ ){
    if( j % (i+1) === 0 ){ // remainder / 剰余
      strTmpAxis += arrTsvLabels[j] + "|";
    }else{
      strTmpAxis += "|";
    }
  }
  strTmpAxis = strTmpAxis.slice( 0, -1 ); // remove "|"
  if( strTmpAxis.length * numCharWidth < numImageWidth ){
    strAxis       = strTmpAxis;
    break;
  }
}

if( strSaveas === "" ){
  strSaveas   = processInstance.getProcessInstanceId() + ".png";
}


/// Image-charts developer hub > Bar Charts, Line Charts
/// https://documentation.image-charts.com/bar-charts/
/// https://documentation.image-charts.com/line-charts/
// request1, prepare
let request1Uri = strApiDomain + "chart";
let request1    = httpClient.begin(); // HttpRequestWrapper
if( strGENERATED_HASH !== "" ){
    request1    = request1.queryParam( "ichm", strGENERATED_HASH );
}
    request1    = request1.formParam( "cht",  strType );
    request1    = request1.formParam( "chco", strColors  );
    request1    = request1.formParam( "chd",  strChartData );
    request1    = request1.formParam( "chf",  strFill );
    request1    = request1.formParam( "chg",  "1,1" ); // enable Grid Lines
    request1    = request1.formParam( "chs",  strSize );
    request1    = request1.formParam( "chxl", strAxis );
    request1    = request1.formParam( "chxt", "x,y" ); // show two Axis lines
if( strLegend !== "" ){
    request1    = request1.formParam( "chdl", strLegend );
    request1    = request1.formParam( "chdlp", "t" );
}
// request1, try
const response1     = request1.post( request1Uri ); // HttpResponseWrapper
engine.log( " AutomatedTask ApiRequest1 Start: " + request1Uri );
const response1Code = response1.getStatusCode() + "";
const response1Body = response1.getResponseAsString() + "";
engine.log( " AutomatedTask ApiResponse Status: " + response1Code );
if( response1Code !== "200"){
  throw new Error( "\n AutomatedTask UnexpectedResponseError: " +
                    response1Code + "\n" + response1Body + "\n" );
}
// response1, parse
const fileTmp = new com.questetra.bpms.core.event.scripttask.NewQfile(
                 strSaveas, response1.getContentType(), response1.getResponse()
                );
filesAttached.add( fileTmp );


//// == Data Updating / ワークフローデータへの代入 ==
engine.setData( filesPocket,    filesAttached );


} //////// END "main()" /////////////////////////////////////////////////////////////////


/*
Notes:
- The token arrived, a chart is automatically generated with TSV and stored to the files type. ImageChartsBar
    - The first line of TSV data are used as the X-axis tick marks (chxl: Chart X-Label).
        - If too many, the label characters will be thinned out.
    - The second and subsequent numeric lines of TSV data are used as chart data (chd: Chart Data).
        - Interprets them with JavaScript `parseFloat()` after removing the comma (digit delimiter).
        - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat
        - The cell parsed as `NaN` is regarded as `0`.
- The Image-Charts API returns a chart image in response to a URL GET or POST request.
    - The Services are available on a free or paid subscription basis.
    - https://documentation.image-charts.com/
- Various Charts bar/line such as sales by branch and overtime hours by month can be automatically generated.
    - If to automatically generate more complicated charts or presentation, consider using "Google Slide API".
        - Google Slides: Page, PNG Export
        - https://support.questetra.com/addons/google-slides-page-export-as-png-2021/
        - Google Slides: Page, Refresh Charts
        - https://support.questetra.com/addons/google-slides-page-refresh-charts-2021/
        - Google Sheets: Sheet, Append TSV
        - https://support.questetra.com/addons/google-sheets-sheet-append-tsv/
- Sample Config
    - Chart Type (cht)
        - `bvg`: Grouped Vertically (default)
        - `bhg`: Grouped Horizontally
        - `bvs`: Stacked Vertically
        - `bhs`: Stacked Horizontally
        - `lc`: Line Chart
    - Chart Color (chco)
        - If more than number of data series, all series will have different colors.
        - `4F81BD,C0504D,9BBB59,8064A2,4BACC6,F79646` (default: 6 colors: blue red green purple water orange)
        - `009900,0099CC,0033FF,990099`
        - `009900,0099CC,0033FF,990099,009999,00CC99,000099,FF0000`
        - If specify an optional transparency `[AA]`, a transparent chart will be generated. `RRGGBB[AA]` (RGBA)
        - https://documentation.image-charts.com/reference/color-format/
    - Chart Background Fill (chf)
        - Solid Fills, Gradient Fills, or Image Fills can be set.
        - `c,s,ffffffff`: White and completely opaque (default)
        - `a,s,000000cd`: Colorless and 80% opacity
        - `c,s,99ff997f`: Green and 50% opacity
        - https://documentation.image-charts.com/reference/background-fill/
    - Output image size (chs: Chart Size)
        - `800x450` (default)
    - Legend Labels (chdl, chdlp)
        - If you want to display the descriptions of each series, set them by separating the pipes "`|`".
        - `Male population|Female population`
- "`{pid}.png`", if not specify a file name.

APPENDIX-en
- General quota limits in Image-Charts API
    - 90 queries per 10 seconds per IP address (thus 9 queries per second (QPS))
    - https://documentation.image-charts.com/limits-and-quotas/
- Sample Data: World Population Prospects, the 2019 Revision
    - https://population.un.org/wpp/Download/Standard/Population/
    - Population /K
        - China	India	USA	Japan
        - 1433784	1366418	329065	126860
    - Male Female Population /K
        - China	India	USA	Japan
        - 735624	710130	162826	61950
        - 698159	656288	166239	64910
- Sample Data: Changes in real GDP by industry in Japan
    - https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r02/html/ne140000.html
- To remove Image-Charts watermark (Common to Image-Charts)
    - Enterprise version
    - https://documentation.image-charts.com/enterprise/#remove-image-charts-watermark-by-signing-urls
- An error will occur if the data size exceeds 300 kb.
    - This add-on communicates with Image-Charts via POST Request.
    - https://documentation.image-charts.com/reference/post-requests/

Notes-ja:
- 案件が到達した際、文字列型内の「TSVデータ」を元にグラフ画像を自動生成しファイル型に格納します。ImageChartsBar
    - TSVデータの1行目は、X軸目盛(チャートXラベル/chxl)として利用されます。
        - X軸目盛の文字数が多い場合、間引かれて出力されます。
    - TSVデータの2行目以降(数値文字列)は、グラフ用データ(チャートデータ/chd)として利用されます。
        - カンマ(桁区切文字)を削除したうえで JavaScript `parseFloat()` で解釈します。
        - https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseFloat
        - なお `NaN` と解析されたセルは `0` とみなします。
- Image-Charts API は、URLGETまたはPOSTリクエストに応答してグラフ画像(チャート画像)を返します。
    - Image-Charts API は、無料または有料のサブスクリプションベースで利用できます。
    - https://documentation.image-charts.com/
- 支店別売上高、月別残業時間、など、様々な棒グラフ/折れ線グラフを自動生成できます。
    - より複雑なグラフやプレゼン資料を自動生成させたい場合は、"Google Slide API" 等の活用を検討します。
        - Google スライド: ページ, PNGエクスポート
        - https://support.questetra.com/ja/addons/google-slides-page-export-as-png-2021/
        - Google スライド: ページ, グラフ全更新
        - https://support.questetra.com/ja/addons/google-slides-page-refresh-charts-2021/
        - Google スプレッドシート: Sheet, TSVデータを追記
        - https://support.questetra.com/ja/addons/google-sheets-sheet-append-tsv/
- コンフィグ設定のサンプル
    - グラフ種類の指定(チャートタイプ/cht)
        - `bvg`: 集合棒グラフ縦 Grouped Vertically (デフォルト)
        - `bhg`: 集合棒グラフ横 Grouped Horizontally
        - `bvs`: 積み上げ棒グラフ縦 Stacked Vertically
        - `bhs`: 積み上げ棒グラフ横 Stacked Horizontally
        - `lc`: 折れ線グラフ Line Chart
    - 色の指定(チャートカラー/chco)
        - "系列の数"(2行目以降のデータ行数)より多く指定しておくと、すべての系列で異なる色になります。
        - `4F81BDFF,C0504DFF,9BBB59FF,8064A2FF,4BACC6FF,F79646FF` (デフォルト:青、赤、緑、紫、水、橙の6色)
        - `009900,0099CC,0033FF,990099`
        - `009900,0099CC,0033FF,990099,009999,00CC99,000099,FF0000`
        - 不透明度`[AA]`を指定すれば、半透明のグラフが生成されます。 `RRGGBB[AA]` (RGBA)
        - https://documentation.image-charts.com/reference/color-format/
    - 背景の塗りつぶし(チャートフィル/chf)
        - 単色塗りつぶし、グラデーション塗りつぶし、画像参照塗りつぶし、が設定可能です。
        - `c,s,ffffffff`: 白色で完全不透明 (デフォルト)
        - `a,s,000000cd`: 無色で不透明度80%
        - `c,s,99ff997f`: 緑色で不透過度50%
        - https://documentation.image-charts.com/reference/background-fill/
    - 出力画像のサイズ(チャートサイズ/chs)
        - `800x450` (デフォルト)
    - 凡例ラベル(レジェンドラベル/chdl、レジェンドラベルポジション/chdlp)
        - 系列の名称を表示させたい場合はパイプ区切りでセットします。
        - `男性人口|女性人口`
- ファイル名を指定しなかった場合、ファイル名は "`{pid}.png`" となります。

APPENDIX-ja
- Image-Charts API におけるクオータ制限
    - IPアドレスごとに10秒あたり90クエリ(9クエリ/秒)
    - https://documentation.image-charts.com/limits-and-quotas/
- サンプルData:国別人口 (出典: 世界人口推計, 2019年改訂版)
    - https://population.un.org/wpp/Download/Standard/Population/
    - 世界人口/千人 (Population /K)
        - China	India	USA	Japan
        - 1433784	1366418	329065	126860
    - 世界男女人口/千人 (Male Female Population /K)
        - China	India	USA	Japan
        - 735624	710130	162826	61950
        - 698159	656288	166239	64910
- サンプルData:日本の産業別実質GDPの推移 (商業、不動産、医療福祉、建設、対事業所S、輸送機械、対個人S、情報通信)
    - https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r02/html/ne140000.html
- Image-Charts Watermark(透かし)の削除方法(Image-Charts共通)
    - Enterprise version
    - https://documentation.image-charts.com/enterprise/#remove-image-charts-watermark-by-signing-urls
- データサイズが300kbを超えるような大きなデータの場合、エラーになります。
    - 本アドオンでは、POST Request により通信されます。
    - https://documentation.image-charts.com/reference/post-requests/
*/

Download

2021-07-26 (C) Questetra, Inc. (MIT License)
https://support.questetra.com/ja/addons/image-charts-bar-chart-create-2021/
Addonファイルのインポートは Professional でのみご利用いただけます

Notes

  • 案件が到達した際、文字列型内の「TSVデータ」を元にグラフ画像を自動生成しファイル型に格納します。ImageChartsBar
    • TSVデータの1行目は、X軸目盛(チャートXラベル/chxl)として利用されます。
      • X軸目盛の文字数が多い場合、間引かれて出力されます。
    • TSVデータの2行目以降(数値文字列)は、グラフ用データ(チャートデータ/chd)として利用されます。
  • Image-Charts API は、URLGETまたはPOSTリクエストに応答してグラフ画像(チャート画像)を返します。
  • 支店別売上高、月別残業時間、など、様々な棒グラフ/折れ線グラフを自動生成できます。
  • コンフィグ設定のサンプル
    • グラフ種類の指定(チャートタイプ/cht)
      • bvg: 集合棒グラフ縦 Grouped Vertically (デフォルト)
      • // bhg: 集合棒グラフ横 Grouped Horizontally
      • bvs: 積み上げ棒グラフ縦 Stacked Vertically
      • // bhs: 積み上げ棒グラフ横 Stacked Horizontally
      • lc: 折れ線グラフ Line Chart
    • 色の指定(チャートカラー/chco)
      • “系列の数”(2行目以降のデータ行数)より多く指定しておくと、すべての系列で異なる色になります。
      • 4F81BDFF,C0504DFF,9BBB59FF,8064A2FF,4BACC6FF,F79646FF (デフォルト:青、赤、緑、紫、水、橙の6色)
      • 009900,0099CC,0033FF,990099
      • 009900,0099CC,0033FF,990099,009999,00CC99,000099,FF0000
      • 不透明度[AA]を指定すれば、半透明のグラフが生成されます。 RRGGBB[AA] (RGBA)
      • https://documentation.image-charts.com/reference/color-format/
    • 背景の塗りつぶし(チャートフィル/chf)
      • 単色塗りつぶし、グラデーション塗りつぶし、画像参照塗りつぶし、が設定可能です。
      • c,s,ffffffff: 白色で完全不透明 (デフォルト)
      • a,s,000000cd: 無色で不透明度80%
      • c,s,99ff997f: 緑色で不透過度50%
      • https://documentation.image-charts.com/reference/background-fill/
    • 出力画像のサイズ(チャートサイズ/chs)
      • 800x450 (デフォルト)
    • 凡例ラベル(レジェンドラベル/chdl、レジェンドラベルポジション/chdlp)
      • 系列の名称を表示させたい場合はパイプ区切りでセットします。
      • 男性人口|女性人口
  • ファイル名を指定しなかった場合、ファイル名は “{pid}.png” となります。

Capture

数値TSVデータ(国別人口、月別売上、など)から棒グラフや折れ線グラフを生成します。グラフは Image-Chart を使用して自動的に生成されます。Y軸目盛は自動的に最適化されます。X軸目盛はTSVの一行目が参照されます。画像はPNG形式で出力されます。
棒グラフもしくは折れ線グラフの自動生成
数値TSVデータ(国別人口、月別売上、など)から棒グラフや折れ線グラフを生成します。グラフは Image-Chart を使用して自動的に生成されます。Y軸目盛は自動的に最適化されます。X軸目盛はTSVの一行目が参照されます。画像はPNG形式で出力されます。

Appendix

See also

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。