目次


IBM Mashup Center で FusionCharts Free グラフ・ウィジェットを使用する

豊富なグラフ表示機能を持つウィジェットの作成

Comments

はじめに

データを視覚化する形式には、カスタマイズ可能で豊富な表示機能を持つものが多数あります。グラフ化もその一例です。ユーザーは、色、ラベル、キャプション、縮尺、タイプなど、多くの視覚的な側面をカスタマイズできます。また、位置やアイコンの制御だけでなく、各マーカーがクリックされたときの表示情報を制御できるマップ・ベースの視覚化も可能です。表示情報が複雑で構造化されている場合は、情報のエンコードに適した手段として XML が挙げられます。

この記事では、次のことを行う方法を説明します。

  1. グラフ・ウィジェットの構築 カスタマイズ可能で豊富な表示機能を持ち、グラフ化するデータおよび表示のカスタマイズの両方を XML で指定します。
  2. データ・マッシュアップ・エディターの使用 IBM Mashup Center で使用して、ウィジェット用の XML を生成します。
  3. サンプル・マッシュアップの構築 データに基づいて、表示エレメントが動的に変化します。

IBM Mashup Center には、IBM InfoSphere MashupHub と IBM Lotus Mashups が含まれています。

この記事は、読者がデータ・マッシュアップの構築とウィジェット作成の基本に慣れていることを前提としています。特に、JavaScript でのプログラミング方法を理解し、IBM Mashup Center データ・マッシュアップ・エディターの使用経験があることが必要です。記事「IBM Mashup Center and the InfoSphere® MashupHub, Part 2: In-depth look at Feed Mashup Editor within IBM Mashup Center's InfoSphere MashupHub」(『リソース』参照) は、データ・マッシュアップ・エディターの概要説明として優れています。ウィジェット作成の概要については、記事「Mashups, beyond reporting」(『リソース』参照) をご覧ください。

グラフ・ウィジェットの構築

このセクションでは、カスタマイズ可能で豊富な表示機能を持ち、グラフ化するデータおよび表示のカスタマイズの両方を XML で指定するグラフ・ウィジェットの構築方法について説明します。

FusionCharts Free とは

この記事で使用されるグラフ・ウィジェットの例は、FusionCharts Free グラフ・パッケージに基づいています。FusionCharts には、グラフ化およびマップ構築用の多数のパッケージがあります。記事の例では、オープン・ソースの FusionCharts Free バージョンを使用します。これは、次の種類のグラフをサポートする Flash グラフ・コンポーネントです。

  • 円グラフ、棒グラフ、折れ線グラフを含む一般的な種類のグラフ。
  • 1 つのグラフに異なる種類が混在する組み合わせグラフ。グラフ上のデータ・シリーズごとに異なる種類のグラフを割り当てます。
  • プロジェクト管理用のガント・チャートや株価用のローソク足チャートなどの特殊なグラフ。

サポートされているグラフの種類の例については、『リソース』セクションに記載されている FusionCharts Free サイトにアクセスし、「Chart Gallery」ページを確認してください。このサイトには、製品ライセンス、デモ、その他の情報も掲載されています。

FusionCharts は XML を使用して、グラフ化するデータと表示部分のルック・アンド・フィールの両方を指定します。FusionCharts は、XML を用いたデータと表示情報の指定が強力であることを示すのに適した例です。

記事の最初の部分では、FusionCharts Free パッケージを囲むウィジェット・ラッパーを構築して、パッケージをウィジェットに変換する方法を説明します。残りの部分では、IBM Mashup Center を使用して XML を生成する方法を説明します。IBM Mashup Center には、さまざまなデータ・ソースからデータを抽出してフィードに変換するフィード・ジェネレーターがあります。また、XML を拡張および再フォーマットするよう設計されたデータ・マッシュアップ・エディターも含まれています。IBM Mashup Center は、FusionCharts Free パッケージが必要とするフォーマットで XML を簡単に生成する方法を提供します。FusionCharts Free パッケージはこの XML を使用して、対話的でアニメーション表示を行うグラフをデータ・ソースから直接作成します。

ウィジェット定義ファイルの作成

この例に使用する FusionCharts Free ウィジェット・パッケージは、ウィジェット定義ファイル、2 つの JavaScript ファイル、および FusionCharts Free パッケージからの swf ファイル群で構成されています。このセクションでは、ウィジェット定義ファイルの iWidget.xml について説明します。

