各種チャートコンポーネントを使用したフローの例

各種チャートコンポーネントを使用してPNG形式のグラフイメージを返すフローを、Webブラウザで表示しているHTMLの中からHTTPリクエストで呼び出して、グラフを表示する以下の２つの例を説明します。

パターン1 - HTMLのimgタグで直接参照できる形式

imgタグで直接呼び出すグラフのフロー

HTMLのimgタグから直接呼び出すグラフは、以下のようにフローを作成します。

・ HttpStartコンポーネントで開始してパラメータを受け取る
・ DBなどのデータソースからグラフの元となるデータを取得する
・各種グラフコンポーネントでグラフを作成する
・ HttpEndコンポーネントのContent-Typeプロパティでimage/pngを指定する

このフローに対してURL実行設定でURL文字列を設定します。Webブラウザで表示する任意のHTML中のimgタグで、そのURL文字列を指定してください。

以下は、HttpStartコンポーネントでyear、useridというパラメータを受け取り、URL実行設定で「showGraph」というURL文字列を指定したフローを呼び出す場合のHTMLのimgタグの例です。

<img src="showGraph?year=2009&userid=1"/>

areaタグを埋め込んだHTMLを生成するフロー

パラメータを受けてグラフを生成するところまでは先のパターンと同じですが、生成されたグラフ(Binaryストリーム)はStreamPutコンポーネントを使用してセッションに保存します。

その後、グラフを呼び出すためのimgタグとareaタグを埋め込んだHTMLをVelocityコンポーネントで作成して返します。 Velocityコンポーネントでのテンプレート記述は以下のようになります。この例では、出力ストリーム変数「AreaTags」をフロー変数AreaTagsに設定しています。

<img src="showGraphBySession?id=graph1&t=$flow.now.intValue()" usemap="#map1"/>
<map name="map1">
$flow.AreaTags
</map>

※セッションからグラフを取り出すフローでidだけを指定するようにすると、ブラウザのキャッシュによって古いイメージが表示されてしまうことがあります。そのため、現在時刻をパラメータとして渡すなどURLが同じにならないような工夫をして対処することをおすすめします。

セッションからグラフを取り出して返すフロー

HttpStartコンポーネントでidでStreamPutコンポーネントで指定した保存名をパラメータで受け取り、URL実行設定で「showGraphbySession」というURL文字列を指定したフローの例です。

指定したidでセッションからストリームを取り出して返しています。一連のフローでフローのプロパティ「セッション」が「終了時に閉じる」になっていると、セッションに保存したグラフが取り出せなくなるので注意が必要です。