Google Chartとgchartrbの紹介

Googleは、昨年の後半、ひそかに新しいチャートAPI(サイト・英語)をリリースしました。それらが公開されるまでは、もともとビデオや金融サービスとして使用されていた内部のプロジェクトでした。Googleは、よくある問題に対する洗練され効果的なソリューションを継続して提供しています。このチャートAPIも例外ではありません。私たちは、今すぐにそれを利用することができ、SaaSのシャングリラ(楽園)へと近づいていきます。

Rubyの開発者は、ここ数年にわたり様々なチャートのライブラリを味わってきました。Sparklines(source)、Gruff(source)、SVG::Graph(サイト・英語)のようなプロジェクトは、疑いようなくきちんとしたものです。しかし、それらの多くはRMagickに依存しているので、中世の怪物であるImageMagickをインストールするために、眠れない、いらいらする夜を過ごさなければなりません。

しかしながら、私たちはもはや不毛な努力をする必要はありません。チャートを作ることがURLを作るのと同じくらい簡単ならばどうでしょう？軌道の状態や扱いにくいXMLは不要です。某Starfleetの艦長の不朽の言葉にあるように、Googleには「made it so(そうし給え)」という精神があるので、HTTPプロトコルの単純さを利用したその場でチャートを作成するための手段を私たちに与えてくれています。：

＃has "made it so"　⇒made it soは、スタートレックのピカード艦長の名文句。”「そうし給え」を持っている”から”そうし給えという精神がある”としました。

• 追加でソフトウェアのインストールをする必要がない
• クロスブラウザ互換
• HTTPをサポートする全てのブラウザで動作する
• Googleが私たちのサービスを提供したり、私たちがそれをダウンロードしたり、それらを私たち自身が提供することができる
• 寛大な利用方針(source)

APIを使用する楽しみだけでなく、そのチャートの見栄えも素晴らしいです。

例えば、円グラフは、以下のとおり。

http://chart.apis.google.com/chart?cht=p3&chd=t:65,35&chs=150x100

棒グラフも簡単です。

http://chart.apis.google.com/chart?cht=bvg&chs=
200x125&chd=t:80,50,70%7C100,90,50&chco=cc0000,00aa00

背景にグラデーションがかかった線グラフは、少しURLが長くなります。

http://chart.apis.google.com/chart?cht=lc&chd=
s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkegg
jp&chco=FF0000&chls=4.0,3.0,0.0&chxt=x,y&chxl=
0:%7C1%7C2%7C3%7C4%7C5%7C1:%7C0%7C50%7C100&chs=200
x125&chf=c,lg,45,ffffff,0,76A4FB,0.75%7Cbg,s,EFEFEF

色をコード化した地図を生成することも可能です。

http://chart.apis.google.com/chart?chco=f5f5f5,ed
f0d4,6c9642,365e24,13390a&chd=s:fSGBDQBQBBAGABCBDAKLCD
GFCLBBEBBEPASDKJBDD9BHHEAACAC&chf=bg,s,eaf7fe&chtm=usa&
chld=NYPATNWVNVNJNHVAHIVTNMNCNDNELASDDCDEFLWAKSWIORKYMEO
HIAIDCTWYUTINILAKTXCOMDMAALMOMNCAOKMIGAAZMTMSSCRIAR&chs=44
0x220&cht=t

このチャートを得るのはとても複雑ですが、URLで扱うことができます。

http://chart.apis.google.com/chart?cht=r&chs=200x200&chd=
 s:voJATd9v,MW9BA9&chco=FF0000,FF9900&chls=2.0,4.0,0.0|
 2.0,4.0,0.0&chxt=x&chxl=0:|0|45|90|135|180|225|270|315&chxr
 =0,0.0,360.0&chg=25.0,25.0,4.0,4.0&chm=B,FF000080,0,1.0,5.0|
 B,FF990080,1,1.0,5.0|h,0000FF,0,1.0,4.0|h,3366CC80,0,0.5,5.0|
V,00FF0080,0,1.0,5.0|V,008000,0,5.5,5.0|v,00A000,0,6.5,4

素晴らしいサービスではありませんか? URLパラメータはドキュメントを読むことなく解釈するのは困難かもしれません。インターフェースはより単純ではないですが、ロード時間はとても快適です。

以下の可能性について考えてみてください。

• 既存のHTMLの中にチャートを組み込む

    <img src="http://chart.apis.google.com/chart?cht=p3&chd=t:65,35&chs=500x200"/>   

• RHTMLやHAMLマークアップの中でチャートを使用する

    <%= image_tag "http://chart.apis.google.com/chart?cht=p3&chd=t:65,35&chs=500x200" %>   

• PNGファイルとしてチャートをダウンロードする

      wget -O chart.png "http://chart.apis.google.com/chart?cht=p3&chd=t:65,35&chs=500x200"   

Googleのサーバーにチャートのレンダリングを頼るという考えが嫌ならば、自分のサーバーで画像を変換するのも非常に簡単です。例えば、以下はチャートを取得してそれをデプロイサーバーにアップロードするための簡単なCapistranoタスクです。

set :chart_url, "http://chart.apis.google.com/chart?cht=p3&chd=t:65,35&chs=500x200"

  task :update_chart do
   `wget -O chart.png #{chart_url}`
   put File.read("chart.png"), "#{deploy_to}/chart.png"
   `rm -f chart.png`
end 

基本的なパラメータ

チャートを生成するためにURLを送信するという単純さは良いことです。しかし、どのようなパラメータを持つURLになるのでしょうか? Googleのサイトで、全てのAPIリファレンス(source)を利用できますが、ほんの少しの単純なパラメータを利用するだけでも、驚くほど多くの数のチャートを作成することができます。