XML ファイルのルート・エレメントをリスト 1 に示します。iwidget ルート・エレメントの iScope 属性は、iWidget コールバック関数を実装する JavaScript オブジェクトの名前を指定します。このウィジェットは、次の 2 つの JavaScript ファイルを使用して実装されています。1 つは FusionCharts Free パッケージに含まれる FusionCharts.js で、もう 1 つは シン・ウィジェット・ラッパーの FCFWidget.js です。両方とも 2 つの resource エレメントを使用してロードされます。属性の詳細については、『リソース』セクションにある、ウィジェット・プログラミングと API ドキュメンテーションのリンクを参照してください。

リスト 1. iWidget.xml のヘッダー
<iw:iwidget name="FCFWidget" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
iScope="FCFWidget"
allowInstanceContent="true"
supportedModes="view edit" mode="view" lang="en">

<iw:resource uri="FusionCharts.js"/>
<iw:resource uri="FCFWidget.js"/>

ウィジェットの受信イベントと送信イベントの定義をリスト 2 に示します。ウィジェットには入力 URL 用の受信イベントが 1 つあり、これによって他のウィジェットによるグラフ XML の変更が可能になります。また、ウィジェットには、グラフ・エレメントが選択されたときに起動される送信イベントが 1 つあります。受信イベントは、handled 属性と onEvent 属性の存在によって示されます。onEvent 属性の値は、イベントを受信したときに呼び出す関数の名前です。published 属性は送信イベントを示します。

リスト 2. iWidget.xml のイベント仕様
<iw:event id="Display from URL"
handled="true" onEvent="graphURLChanged"
eventDescName="desc_DataSourceURL"/>
<iw:eventDescription id="desc_DataSourceURL" 
 payloadType="url"
 description="Text representing a URL to a Fusion charts XML file"
 lang="en"/>

<iw:event id="chartClicked" eventDescName="desc_chartClicked" published="true"/>
<iw:eventDescription id="desc_chartClicked"
  payloadType="text"
  description="A data element in the chart was clicked" lang="en"/>

ウィジェット定義ファイルは、表示モードと編集モードで何を表示するのかも指定します。レイアウトは、iw:content エレメントに CDATA として含まれる HTML マークアップによって指定されます。表示モードの HTML マークアップをリスト 3 に示します。id 属性を持つ div エレメントが1 つあり、JavaScript を使用してこのエレメントを操作できます。id の値は _IWID_ をプレフィックスとして使用します。_IWID_ プレフィックスは、ウィジェットの作成時に、実際の固有のウィジェット・インスタンス ID に置換されます。これによって、同じ HTML ページ上にウィジェットの複数のインスタンスがある場合でも、すべての ID が固有になります。

リスト 3. iWidget.xml の表示モードのレイアウト
<iw:content mode="view">
<![CDATA[

<div id="_IWID_chart"></div>

]]>
</iw:content>

このウィジェットは、FusionCharts Free に含まれる既存のグラフ・ウィジェットとは大きく異なります。つまり、これまでとは反対のアプローチを採用し、幅広い構成 GUI を提供しません。その代わりとして、すべてのフォーマットを XML で制御する基本の FusionCharts グラフ XML を公開します。編集モード・セクションには、2 つの input エレメントだけを持つ HTML フォームが含まれています。この input エレメントとは、グラフ XML への URL を入力するテキスト・ボックスと、グラフの種類を選択するドロップダウン・テキスト・ボックスです。ドロップダウン・テキスト・ボックスの HTML マークアップの一部をリスト 4 に示します。ドロップダウンのオプションは、グラフの種類を、基礎となる swf ファイルにマッピングします。各 swf ファイルは、対応するグラフ・ロジックを実装しています。FusionCharts Free パッケージのすべての swf ファイルは、ウィジェットの zip ファイルに含まれています。

リスト 4. iWidget.xml の編集モードのレイアウト
<iw:content mode="edit">
<![CDATA[

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::

<select id="_IWID_chartType" >
<option value='FCF_Area2D.swf'>2D Area</option>
<option value='FCF_Bar2D.swf'>2D Bar</option>
:::::::::::::::::::::::::::::::::::::::::::::::
</select>

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::

]]>
</iw:content>

完全な iwidget.xml と、この記事で取り上げるすべての JavaScript が含まれるウィジェット・パッケージ全体をダウンロードするためのリンクについては、『リソース』セクションを参照してください。

グラフの表示

