アクセス数推移をTimeplot APIで表示する方法 ノウハウ(Tips) 　

zegenvsさんのPathtraq APIを使ったアクセス数推移をGoogle Chart APIで表示する方法に触発されて、微妙に似ている事例を紹介ということで。。。

zegenvsさんのPathtraq APIを使ったアクセス数推移をGoogle Chart APIで表示する方法に触発されて、微妙に似ている事例を紹介ということで。。。

Timeplotをご存じでしょうか？
Flashを使ったダイナミックなグラフはよく見かけますが、TimtplotはAjaxで動くグラフ描画ツール(API)です。

ちょっと前に某サイトでこれを使ってアクセス数推移をグラフ表示する機能をつくりましたので、事例紹介ということで投稿させていただきます。

まずは、例ということで、実際の画面をご覧ください。

例）カカクコム(証券コード:2371)の注目チャート
http://stockcafe.jp/2371a

上記は株式投資サイトストックカフェにおける「カカクコム(2371)」銘柄に対するユーザのアクセス数推移をグラフ化したものです。

グラフ上でマウスを動かすと、日付とアクセス数がダイナミックに表示されます。

また、グラフ右上の「関連テーマ」や「関連ニュース」などのチェックボックスをクリックすると、対象の銘柄に関連するイベントがグラフ上に表示されます。イベントをクリックすると詳細内容がフキダシで表示されます。

このように、TimtplotはHTML+JavaScriptだけでダイナミックなグラフを実現しているのがすごいところです。

Timtplotの使い方ですが、実はそれほと難しくありません。
Getting Startedにステップ毎に書かれていますので、通常のグラフならすぐにできると思います。

今回のテーマであるアクセス数推移グラフを実現する上でのポイントは、


コピペする ブログに貼る
timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo);
timeplot.loadText("data.txt", ",", eventSource);
timeplots.loadXML("events.xml", eventSource2);

の様に、JavaScript側からアクセス数データ(CSV)とイベントデータ(XML)をWeb経由で読み込ませるようにし、Webサーバ側で所定の形式でデータを出力するAPIを用意しておくことです。

ストックカフェではいくつかの非公開なAPI（といっても、すぐにハックされそうですが…）を呼び出すようにしています。

たとえば、アクセス数取得APIは、


コピペする ブログに貼る
2007-12-16,7,215
2007-12-23,2,266
2007-12-30,2,338
2008-01-06,4,203
2008-01-13,6,253


のようなCSVを出力しています。

第1カラムが日付で、2カラム目以降が数値データとして利用できます。（JavaScriptで利用するカラムを指定できます）
＃ちなみに、注目チャートでは2カラム目はつかっていません。順位です。。。

また、イベント取得APIは、


コピペする ブログに貼る
<data xml:lang="ja" lang="ja">
<event start="Jul 26 2008 11:02:00" title="ニュース: ちょっと古いけれど紹介 (CNET Japan)" link="?m=stock&a=page_news_item&nid=57924"/>
<event start="Jul 24 2008 20:08:01" title="ニュース: カカクコムクチコミサイト「食べログ.com」、レストラン情報の編集機能を開放 (CNET Japan)" link="?m=stock&a=page_news_item&nid=56967"/>
<event start="Jul 22 2008 13:07:00" title="ニュース: いちよし経済研究所のレポートが材料視されたカカクコム（2371）は本日は利食い売りが先行する展開に (兜町ネット)" link="?m=stock&a=page_news_item&nid=55117"/>

</data>


のようなXMLを出力します。
＃link属性はなくてもOKです。（リンクしなくなります）

ストックカフェでは上記の例の、銘柄(企業)のアクセス数推移グラフの他にも、独自コンテンツであるテーマページへのアクセス数推移グラフ、会員のマイページへの"足跡"の推移グラフもほぼ同じ仕様で実装しています。

このようにTimeplotを使えば、ちょっとした作りこみで見栄えのよいグラフを表示することができますので、ぜひお試しください。

最後にちょっとした補足事項を。。。



IE(6も7も)だと動作が重いです。特に大量のイベントを追加するとかなり重いです（500イベントで数分とか）。また、イベントの色が表示されなかったりと若干制限事項があります。これは、Timeplot Limitationsに書いてあるように、Googleのexplorer canvasライブラリでcanvasタグをエミュレートしているからのようです。




Timeplotのサイトに「Timeplot has graduated!」と書いてあるとおり、今後はsimile-widgetsとして引き継がれるようです。いまのところ大きくAPIが変わる雰囲気ではなさそうですが。。。




上記のように今後プロジェクトが移行する(?)こともあって、外部のサイト上のAPI(JavaScript)を呼び出すのが不安な場合、How to Run Timeplot Off-linの方法で自分のサイトにダウンロードして使うこともできます。（ウチもやってます）




オプションでのタイムゾーンの指定がまずかったのか、はたまたTimtplot(Timeline)の仕様なのか、イベントの時刻表示がGMTになってしまいました。いろいろ試したのですがうまくいかなかったので、不真面目にもTimeplotのプログラム自体を改造して安直にlocaltimeを表示するようにしてしまいました。。。


ここに投稿したのでストックカフェでのカカクコムへのアクセス数が上がるような。。。