諸用でgoogleのcharts APIのページを眺めていたら、Calendar Chartなる素敵なチャートが追加されていました。betaとありますが、チェンジログを見たところ、今年の1月末頃に追加されたものらしいです。このチャートはカレンダーのようにデータを表示するもので、デモを見るとなかなかにクール! ということでちょっと触ってみました。

デモや説明を見ながら、作ったのがこちらの2013年度札幌最低気温グラフです。元になったデータは気象庁からダウンロードしたcsvをjsonに加工したものです。いやー気象庁はこんな便利な情報も提供してたんですね。(私達のような一般人が何に使うのかさっぱり分からないけど><)

https://gist.github.com/Aquei/ddd5368e033c099d9410

 若干の解説?

visualization APIのバージョン

googleのdemoではvisualizationのバージョンを1.1で指定していますが、”1″でも動くようです。ここで注意が必要なのが、visualizationのapiは複数のバージョンで共存できないということです。つまり、同じページで”1″のcorechartと”1.1″のcalendarを使うことは出来なくて、どっちかのバージョンに統一しなきゃだめなんです。だから、既にGoogleのChartを使ってるページに新しくdemoからコピペで使ったら、「え、なんで片方エラー出てんの?」ってザワザワします。(<-私のこと)

セルの色

Each square in a calendar chart represents a day. Currently, the color of the data cells can’t be customized, although that will change in the next release of Google Charts.

If the data values are all positive, the colors will range from white to blue, with the deepest blues indicating the highest values. If there are negative data values, they will appear orange, as shown below.

現在のバージョンではセルの色が固定で、値が高いほど青く、負の値だとオレンジ色になります。だから今回のように最低気温をカレンダー形式で表示しようとすると、7月8月が真っ青で、1月2月がオレンジになるわけですが、色のイメージは真逆ですよね。これは次のGoogle Chartリリースで変わるかも、ということですが、やはり使いにくいですね。

ツールチップ

demoを見たらわかると思いますが、データテーブルのカラムにはDateとNumberを指定するんですが、今のところツールチップはいじれないみたいですね。カーソルホバーで日付と数字が表示されても素っ気ないというか、ユーザビリティ?なにそれ、って感じがしますね><; 例えば最低気温のツールチップだったら単位「℃」ぐらいは表示しないとチンプンカンプンだし、何なら、前年の同じ日付の気温も表示出来るぐらいのカスタマイズはしたいですね。

ベータ感は否めない?

と、まあ、軽くいじってみただけでも「痒いところに手が届かない」印象を受けますね。ベータだから批判するのはズレた意見ですが、実際に使うにはちょっとまだ早いのは確かです。でもカレンダー形式でデータを表示するのは分かりやすいし、見やすいのも事実です。ですから、ホビーでやっているようなページなら今からでも使ってみても良さそうですね。とりあえず私はYUGEというSteamのセールサイトで値引き率を表示するのに試しに使ってみました><