JavaScript の実装ファイルは FCFWidget.js です。このファイルは、標準イベント (load、unload、onview、oneditを含む)、他のすべてのカスタム・イベント、およびサーバー通信を処理する dojo クラスです。onview 関数には、指定されたグラフを表示するロジックが含まれています。その他の標準イベントとその処理については、「リソース」セクションを参照してください。

onview 関数は、まずウィジェットのサイズを決定し、次に showChart 関数を呼び出します。onview 関数は onedit の後または初期ロード中に呼び出されるため、ユーザーは最初に AJAX 呼び出しを使用してグラフ XML を取得する必要があります。これを指示するには、retrieveData パラメーターを true に設定して showChart 関数を呼び出します。onSizeChanged 関数は showChart 関数を呼び出すこともできます。この場合は、retrieveData パラメーターを false に設定して、グラフ XML URL に変更がなく、データがすでにロードされていること示します。この場合、ユーザーは showFusionChart 関数を直接呼び出してグラフのインスタンスを生成できます。showChart 関数をリスト 5 に示します。

リスト 5. showChart 関数
showChart: function( retrieveData )
{
this.debugTrace( "showChart w,h=" + this.width + ',' + this.height );  

if ( retrieveData )
this._loadDataUsingDojo( this.url
			   , dojo.hitch( this, this._cbProcessReturnedXML ) );
else if ( this.FCFgraphXML != null )
this.showFusionChart( this.FCFgraphXML );
// else ignore
},

FusionCharts.js ファイルに含まれる JavaScript オブジェクトの FusionCharts によってグラフが表示されます。ユーザーは次のパラメーターを渡すことにより、FusionCharts のインスタンスを生成する必要があります。

  • ユーザーが選択したグラフの種類に対応する swf ファイルを示す URL。すべての swf ファイルはウィジェットの zip ファイルに含まれていることを思い出してください。zip ファイルのすべての内容が存在する場所の完全修飾 URL を取得するには、iContext 関数の rewriteURI メソッドを呼び出します。
  • FusionCharts によって生成される HTML エレメントの ID として使用される固有な値。
  • グラフの幅。
  • グラフの高さ。

グラフ XML データは、setDataXML 関数を使用して FusionCharts オブジェクトに渡されます。次に、render 関数を使用して、グラフのインスタンスが生成されます (リスト 6 参照)。

リスト 6. Show Fusion Chart 関数
//The following is mostly from Fusion Chart
showFusionChart: function( strXML )
{
var swfUrl = this.iContext.io.rewriteURI( this.charttype );
var chart1 = new FusionCharts(swfUrl, "FC"+this.domID
				 , this.width, this.height, "0", "0");
chart1.setDataXML(strXML);
chart1.render( this.domID + "chart" );		
},

FusionCharts Free パッケージの FusionCharts.js ファイルに、 2 つの小さな変更が行われていることに注意してください。グラフがドロップダウン・メニューに干渉しないようにするために、2 つの場所で wmode パラメーターを opaque に設定する必要があります。どちらの変更も、// zPOSCHANGE によってマークされています。

クリック・イベントの処理

FusionCharts スイートのどのグラフも、ドリルダウンをサポートします。それぞれの種類のグラフでは、表示エレメント (棒グラフのバー、円グラフの扇形など) をグラフのホット・スポットとして動作させることが可能です。FusionCharts Free では、ホット・スポットに次のタイプのアクションを定義できます。

  • 同じページで開く単純なリンク
  • 新規ページで開く単純なリンク
  • リンクとして起動される JavaScript 関数 (同じページ上)

FusionCharts では、グラフ XML 内の set エレメントを使用して、表示する値を指定します。ホット・スポット・アクションを指定するには、オプションの link 属性を set エレメントに追加します。たとえば、ホット・スポットがクリックされたときに、ウィジェットがイベントを生成できるようにしたい場合があります。これを行うには、組み込みの JavaScript 関数 MCClickEvent に 1 つのパラメーターを渡します。この関数が呼び出されると、イベントを起動します。ストリング '2005,1020' を link 属性の引数として渡して、組み込み関数 MCClickEvent を呼び出す方法をリスト 7 に示します。

リンク 7. MCClickEvent 関数を指定する link 属性
<set  name="2005"
value="1735.08"
link="JavaScript: MCClickEvent( '2005,1020' );" />

リスト 8 に示す MCClickEvent 関数は非常にシンプルです。この関数は 1 つの引数を受け取り、iContext 関数の fireEvent 関数を呼び出すだけです。

リスト 8. クリック・イベントを送信する関数
MCClickEvent: function( arg ) {
this.iContext.iEvents.fireEvent("chartClicked", null, arg );
},