チャートを生成するための基本的なURLは、常に以下のようになります。:

http://chart.apis.google.com/chart?

チャートを構成するためにGoogleで必要としているパラメータが3つだけあります。それは、チャートのタイプ、チャートのサイズ、チャートのデータです。

チャートのタイプは、"cht"パラメータで指定します。文字通り、多くの種類のチャートタイプがありますが、最も一般的なものは、折れ線グラフ("lc")、横棒グラフ("bhs")、垂直棒グラフ("bvs")です。折れ線グラフを生成するためには、以下のようなURLになるでしょう。:

http://chart.apis.google.com/chart?cht=lc

ここで、2つのパラメータが欠けています。チャートサイズとチャートデータです。次に、それらを追加しましょう。チャートサイズ("chs")は、整数値でチャートの幅と高さをとります。例えば、チャートの幅が100ピクセルで高さが50ピクセルの場合は、以下のようになります。:

http://chart.apis.google.com/chart?cht=lc&chs=100x50

最後に、チャートのデータ("chd")を追加しましょう。Googleは、データエンコードの方法を4つ提供していますが、最もシンプルなものはテキストエンコーディングです。テキストエンコーディングを利用したいということをGoogleに知らせるために、データの前に"t:"を追加します。:

http://chart.apis.google.com/chart?cht=lc&chs=100x50&chd=t:

テキストエンコーディングは、0から100までの範囲で1つ以上の浮動小数点数を使います。数が100に近いほど、チャートでは高い値をとります。チャートにしようとする値が100を上回る場合は、正しい範囲へと縮小する必要があります。チャートに3つの点をプロットするには、以下のようになるでしょう。:

結果のチャートは、以下のようになります。

この3つのパラメータで、私たちは必要とするチャートのほぼ全てを生成することができます。そうは言うものの、より洒落たものが欲しい場合はどうでしょう? APIでは、色、グラディエント、凡例などもサポートしています。ここでカバーするにはあまりに多くの追加オプションとなってしまうので、より詳細を学びたければ、きちんと書かれているAPI reference(source)を確認してください。

gchartrbで簡単なチャート作成

私たちは、基本的なパラメータでURLを構成することが十分に簡単であるということを見てきました。しかし、複雑さを抑えている単純なチャートを生成するためのコードが、DRYの原則(同じことを繰り返すな)を犯そうとしています。同ページに複合チャートを生成したい場合、コピーアンドペーストすると複合コードは悲惨なことになるでしょう。

これを和らげるために、私たちはコードの断片をクラスやメソッドに抜き出し始めています。おそらく、チャートのデータを持ち、URLに対してそれをパラメータ化するための単一のメソッドを作成するでしょう。第2のメソッドは、事前定義された名称をベースとしたチャートに対して適切な色の選択を操作できるでしょう。第3は、凡例を生成することができるでしょう。私たちがここで言っているのは、私たちに使いやすいインターフェースを与えてくれる GoogleAPIのラッパーです。

幸いにも、私たちは分かりきったことをやり直す必要はありません。Deepak Jois氏(source)は、APIに対してそのようなラッパーを書いています。それは、gchartrb(サイト・英語)と呼ばれているもので、チャートURLを生成するためのきれいで簡潔な方法です。第1ステップとして、gemでそれをインストールしてください。

gem install gchartrb

ここで、お気に入りのエディタを開いてコーディングを始めます。以下は、単純な棒グラフを生成する方法です。:

require 'rubygems'
require 'google_chart'

GoogleChart::BarChart.new('800x200', 'My Chart', :vertical) do |bc|
 bc.data 'Trend 1', [5,4,3,1,3,5], '0000ff'
 bc.data 'Trend 2', [1,2,3,4,5,6], 'ff0000'
 bc.data 'Trend 3', [6,5,4,4,5,6], '00ff00'
 puts bc.to_url
end 

このコードを実行すると、結果は以下のようになります。

http://chart.apis.google.com/chart?chtt=Bar+Chart&cht=
bvg&chs=800x200&chco=0000ff,ff0000,00ff00&chd=s:yoeKey,KU
eoy9,9yooy9&chdl=Trend+1|Trend+2|Trend+3

data メソッド呼び出しには、名称(オプションの凡例に使用するためのもの)、データリスト、16進数のカラー表現が必要となることに注意してください。私たちは、これらのパラメータの正しい形式について心配する必要はありません。それは、ライブラリがその複雑さを肩代わりしてくれるからです。

BarChart クラスをインスタンス化するときに、サイズ、名称、チャートの方向(垂直なのか水平なのか)を指定します。:

BarChart.new('800x200', 'Bar Chart', :vertical)

重ねて言いますが、適切なパラメータはライブラリによって生成されるので、私たちはトラブルを減らすことができます。to_urlを呼ぶことで、チャートにURLを与え、ページに組み込む準備が整います。

比較的若いgemであるにも関わらず、gchartrbは驚くほど完成しています。基本的な線、円、棒グラフはもちろんのこと、ベン図や散布図の生成もサポートしています。生成されるチャート全ては、グラディエント、背景、塗りつぶし、ストライプ、複数色の凡例などで飾ることもできます。何ができるかについては、より詳細に書かれているドキュメントをWebサイトで確認してください(source)。

結論

GoogleのチャートAPIは驚くべきツールです。そして、gchartrbは、それらをきれいにラップすることでより簡単に作ることができます。追加ソフトウェアのコンパイルをすることなく、今すぐにRailsのアプリケーションにチャートを生成することができます。それは素晴らしいことです。

原文はこちらです：http://www.infoq.com/articles/bass-google-charts-gchartrb