今回のレシピ
プラットフォーム:Webブラウザ
使用言語:JavaScript

 Googleが提供しているAPIライブラリ「Google API」と聞いてパっと思いつくのは,検索系(Google AJAX Search API)か,地図系(Google Maps API/Google Earth API)でしょう。しかしGoogle APIには他にもいくつか種類があります。今回ご紹介するのは「Google Visualization API」です。Visualizationってなんだろうということですが,実はこれグラフを描画するためのAPI群です。

 グラフを作るということだけであれば,Excelのような表計算ソフトを使うのが一番手っ取り早い方法です。しかし,例えばWebサイトの中でグラフを利用しようと思えば,Excelでグラフを作り,これを画像としてキャプチャし,HTMLに貼り付けるという手順を踏まなくてはなりません。実際にIT系の記事では,特にハードウエアのベンチマーク結果などで,Excelで作ったのであろうグラフをよく見かけるわけです。

 Webサイトでグラフを描画する場合,バックエンドのデータベースからデータを取り出して,それを元にグラフを描きたいというニーズもあります。このときに毎回データベースからデータを引き出してきてはExcelでグラフを生成して…という手法は現実的ではありません。せっかくデータベースにリアルタイムで貯まっていくデータがあるのに,みすみす即時性を捨てる必要はありませんものね。

 私はかつてFX(外国為替証拠金取引)のサイトを作ったことがあります。システム作成の意図(いろいろあるみたいです)も絡んで実際の取引から数分の遅れはあったのですが,ほぼリアルタイムに外貨レートを表示するシステムです。取引の状態はバックエンドの巨大なデータベースに入っています。このデータベースからデータを取り出して数値による表示とあわせて「ローソク足」というグラフを描き出すのが私が作った部分です。

 このときにグラフの描画はPHPとGDを用いました。GDというのはLinuxで標準的に使用されるグラフィクス動的生成ライブラリです。PHPからGDを操作することができますので,プログラムとして描画命令を作って直線やらなにやらを作り出してグラフにするわけです。

 生成したグラフは画像ファイルとして出力できるので,毎回生成した画像ファイルをHTMLに貼り付けて見せるわけです。この方法は自分で好きなグラフを生成できるので便利ですが,Excel並に見栄えの良いものを作ろうとすると結構大変です。

 Google Visualization APIは他のGoogle APIと同様にJavaScriptで記述できますので,PHP + GDのようにコードレベルでヒーヒー苦しむことなく,簡単にきれいな(ここがポイント)グラフを作ることができます。「HTMLで統計出すのにグラフが欲しいんだよなあ」というあなたのために,今回はこのGoogle Visualization APIをご紹介していきます。