MCClickEvent 関数はページに対してグローバルではなく、インスタンス・メソッドです。FusionCharts Free コンポーネントがこの関数を呼び出すようにするには、ウィジェットを表す JavaScript インスタンスからこの関数を呼び出す必要があります。ページ上でウィジェットのインスタンスが生成されるまで JavaScript インスタンスは認識されないため、内部の modifyLink 関数を使用して、リスト 9 に示すように、JavaScript 関数を書き換えます。この関数は、FusionCharts オブジェクトに渡される前のグラフ XML をプリプロセスするために呼び出されます。

modifyLink: function( strXML )
{
var temp   = this.domID + "iContext.iScope().MCClickEvent";
var result = strXML.replace( /JavaScript: MCClickEvent/g, "JavaScript: "+temp );
return result;
},

これで、ウィジェットの実装の説明が完了しました。いくつかの機能強化として、表示モードでのグラフの種類の変更や、インプレースのドリルダウンのサポートなどが考えられます。

表示情報用の XML を使用するウィジェットができたので、IBM Mashup Center を使用してグラフ XML を生成しましょう。

データ・マッシュアップ・エディターを使用した XML の生成

FusionCharts Free サイトで利用できるグラフ XML に関するオンライン・ドキュメンテーションについては、『リソース』セクションを参照してください。この例では、リスト 10 に示す XML を生成する 2D 棒グラフを使用します。このグラフは、特定の顧客の 2005 年から 2008 年までの年間売上を表示します。サンプルの CUSTOMERNAME は単なるプレースホルダーに過ぎず、動的に生成されます。各 set エレメントは、個々のバーとしてグラフ内で表されます。set エレメントは年間売上に対応し、link 属性を持つホット・スポットとして構成されます。特定の年のバーがクリックされたときに、顧客 ID (サンプルでは 1020) と年をコンマ区切りストリングとして与えるイベントを生成することにします。この情報により、指定された年におけるその顧客の売上を、月間売上までドリルダウンできます。

リスト 10. 年間売上の 2D 棒グラフの XML
<graph  caption="Sales to CUSTOMERNAME"
xAxisName="Year" yAxisName="Sales" decimalPrecision="0">
<set  name="2005"
value="1735.08"
link="JavaScript: MCClickEvent( '2005,1020' );" />
<set  name="2006"
value="1335.08"
link="JavaScript: MCClickEvent( '2006,1020' );" />
<set  name="2007"
value="1582.08"
link="JavaScript: MCClickEvent( '2007,1020' );" />
<set  name="2008"
value="1555.08"
link="JavaScript: MCClickEvent( '2008,1020' );" />
</graph>

入力としては、リスト 11 に示すデータベースから生成されたフィードを用いて開始します。IBM Mashup Center データ・マッシュアップ・エディターを使用すると、これを FusionCharts フォーマットに変換できます。また、IBM Mashup Center バージョン 3 のいくつかの新機能についても学習します。

リスト 11. 入力データベースのフィード
<entry><content>
<year>2005</year><totalAmt>1735.08</totalAmt>
</content></entry>
<entry><content>
<year>2006</year><totalAmt>1335.08</totalAmt>
</content></entry>
<entry><content>
year>2007</year><totalAmt>1582.08</totalAmt>
</content></entry>
<entry><content>
<year>2008</year><totalAmt>1555.08</totalAmt>
</content></entry>

IBM Mashup Center データ・マッシュアップ・エディターの使い方の基本を確認したい場合は、『リソース』セクションに記載されている記事を参照してください。

set エレメントの生成

データ・マッシュアップを作成する最初のステップとして、「ソース」演算子を使用して入力フィード (XML データ) を指定します。フィードを指定したあと、プロパティー・ダイアログの「詳細」タブでフィード・タイプをオーバーライドする必要があります。図 1 に示すように、完成したフィードを単一の繰り返しエントリーとして選択します。この理由は、『IBM Mashup Center バージョン 2 での FusionCharts ウィジェットの使用』で説明されています。

図 1. 「詳細」タブの「ソース」演算子
「詳細」タブの「ソース」演算子
「詳細」タブの「ソース」演算子

次に、「ソース」演算子を「変換」演算子に接続し、そのプロパティー・ダイアログを開きます。出力 (「変換」演算子の右側) で set エレメントを作成するために、「entry」エレメントを右クリックして表示されるポップアップ・メニューで「新しいエレメント」を選択します。set エレメントには、3 つの属性があります。

  • name はバーのラベルです。
  • value はバーの高さです。
  • link はイベントを生成します。

