Unifinityでグラフを描写してみました

お役立ち豆知識

カスタムアプリケーション事業部の黒瀬です。
Unifinityでちょっとしたグラフィカルな追加オプション的な処理をご紹介したいと思います。


使用するのは「WebViewコントロール」と「JavaScriptのd3.js」です。 
※d3.js参考元https://d3js.org/

【Unifinityでグラフィカル】 出力する内容(今回のゴール)
円グラフ
Unifinity_グラフ1.png

棒グラフ
Unifinity_グラフ2.png

組み込み方
1.準備するもの
 ・d3.jsを用いたhtmlファイル
 ・WebViewコントロール(デフォルトでOK)
 ・ファイル書き込みロジック


2.どの環境でも使用できるようにhtmlファイルはロジックで書き込みます。
「htmlファイル書き込みの流れ#1~4」
Unifinity_グラフ3.png
「#1円グラフを表示できるhtmlを独自/入力文字列値返却に記述」
Unifinity_グラフ4.png
「#2 #1の内容をファイルに出力。このファイルをWebViewに設定すると表示されます」
Unifinity_グラフ5.png
「#3棒グラフを表示できるhtmlを独自/入力文字列値返却に記述」
Unifinity_グラフ6.png
「#4 #3の内容をファイルに出力。このファイルをWebViewに設定すると表示されます」
Unifinity_グラフ6.png

3.書き込んだファイルをWebViewにセット
「コントロール/内容セットでファイル名をセットすると表示されます。」
Unifinity_グラフ8.png
etc.ご紹介した画面では「Name1、Value1」を画面に設けてWebViewにGetパラメーターを渡し、表示を可変するようにしています。
Unifinity_グラフ9.png
上記は画面入力からGetパラメーターを設定する処理画面の写しです。
流れとしましては、
キーバリュー型(Name:Value)配列JSON文字列を作成し(#1~18)、
文字列関数/パラメーター生成でURLエンコード処理をします(#19)。「ファイル名+?+JSON文字列」をWebViewに設定しGetパラメーターとしています(#20~27)。また、あらかじめd3処理するhtmlにGetパラメーターを受け取り設定する記述は必要です。

【製品として】
まだ今回のお題が製品に組み込まれた実績はないのですが、様々なシーンに活躍・登場できると思います。