Google Chart APIをグラフィカルな表として使う
Posted: 6月 18th, 2009 | Author: admin | Filed under: API | Tags: google | No Comments »現在、野菜の育て方をメインにしたホームページをdrupalで製作している。すると、野菜を一覧にして、種まきのきせつなどが表示されるテーブルがほしくなる。そこで、すぐに思い浮かぶのはgoogle chartだ。このAPIを利用しているサービスをさがすと、いかにいきあたる
http://drupal.org/project/chart
ただ、googleをよくみると、べつにmoduleをつかわなくても、URLで実現しているだけなので、CCKのテンプレートで簡単にできる。
基本のフォーマットとしては以下
http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>
例
http://chart.apis.google.com/chart? : APIアドレス
chs=250x100 ： 出力されるイメージサイズ
&chd=t:60,40 ： チャートのデータ
&cht=p3 : チャートのタイプ
&chl=Hello|World ： チャートのラベル
いろいろオプションはあるが、以下は必ず必要
データフォーマット
データを設定するばあい、以下のいずれかのエンコーディングを指定する
- Text encoding
シンタックス:
chd=t:<chart data string>- 浮動小数点式で０から１００
- Text encoding with data scaling
シンタックス:chd=t:<chart data string>chds=<data set 1 minimum value>,<data set 1 maximum value>,<data set n minimum value>,<data set n maximum value>- 浮動小数点式で任意の範囲
例:chd=t:30,-60,50,120,80,-90&chds=-80,140この場合は－８０から１４０の範囲
＊
- Simple encoding
シンタックス:chd=s:<chart data string>- アルファベットのキャラクターで数字を指定する
- 短いURLをのぞむ場合に有効
- ０から６１の整数の範囲になる
- 指定方法
A—Z, whereA= 0,B= 1, and so on toZ= 25a—z, wherea= 26,b= 27, and so on toz= 510(zero)—9, where0= 52 and9= 61- The underscore character (
_) indicates a missing value
- Extended encoding
- 0—4095の整数の範囲になる
- ２つのアルファベット文字でしていする
AA= 0,AB= 1, and so on toAZ= 25Aa= 26,Ab= 27, and so on toAz= 51A0= 52,A1= 53, and so on toA9= 61A-= 62,A.= 63BA= 64,BB= 65, and so on toBZ= 89Ba= 90,Bb= 91, and so on toBz= 115B0= 116,B1= 117, and so on toB9= 125B-= 126,B.= 127
データーの丸め込み
指定されたデータは、図表されるさいにつぎのステップでまるめこまれる
- Encodingのデータレンジのなかに丸め込まれる
- Text encodingの場合、１２０は１００になる
- Text encodingの場合、－２０は０になる
- Text encodingの場合、10は10になる
- axis scale(軸のスケール)に丸め込まれる
axis values
データ軸の指定
例：
http://chart.apis.google.com/chart?chs=640x400&cht=bvs&chd=t:-30,0,10,50,75,120&chxt=y&
- cht=bvs : チャートのタイプbvs
- chd=t : チャートのデーターText encoding
chxt=y : y軸に対してのデーター軸表示- chxr=0,0,200,50 : Y 軸にたいして、データ範囲0—200、ステップ50
＊データ自体は０－１００で先にまるめこまれていることに注意
オプション
オプションは以下のパラメーターで指定する
chtt : チャートのタイトル
チャーとにタイトルをつける
ex : chtt=Site+visitors
chdl : チャート一つ一つに対する説明
たとえば、ひとつひとつの折れ線に解説をつける場合に私用する
ex : chdl=First|Second|Third
=<data set 1 label>|<data set n label>
chxt : 座標の表示
X,Yの座標を表示する
ex : chxt=x,y,r,t
chm ： マーカー
分岐点などにマーカーをカラフルに打てる
などなどかなりあるので、目的にあわせてしらべるのがいいと思われる
DRUPALのcomtenplateを使用した例
１）CCKには以下のようにデータがセットされている
$node->field_sow (array)
$node->field_sow[0] (array)
$node->field_sow[1] (array)
$node->field_period[0] (array)
$node->field_period[1] (array)
$node->field_harvest[0] (array)
$node->field_harvest[1] (array)
$node->field_period2[0] (array)
$node->field_period2[1] (array)
２）１２ヶ月をあらわすため、chart typeにcht=bhsを使用する
googleの例：
cht=bhs
chco=4D89F9,C6D9FD
chd=t:10,50,60,80,40|
50,60,100,40,20
１）をgoogleの２）のデータフォーマットにいれこめばいいことになる。この記述はdrupal上なので、phpでおこなう。ここで、野菜は年度をまたがる場合がある。わかりやすくするため、２４月を横軸のレンジとする。するとデータ設定にきをつかわなければいけない。
CCKでのデータ
$node->field_sow[0] (array) ： 種まきの開始時期（１月から１２月） ＊１回目
$node->field_sow[1] (array) ： 種まきの開始時期（１月から１２月） ＊２回目
$node->field_period[0] (array) ： 種まきの期間（月で表現）＊１回目
$node->field_period[1] (array) ： 種まきの期間（月で表現） ＊２回目
$node->field_harvest[0] (array) ：収穫の開始時期（１月から２４月） ＊１回目
$node->field_harvest[1] (array)：収穫の開始時期（（１月から２４月） ＊１回目
$node->field_period2[0] (array)：種まきの期間（月で表現）＊１回目
$node->field_period2[1] (array)：種まきの期間（月で表現）＊２回目
なので
$node->field_sow[0] .’,’.$node->field_period[0] .’,’.$node->field_harvest[0].’,’.$node->field_period2[0] .’|’.$node->field_sow[1] .’,’.$node->field_period[1] .’,’.$node->field_harvest[1] .’,’.$node->field_period2[1] ………
となればいいことになる
$data=’’;
for($i=0; $node->field_sow[$i]; $i++) {
$data .= $node->field_sow[$i] .’,’.$node->field_period[$i] .’,’.$node->field_harvest[$i].’,’.$node->field_period2[$i] ;
if($node->field_sow[$i+1] ){
$data .= ‘|’ ;
}
else{
break;
}
}hmtlサンプル
表示サンプル
より詳しくはこちら