ポップアップ・メニューを使用して set エレメントの下で name 属性を作成した後、「変換」演算子の入力側 (左側) で entry エレメントを展開し、year エレメントの下のテキスト・ノードを表示します。テキスト・ノードを右クリックし、「出力ツリーにコピー」を選択して、「2005」というテキストを出力ツリーの name 属性にコピーします。入力ツリー (「変換」演算子の左側) には、4 つの entry エレメントがあり、それぞれが year を持っています。これは、entry エレメントの横にある青色のループ・アイコンによって示されます。データ・マッシュアップ・エディターではこの点が考慮され、各 year に 1 つずつ、4 つの新しい set エレメントが作成されます。出力ツリーを図 2 に示します。

図 2. name 属性値を指定する「変換」演算子
name 属性値を指定する「変換」演算子
name 属性値を指定する「変換」演算子

value 属性も同様に作成できます。link 属性の値は、入力側の値を直接コピーしたものではありません。この値は、計算結果の値にしなければなりません。これを行うには、link 属性を作成したあと、右クリックでコンテキスト・メニューを表示し、「値の編集」を選択します (図 3 参照)。

図 3. link 属性値を指定する「変換」演算子
link 属性値を指定する「変換」演算子
link 属性値を指定する「変換」演算子

IBM Mashup Center バージョン 3 では、ダイアログがポップアップし、ハードコーディングされた値を提供するだけでなく、変数または関数を使用できます。図 4 に示すように、ここでは「関数値の指定」を選択します (IBM Mashup Center バージョン 2 では、属性値として関数を直接指定することはできません。代わりに、エレメントの関数値を作成し、それを属性にコピーする必要があります)。

図 4. link 属性値のダイアログ
link 属性値のダイアログ
link 属性値のダイアログ

クリック・イベントの処理』で説明した JavaScript 呼び出しを生成するために、concat 関数を選択します。これまでに説明したように、組み込みの MCClickEvent 関数は 1 つの引数だけを受け取ります。年のバーがクリックされたときに、選択された年の月間売上までドリルダウンしたいと思っています。これを行うには、顧客 ID と年という 2 つの値からコンマ区切りストリングを生成して、この 2 つの引数を渡します。すべての引数の値を図 5 に示します。

図 5. link 属性値のダイアログ
link 属性値のダイアログ
link 属性値のダイアログ

これで、set エレメントを生成できるようになりました。「プレビュー」タブに移動し、「パブリッシュ」演算子を使用して、ルート・エレメントを作成する前に、出力が予期した内容になっていることを検証します。

ヘッダー・テンプレートの使用

この時点で残っている作業は、graph をルート・エレメントとして生成し、必要なすべてのグローバル表示属性 (x 軸ラベルなど) を追加することだけです。IBM Mashup Center バージョン 3 では、「パブリッシュ」演算子に、新しいカスタム・ヘッダー・オプションがあります。「カスタム」ラジオ・ボタンをクリックすると、デフォルトの root エレメントが 1 つある「ヘッダー・テンプレート」セクションが表示されます。「変換」演算子と同様に、root エレメントを「graph」と名前変更し、ポップアップ・メニューの「新しい属性」を使用して、表示属性を生成します。ただし、より簡単な方法があります。root エレメントのポップアップ・メニューで、「テンプレート・ツリーの設定」を選択します (図 6 参照)。

図 6. 「パブリッシュ」演算子のカスタム・ヘッダー
「パブリッシュ」演算子のカスタム・ヘッダー
「パブリッシュ」演算子のカスタム・ヘッダー

テンプレート・ツリーの設定」メニューをクリックし、ダイアログを表示します。このダイアログでは、XML フラグメントの入力とエディターへのインポートが可能です (図 7 参照)。多数の属性をインポートするときは、この方法によって時間を大幅に節約できます。

図 7. 「パブリッシュ」演算子のテンプレートの設定
「パブリッシュ」演算子のテンプレートの設定
「パブリッシュ」演算子のテンプレートの設定

root エレメントが、テンプレート内の関連するすべての属性とともに graph に変更されたことに注意してください。

次に、graph エレメントのポップアップ・メニューで「繰り返しエレメントの接続」を選択することにより、前に作成した set エレメントを追加します (図 8、図 9 参照)。

図 8. カスタム・ヘッダーの接続メニュー
カスタム・ヘッダーの接続メニュー
カスタム・ヘッダーの接続メニュー
図 9. 「パブリッシュ」演算子の接続ダイアログ
「パブリッシュ」演算子の接続ダイアログ
「パブリッシュ」演算子の接続ダイアログ

