先日のVPSの記事をかくときに、wordpressでグラフを書く方法を探してたら、最初に見つかったのが、Google Chart API だったので、前回はそれを利用していました。
その時は直書きでAPI呼び出していたわけですが、あまり回数が多くなると明らかに面倒なので、他の楽な方法がないか模索してみました。
Google Chart API
前回の記事で使ったGoogleのグラフ画像を描画してくれるサービス
URLパラメータにグラフに必要な各種情報を載せて、呼び出せばグラフとして返してくれるので、wordpress以外でも、普通の無料スペース等でも外部URLの表示さえ許可されていれば、呼び出すことができます。
欠点としては、簡単なグラフならともかく複雑なグラフを書くときには、URLパラメータに合う形で、データを渡す必要があるので、書くのが面倒です。
例えば、前回の記事で作ったグラフのコードは以下をURIエンコードしたものになってます。
さすがにこれを毎回作るのは面倒すぎるので調べたのですが、対話型のウィザードも公式でありました。
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のウィザードばっかり触っていたので、それだけでまとめました
グラフを扱う方法はまた次回以降に書ければ…