Chart2プラグインを使う

Daisukeh 2009/02/20 22:04 初稿
Daisukeh 2009/02/23 10:25 校正
Daisukeh 2009/08/05 16:26 移設

記事一覧

 サーバー移管に伴い、リアルタイムなデータ収集を行っていないため、サンプル画面をプラグイン出力ではなくイメージに変更しました。

 plugin:chart2を使ってパソコンの利用履歴をグラフにしてみました。PukiWikiを使用していた頃から自分のパソコンの稼動状況をデータベースに記録していましたが、RESTインターフェースによるアクセスなどを作ってみたものの、可視化するいい方法がないか模索していました。そんな中でDokuWikiplugin:chart2を使うと、簡単に美しいグラフが表示できると知って、今回それを試してみました。

Chart2の記述例

<html><div align="center"></html>
<chart2 /log/pcalive.php?method=chart&p=http 520 520 WorkingHours ffffff></chart2>
<html></div></html>

Chart2の表示例

 上のグラフはcandlestickと呼ばれる株価指標などを表示するためのグラフタイプを利用して、ネットワークの開始と終了、自分のパソコンの起動と停止を表示させています。グラフ中の黄色い枠内は基準労働時間で、それを超えた時間が残業時間となります。残業と判断される場合には、グラフのopen欄とclose欄の数値を逆転させて、赤い塗りつぶしで表示するようにしました。また、自分のパソコンが使われなかったとき(たとえば土曜日など)には、バーは表示されません。(「穴を開ける方法」参照)

 plugin:chart2maani.usというサイトで詳しい使い方を見ることができます。プラグインはいわばこのライブラリのラッパークラスになっていて、中身はフラッシュにかませる XML 形式のデータをどのように生成するかだけなので、外部スクリプト(PHPなど)でも良いし、静的な XML を用意してもいいし、Javascriptなどでクライアントサイドで生成する方法も紹介しています。上の「パソコン起動時間指標グラフ」の場合は、PHPでデータベースから必要となるデータを抽出して XML データを整形・出力する関数を作成し、plugin:chart2にそのスクリプトの URL を渡しています。実際にスクリプトの起動をかけるのはグラフ描画ライブラリのフラッシュなので、その時点までスクリプトの実行はされません。従って、ランタイムにデータを渡すなどの処理には注意が必要です。

 このライブラリ(「XML/SWF Charts version5」)はとてもよくできていて、基本的なグラフ描画なら面倒なデータの設定は一切必要ありません。少し懲りたいのであれば、対応するタグが用意されているのでそれを操作すればいいし、自由に描画することもできます。一番面白いのは、グラフに動きがつけられることです。描画関連のタグプロパティにはtransitionという項目があって、これにdropとかslide_upとかzoomとか指定するだけで、簡単にアニメーションが追加できるのです。もちろんduration等の設定もあります。

 最近ではArduinoに代表されるようなProcessingを用いたグラフィカルなガジェットが流行していますが、「XML/SWF Charts」も表示に特化した高性能なインターネットガジェットと言えるでしょう。何を可視化するかが問題ですが、先に可視化する技術が確立していればこそ、扱うデータを決めたり集めたりするのが楽しくなるというものですね。

Daisukeh 2009/02/23 10:32 追記

 そういえば plugin:chart2URL を渡すときに、ドメインを固定したくない場合にどうするか、迷った末に下のような表記にすることでこの問題を回避しました。8-)

<chart2 /log/pcalive.php?method=chart&p=http 520 520 WorkingHours ffffff></chart2>
 &p=httpと書いてある部分がミソで、XML/SWF Chartsのフラッシュに渡すパラメータとしてxml_sourceに URL をセットするためには、指定する URLhttpという語句が含まれている必要があるということなのです。

/lib/plugins/chart2/syntax.php

  $att = explode(" ",$att_str);
  $tryFN = preg_replace("/({{)?([^|}]+).*(}})?/",'$2',$att[0]);
  if(strpos($tryFN,"http")!==false){
    /*
     * external xml file
     */
    $source = "xml_source=".$tryFN;
    $idx=1;
  }else{
本来は、「http://daisukeh.ddo.jp/...」と書きたいところですが、そうすると自宅から見えなくなってしまいます。(自宅サーバーなので、グローバルなドメインはエコーバックされてアクセスできない。)「/」から書き始めればアクセスドメインに対して絶対位置を指定できますから、フラッシュの目をごまかすことができます。

掲示板

Enter your comment
 
 
programming/dokuwiki/chart2プラグインを使う.txt · 最終更新: 2009/08/05 16:32 by daisukeh
 

Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS
Driven by DokuWiki Powered by Google do yourself a favour and use a real browser - get firefox ! GIMP is the GNU Image Manipulation Program. Adobe Flex smarty : Template Engine