動的な表示の作成

入力 XML を通じて表示を構成することの利点の 1 つとして、データに応じて表示エレメントを変えられることが挙げられます。たとえばX 社への年間売上データを表示するとき、キャプションを簡単に「X 社への売上」に変更できます。会社 ID が指定されたときに、会社名を取得する簡単なフィードがあるものとします。このフィードを用いて会社名のエレメントを追加し (マージを使用)、「パブリッシュ」演算子で concat 関数を使用して、caption 属性の値を構成します (図 10 参照)。

図 10. 顧客名をともなうキャプション
顧客名をともなうキャプション
顧客名をともなうキャプション

これで、データのマッシュアップが完了しました。次のセクションに移る前に、関連する次の使い方にも注意してください。

  • 表示エレメントは動的に生成できるため、同様の手法を使用して、ブラウザーの受け入れ言語の設定に応じて表示を生成できます。
  • 表示が XML フォーマットになっていると、表示エレメントにHTML マークアップを簡単に含めることができます。たとえば、RSS フィードへのロゴの組み込みなどが簡単な例として考えられます。ロゴを表示する IBM Mashup Center フィード・ウィジェットを図 11 に示します。ロゴはフィードのコンテンツに応じて変わります。
図 11. RSS フィード内で指定されたロゴ
RSS フィード内で指定されたロゴ
RSS フィード内で指定されたロゴ

IBM Mashup Center バージョン 2 での FusionCharts ウィジェットの使用

IBM Mashup Center バージョン 2 では、ルート・エレメントに属性を追加できません。この制限を補う機能として、フォーマットの 1 つのバリエーションがウィジェットでサポートされています。ウィジェットは、ダミーのルート・エレメント mhubFusion でラップされた任意の有効な FusionCharts Free グラフ XML を受け入れます。『set エレメントの生成』で説明した手順は、バージョン 2 でも機能します。この手順により、結果として、4 つの set エレメントを持つ単一の繰り返し entry が得られるからです。バージョン 2 の用にリスト 10 を変更する方法をリスト 12 に示します。

リスト 12. v2 用の特殊フォーマット
<mhubFusion>
<graph  caption="Sales to CUSTOMERNAME"
xAxisName="Year" yAxisName="Sales" decimalPrecision="0">
<set  name="2005"
value="1735.08"
link="JavaScript: MCClickEvent( '2005,1020' );" />
<set  name="2006"
value="1335.08"
link="JavaScript: MCClickEvent( '2006,1020' );" />
<set  name="2007"
value="1582.08"
link="JavaScript: MCClickEvent( '2007,1020' );" />
<set  name="2008"
value="1555.08"
link="JavaScript: MCClickEvent( '2008,1020' );" />
</graph>
</mhubFusion>

各部分の組み合わせ

IBM Mashup Center で実行されているマッシュアップ・アプリケーションを図 12 に示します。アプリケーションの上部には顧客のリストがあります。リストは左下のグラフにワイヤリングされています。グラフには、リストで選択された顧客の年間売上が表示されます。この記事で作成した FusionCharts Free ウィジェットとデータ・マッシュアップがグラフに使用されています。左下のグラフは、右下にある毎月の売上を示す FusionCharts Free ウィジェットにワイヤリングされています。特定の年の売上を表すバーをクリックすると、顧客 ID と年が chartClicked イベントに送られます。これによって、選択された顧客と年に関するデータが月間売上グラフに表示されます。

図 12. 完成したマッシュアップ・アプリケーション

作成したマッシュアップの実例については、『リソース』セクションを参照してください。スペース・マネージャーを使用して、「Charting demo」(グラフのデモ) を検索してください。

まとめ

この記事では、2D 棒グラフ用の XML を生成するデータ・マッシュアップの基本的な構築手順を説明しました。FusionCharts Free パッケージには、これ以外にも多数の種類のグラフが含まれています。より複雑な種類のグラフ用の XML を生成し、ウィジェットの強化を試みるとよいでしょう。ウィジェットを作成する機会がある場合は、ハードコーディングされた値をユーザーが入力する精巧なフォームを作成するよりも、入力 XML ファイルに含まれるデータを使用して表示情報を指定することを検討してみてください。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus, Information Management, XML
ArticleID=631661
ArticleTitle=IBM Mashup Center で FusionCharts Free グラフ・ウィジェットを使用する
publish-date=04012011