読者です 読者をやめる 読者になる 読者になる

Life, Education, Death

プログラミング以外でも思ったことをつらつらと書きたい

FusionCharts Freeでカッコイイグラフを表示する

できること

http://www.fusioncharts.com/free/gallery/を見ての通り、フリー版でも十分に様々なグラフを表示できる。アニメーションもするのでちょっとかっこよさを注入したいときにも便利。グラフはflash側で描画するタイプのライブラリなので、単にパラメータを設定するだけで表示できる。

準備

ここからダウンロード。
各言語ごとのライブラリは揃っているので好きなものを使ウことが出来る。今回は事情によりPHPを選択。

Licensing Policy

FusionCharts Free is dual licensed under the MIT (X11) and GNU GPL licenses. You can choose the license that best suits your project, and use it accordingly in both your commercial or personal projects.

となっているので商用でも利用できそうだ。

PHP版のライブラリは"Code/PHPClass/Includes"か"Code\PHP\Includes"の中身をサーバーに配置する。

また、Javascriptflashを表示する場合は"JSClass/FusionCharts.js"も適切な場所に配置する。

これで必要なファイルは揃ったので実装に移る事に。

実装

http://www.fusioncharts.com/free/docs/にライブラリの使い方、XMLデータを設定についてまとめられているので細かい点については参考になる。

# Include FusionCharts PHP Class
include('../Class/FusionCharts_Gen.php');

# Create Column3D chart Object
$FC = new FusionCharts("Column3D","300","250");
# set the relative path of the swf file
$FC->setSWFPath("../FusionCharts/");

# Set chart attributes
$strParam="caption=Weekly Sales;xAxisName=Week;yAxisName=Revenue;numberPrefix=$;decimalPrecision=0;formatNumberScale=1";
$FC->setChartParams($strParam);

# add chart values and category names
$FC->addChartData("40800","name=Week 1");
$FC->addChartData("31400","name=Week 2");
$FC->addChartData("26700","name=Week 3");
$FC->addChartData("54400","name=Week 4");

FusionCharts Free Documentationより
のようにPHPのクラスが用意されていて、XMLデータを外部から渡さなくてもグラフを出力することが可能になっている。

しかしながら、グラフの名前に日本語を使う必要があり、試行錯誤の末*1、外部からXMLデータを渡すことにした。


また、http://tech.ironhearts.com/blog/archives/48の通り、日本語を表示するときはXMLShift_JISにすることで表示できた。

次から簡単にクラスの使い方をまとめる。

サンプルと説明

以下のサンプルはhttp://www.fusioncharts.com/free/docs/Contents/PHPClassAPI/MultiSeriesChart.htmlに少し手を入れたものになります。

$FC = new FusionCharts('MSLine',"400","150"); 
$FC->setSWFPath("../FusionCharts/");
$strParam="caption=Weekly Sales;subcaption=Comparison;xAxisName=Week;yAxisName=Revenue;numberPrefix=$;decimalPrecision=0";
$FC->setChartParams($strParam);
$FC->setChartParam('lineThickness', 4);
$FC->setChartParam('anchorRadius', 5);
$FC->setChartParam('baseFontSize', 12);
$FC->setChartParam('showShadow', 0 );
$FC->setChartParam('numdivlines', 10 );
$FC->setChartParam('showAlternateHGridColor', 1);
$FC->setChartParam('yAxisMaxValue', 100);

まず、FusionChartsクラスのインスタンスを作る第一引数はグラフのswfファイル名になっている。
複数表示の折れ線グラフにしたかったので"MSLine"に設定。

setChartParams()、setChartParam()で各種パラメータを設定できる。グラフごとに違うようなので詳細は公式ドキュメントを見たほうがよい。
ちなみに今回使ったグラフの場合はこれ

  # Add category names
  $FC->addCategory("Week 1");
  $FC->addCategory("Week 2");
  $FC->addCategory("Week 3");
  $FC->addCategory("Week 4");

  # Create a new dataset
  $FC->addDataset("This Month");
  # Add chart values for the above dataset
  $FC->addChartData("40800");
  $FC->addChartData("31400");
  $FC->addChartData("26700");
  $FC->addChartData("54400");

  # Create second dataset
  $FC->addDataset("Previous Month");
  # Add chart values for the second dataset
  $FC->addChartData("38300");
  $FC->addChartData("28400");
  $FC->addChartData("15700");
  $FC->addChartData("48100");

上のようにaddChartDataでグラフデータを追加して行く。複数のグラフを表示したいときは、addDataset()で新しいグラフデータが始まったことを宣言する。X軸についてはaddCategory()で追加。最後にgetXML()でXMLデータを取り出すこともできるし、renderChart()でサンプル通りにFlashを埋め込むHTMLを出力することもできるので、シチュエーションに合わせてやり方を選ぶことになる。


グラフにはいろいろなパラメータがあって、目標のラインを引いたり、目標の領域を塗ったりとFree版でも十分に使えることがわかった。
FusionCharts::getXML()で生成しているXMLがネストしてたりするのが気になるが、まぁ動くし、いいってことにしておこう・・・

*1:サイトの文字コードXML文字コードの当たりがうまくなかったと思うので、場合によっては外部から渡さなくてもいけるかも