2009年12月13日日曜日

Highcharts.js を使ってみた


最近IDEA*IDEAさんで取り上げられていたHighcharts.jsを試してみましたので、躓いた点などをメモしておきます。


■公式サイト
http://www.highcharts.com/
ダウンロード、更新履歴はこちらから見られます。ライセンスもこちらに記載があります。
個人利用、教育目的の利用、および非営利組織での利用については無料ですが、商用利用の際にはライセンスの購入(1サイト$80、複数サイト$360)が必要になるので注意です。


■公式リファレンス
http://www.highcharts.com/ref/
おそらく全部JSで実装されているのだと思いますが、凄いクオリティ高いです・・・


■実際に導入してみて躓いたポイント
以下、すべてバージョン1.0.2(2009/12/09)での気づきです。
グラフを描画する領域のサイズは、CSSでは定義できない、直接style属性に書く必要がある
たとえばCSSを使って、
<style>#chart_area {width:800px; height:400px;}</style>
<div id="chart_area" ></div>
のようにしても描画時に無視され、高さが0になります。必ず直接style属性を用いて
<div id="chart_area" style="width:800px; height:400px;"></div>
のように書く必要があります。

Zoom機能を使う際、画面のスクロールが発生すると選択領域がバグる
Mac OS X 10.6上のFirefox3.5.6とSafari4.0.4にて再現。他のブラウザは未チェックです。論より証拠、こちらのページを開いて、少し画面全体を下にスクロールしてから、チャートを縦にドラッグしてY軸ズームしようとしてみてください。まぁ、ひどいバグなのですぐに直るとは思いますが。

seriesに与えるデータは、必ずX軸方向の昇順にソートされている必要がある
特にxAxisにdatetimeを指定しているときが危険です。たとえばこのようなデータはNGです。
series: [{
name: 'Plague Rider',
data: [[Date.UTC(2009, 12, 4), 57.4],
[Date.UTC(2009, 12, 3), 57.6],
[Date.UTC(2009, 12, 2), 59.1]]
}]
かならずこのようにソートしなければなりません。
series: [{
name: 'Plague Rider',
data: [[Date.UTC(2009, 12, 2), 59.1],
[Date.UTC(2009, 12, 3), 57.6],
[Date.UTC(2009, 12, 4), 57.4]]
}]
ソートされていないと、チャートにマウスカーソルを合わせてもラベルが表示されなくなります。気づきにくいバグでした。

seriesに与えるデータにnullがあると、0として扱われる
そのため、たとえば12月1日は100、12月2日は110、12月3日はデータが分からないのでnull・・・とすると、12月3日のところだけいきなり0になってグラフが滅茶苦茶になります。回避方法としてはxAxisのtypeをdatetimeにするか、yAxisのminを自分で計算して指定してください。

xAxisのtypeがdatetimeのとき、連続していないデータがあるとsplineは使用できない(lineは使用できる)
原因は不明です。たぶんバグじゃないだろうかと思ってますが、公式のxAxisのtypeがdatetimeなサンプルを見てもsplineではなくてlineを使っているのでひょっとしたら仕様かもしれません。

■まとめ
公開されたのがつい先月の末ということで、まだちょっとBuggyな感じです。また、エラーメッセージがまともに表示されないため、JSファイルのどこでエラーになっているかはわかっても原因が何か分からないなど、デバッグが結構大変です。しかしながらデザイン美麗で機能豊富、カスタマイズも容易と、一通り優れた点は持ち合わせていると思います。PrototypeやjQueryなど他の外部ライブラリに依存しないのも良い点です。$80なら支払ってもよいのでは?


■Google Charts APIとの比較
やはり気になるのはGoogle Charts APIと比べてどちらが使えるかでしょう。ちょっと調べてみました。ただしGoogle Charts APIについては実際に試したことがないのであくまで公式ページのドキュメントを見て気づいた点のみです。間違っていたらごめんなさい。
Highcharts.jsの優れている点
  • 美麗なデザイン
  • ズームや特定データの一時消去、ラベル表示など、対話性に優れたUI
  • 単体のJSファイルなので外部のサーバに依存しない
  • Ajax対応が容易

Google Charts APIの優れている点
  • より多数のグラフに対応(レーダーチャートや地図など)
  • 商用利用でも完全に無料

2009年12月11日金曜日

Django の Template Filter には任意の変数を使用することができる

公式ドキュメントに記載がなかったので、自分用メモ。

たとえばDjangoのフィルターで、
{{ some_value|floatformat:1 }}
としているところを、viewから変数を渡して
{{ some_value|floatformat:floatpoint }}
のように書くことができます。他にも
{{ now "%Y %m %d" }}
{{ now date_format }}
みたいに書くとか。・・・常識?

Heroes of Newerth の統計情報を集めるサイトにグラフを付けてみた



前回に引き続きおしらせです。
HoN統計情報サイトに、今度は時系列の折れ線グラフを付けてみました。


■追加した機能
今のところ、以下の3種類の統計をグラフで見ることができます。
  • Usage Percent(ヒーロー使用率、高いほうが人気があります)
  • Winning Percent(勝利率、高いほうが強いです)
  • K/D ratio(Kill/Deathレシオ、高いほうが俺Tueeできます)

グラフに表示されるのはトップ10までです。11位以下のヒーローにつきましては現在ページングして見られるように対応を進めてますので少々お待ちください><


■日本語化?
すみません、(主に作者の怠慢が理由ですが)英語版しかありません・・・でも数字ばっかりなのでたぶん大丈夫です!