Google Chart APIをもう少し触って、ウィザード操作を簡単にまとめてみた

先日のVPSの記事をかくときに、wordpressでグラフを書く方法を探してたら、最初に見つかったのが、Google Chart API だったので、前回はそれを利用していました。

その時は直書きでAPI呼び出していたわけですが、あまり回数が多くなると明らかに面倒なので、他の楽な方法がないか模索してみました。

Google Chart API

前回の記事で使ったGoogleのグラフ画像を描画してくれるサービス

URLパラメータにグラフに必要な各種情報を載せて、呼び出せばグラフとして返してくれるので、wordpress以外でも、普通の無料スペース等でも外部URLの表示さえ許可されていれば、呼び出すことができます。

欠点としては、簡単なグラフならともかく複雑なグラフを書くときには、URLパラメータに合う形で、データを渡す必要があるので、書くのが面倒です。

例えば、前回の記事で作ったグラフのコードは以下をURIエンコードしたものになってます。

http://chart.apis.google.com/chart?
chs=400x400
&chd=t:5.12,10.24,15.36,40.86,91.72|
9.80,14.80,19.80,39.80,79.80|2.56,5.12,10.24|4.90,9.80,19.80|
2.56,2.56,5.12,5.12,10.24|4.8,9.25,14.70,19.95,24.78|
5.12,10.24,20.48,30.72|15.75,26.25,36.75,47.25|
0,0,20.48|0,0,14.70|
5.12,10.24,20.48,40.96|4.50,9.8,19.8,35.8
&cht=lxy
&chco=ff0000,a033ff,ff00aa,00fd00,00dddd,dddd0f
&chtt=価格対メモリ容量比較|2012/01/13
&chdl=さくら|ServersMan@VPS|ServerQueen|Speever|CloudCore VPS|Osukiniサーバー(VPS)

さすがにこれを毎回作るのは面倒すぎるので調べたのですが、対話型のウィザードも公式でありました。

Chart Wizard – Google Chart Tools: Image Charts – Google Code

今回は、このウィザードの使い方をざっくりとまとめてみました

使い方

上記のページにアクセスしたら、中部にグラフの形がいくつかあるので、使いたいグラフを選択

今回は折れ線グラフなので、折れ線グラフの図をクリックして次へ

次に以下の項目がある設定画面があるので、それぞれ該当データを入力します

Title

グラフ上部に表示されるタイトルの入力します

そのままでは1行しか入力できませんが、”|”で改行として扱われます

Size

出力されるグラフ画像のサイズです

注意としては、ウィザード上では際限なくサイズを大きく出来ますが、最終的に挿入するときには、サイズの縦*横で300000以下になるようにする必要があります。(300001以上になると、呼び出し時にエラーが返されます)

Data

グラフ内のデータをここに記述します

Encodingは、データの入力形式ですが、Textはデータの最大値(Max)と最小値(Min)を指定できます。Simple,Extendedはその入力欄が隠れています(SimpleとExtendedの違いはよくわかりませんでした)

注意としては、ここで指定した最大値と最小値は各データ群で独立して、グラフ全体をそのデータで描画します。そのため、各データの最大値と最小値を揃えていない場合、線毎の縦横が異なった値で揃うようになってしまいます)

例: 最小値0  最大値 100 と最小値0  最大値 500の指定のデータ群がある場合、前のデータの50 と 後のデータの250が同じ位置に表示されます。

それを回避するためには、全データ群の最大値と最小値を同一の値に揃えてください。

次にData Valuesにデータセットを入力します。データの区切りはスペースとカンマどちらでも使えるようです。初期では2データセットしか有りませんが、追加する場合は、”Add New Data Set”をクリック

Data style

線や凡例のスタイルを指定する項目です。

Legendの各項目で、凡例の表示位置の指定

Data setで線の色(color)、太さ(Width)、点線(Dash)か否かと点線時のスタイル指定が可能です。

Axes

軸の書式設定

初期では、1つも無いので”Add new Axis”で追加

Typeで表示位置の指定、Rangeで開始値、終了値の指定、Labelを指定で、任意の値ごとに任意の文字列のラベルを挿入できます。(Tick marksだけは うまく動作がわからなかったため保留)

Axes style

軸に表示されるラベルの書式設定

軸ラベルの色(Color)、文字サイズ(Font size)、軸に対して右側揃えか左揃えかをAlignmentで指定(-1~1まで)

 

Markers

動作がわからなかったので、保留

Fills

背景の書式設定

全体(Background)、グラフエリアの背景を、塗りつぶし(Solid Fill)、グラデーション(Linear Gradient)、複数色塗り分け(縞/Linear Stripes)から選択、そして画像全体の透明度(Transparency)を指定できます。

Margins

画像の四隅から、グラフエリア間の余白を、左(Left)、右(Right)、上(Top)、下(Bottom)それぞれ指定できます。

Grid

グラフの補助線の書式設定

Step sizeでX軸、Y軸それぞれの軸の間隔を指定(単位が100を全体とした時の間隔であることに注意)、そして軸を点線(Dash)か否かと点線の書式設定が可能です。

webページに貼付け

こうするとウィザードの右側にプレビューとコードが常に自動更新されながら、表示されています。

画像URLは”Paste link in email or IM”に表示されているもので、HTMLタグを直接ならば、その下の”Paste HTML to embed in website”のコードをコピーすればokです。

また、”Embed with Visualization API”をクリックすると、JavaScript版のコードを出力してくれます。(ただJS版はここに直貼りだとうまく動作しなかった(出力されたHTMLファイルそのままではok)ので、ひとまず保留で…)

完成品

そうして出来たのが、以下のグラフ

価格対メモリ容量比較

前回よりと時間的には大差なく、その他前回とりあえず時間掛かりそうだったのでやめておいた、グリッドやら色分けの設定に時間がさけた上、断然楽でした。

 

最初は、wordpress上でグラフを扱う方法をまとめようと思っていたのですが、調べてるうちにGoogle Chart APIのウィザードばっかり触っていたので、それだけでまとめました

グラフを扱う方法はまた次回以降に書ければ…

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>