こんにちは、熊谷です。

Webサイトでグラフを作成表示するためのライブラリの一つにOpen Flash Chartというものがあります。これはJSON形式のデータをSWFファイルに渡すことによりグラフを生成表示することができます。

まずは早速何かグラフを表示してみましょう。Open Flash Chartはこちらからダウンロードすることができます。

http://www.teethgrinder.co.uk/open-flash-chart-2/

ダウンロードしたファイルを解凍するといろんなファイルが出てきますが最低限必要なのはopen-flash-chart.swfです。このswfを埋め込んでJSON形式のデータをパラメータとして渡します。

chart.html

1. <div id="chart"></div>
2. <script type="text/javascript">
3. //<![CDATA[
4. swfobject.embedSWF("open-flash-chart.swf", "chart", "640", "480", "9.0.0", "expressInstall.swf", {"data-file":"data.json"});
5. //]]>
6. </script>

データとなるJSONは以下のようにしてみました。
data.json

1. {
2.   "title":
3.   {
4.     "text":"棒グラフ"
5.   },
6.   "elements":[
7.     {
8.       "type":"bar_filled",
9.       "colour":"#3373CC",
10.       "outline-colour":"#3373AC",
11.       "values":[8,8,1,7,4,8,1,10,7,1,8,5,9,4]
12.     }
13.   ],
14.   "x_axis":
15.   {
16.     "labels":
17.     {
18.       "labels":["7:00","8:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","0:00"]
19.     },
20.     "colour":"#898989",
21.     "grid-colour":"#EEEEEE"
22.   },
23.   "y_axis":
24.   {
25.     "colour":"#898989",
26.     "grid-colour":"#EEEEEE"
27.   },
28.   "bg_colour":"#FFFFFF"
29. }

こんな感じでchart.htmlを表示すると棒グラフが表示されます。

ちなみに、Open Flash Chartはソースコードが公開されています。なので、ActionScript3が分かるのであれば自由にいじくりまわせます。先ほど解凍した中のopen-flash-chartディレクトリにソースコードがあります。WindowsユーザであればFlex3 SDKとFlashDeveloperを用いてコンパイルすることができます。で、私もそうですがMacの場合は。。。FlashDeveloperがないのでFlex3 SDKをインストールしてターミナルでコンパイルしてみましょう。

1. $ cd open-flash-chart
2. $ mxmlc main.as

おそらくエラーが出てくると思います。FlashDeveloperのクラスライブラリというかFlashConnectを使用しているらしく、それがないというエラーメッセージです。なので、
http://code.google.com/p/flashdevelop/source/browse/branches/FD3.1/FlashDevelop/Bin/Debug/Library/AS3/classes/org/flashdevelop/utils/?r=257こちらからFlashConnect.asとTraceLevel.asを持ってきて

1. $ mkdir -p org/flashdevelop/utils

で、ディレクトリを作成しそこに設置してコンパイルします。これで無事swfが生成されていると思います。

そんなことで、JSON形式のデータを渡すだけで簡単に綺麗なグラフを生成することができるOpen Flash Chart、使ってみてはいかがでしょうか。