nan7blog

カテゴリ別にランキングの上位１０商品を時系列に線グラフにしています。

・和書
・洋書
・音楽
・クラシック
・DVD
・VHS
・ゲーム
・家電
・キッチン
・おもちゃ
・ソフトウェア
・スポーツ
・健康

左にグラフ、右にタイトルを並べて、
線の色とタイトル文字の色を同じにして対応するようにしたところ、
見た目にもカラフルになりました。

商品別ページではランキング１位～20位までの記録をグラフ化。


・以下技術的なお話

使用したAPIはAmazon Web Services。
カテゴリ別に2007年1月1日から毎日取得した商品データをソースにしています。

グラフは画像ファイルではなく、Dojo Toolkitのグラフ機能を利用しました。

DojoはJavascriptで様々な表現を可能にするライブラリらしいのですが、
その中にJavascriptだけで画像のような流麗なグラフイメージを表示できるライブラリがあります。

折れ線グラフ、棒グラフ、ガントチャートなど色々なグラフが出来るのですが、あまつぅおんでは「なめらかな線グラフ（curvedLine）」を使って曲線を実現しています。

この方法の長短というと、以下のような感じでしょうか。

＜長所＞
・画像ファイルを生成・出力しないのでサーバに優しい
・画像ダウンロードがないのでクライアント側のレスポンスも若干向上する？
・Javascriptコード自体は割と簡単
・CGI不要

＜短所＞
・Javascriptオフだと見れない
・Javascript不可の携帯だと見れない
・古いブラウザだと見れないかもしれない
　※対応ブラウザは以下の通りです
　　Safari 2.0.x
　　Opera 9.0+
　　IE(Windows) 6.0+
　　Firefox 1.0+/Mozilla
　　Konqueror 3.5+
・画像イメージが静的に保存されない


Dojo参考サイト：
Dojo/JavaScript Toolkitのメモ
A Simple Dojo Charting Example