FusionChartsで折れ線グラフ。

何か、簡単に折れ線グラフが作れないかなぁと思って、
今までに色々試してみたのだけど、
GDを利用するような、つまりモジュールをサーバにインストールするようなタイプだと、
クリアする課題が多くて、なかなか簡単にいかずに悩んでました。
（やればできるんだろうけれども）

まいいかなーと半ば諦めていたら、
今日のidea*ideaでこんな特集が。

ウェブでかっこいいグラフを描くためのライブラリやらテクニックやらのまとめ | i d e a * i d e a
ちょっと調べ物をしていたので結果をシェア。ウェブでかっこいいグラフ（← 主観）を描画するためのライブラリやらテクニックやらのまとめです。

と、いうわけで、やってみた。

結論から言うと、非常に簡単です。

エントリ内、一番上に上げられているFusionChartsを利用して、
簡単にグラフを書いてみました。

■ 導入

ダウンロード

まず、サイトからダウンロードします。

FusionCharts Free – Download

無料版でも十分色んなことが出来るので無料版で良いと思いますが、
ダウンロードに際しては、名前とメールアドレスの入力が必要です。

アップロード

で、ダウンロードしたzipファイルを解凍すると、
以下のフォルダが出てきます。

Charts
Code
Contents
Gallery
JSClass

それぞれをアップロードする場所は、
分かりやすく、アクセスできれば適当でOKです。
後で記述するときに指定できるので。

■ データファイルの用意

一応マニュアルは付いてるんですが、英語なので、
サンプル（Gallery/Data内のXMLファイル）を見て設定すれば、
最低限は分かるかと。

てか、真面目に設定しようとするとかなり大変です。
（有料版にはXML作成用のユーティリティがあるらしい）

■ ソースの用意

データファイルを用意したら、エントリ（ページ）のソースの準備。

サンプルにあるような、1つの折れ線グラフを書きたい場合には、
例えばこんな感じ。

<link rel="stylesheet" href="../Contents/Style.css" type="text/css" />
<script language="JavaScript" src="../JSClass/FusionCharts.js"></script>
<div id="chartdiv" align="center"></div>
<script type="text/javascript">
var chart = new FusionCharts("../Charts/FCF_Line.swf", "ChartId", "400", "400");
chart.setDataURL("../Data/AccessesMulti.xml");
chart.render("chartdiv");
</script>