実際にグラフを表示してみよう
ここまでの説明を元に、以下のようなデータを折れ線グラフで表示してみましょう。
| ページビュー | 訪問者数 |
|---|---|
| 1530 | 620 |
| 1710 | 760 |
| 1570 | 590 |
| 1650 | 660 |
グラフのサイズは横750ピクセル／縦400ピクセル、縦軸の下限と上限は、ページビューが0／2000、訪問者数が0／1000とします。このグラフのURLは、次のようになります。
http://chart.apis.google.com/chart?
chs=750x400
&cht=lc
&chd=t:1530,1710,1570,1650,1730|620,760,590,660,730
&chds=0,2000,0,1000
実際に、このアドレスにWebブラウザーでアクセスしてみると、正しくグラフが表示されました。
|
|---|
| Google Chartによって表示されたグラフ |
色や線種も指定できる
ここまでで紹介した以外にも、Google Chartでは色や線種などのさまざまなパラメータを指定できます。以下は先ほどのグラフに色などの書式を指定した例です。背景やグラフに色がついた状態となり、より見やすいグラフになりました。
http://chart.apis.google.com/chart?
chs=750x400
&cht=lc
&chd=t:1530,1710,1570,1650,1730|620,760,590,660,730
&chds=0,2000,0,1000
&chco=ff0000,0000ff
&chls=2,1,0|2,6,3
&chdl=page%20view|visitor
&chtt=page%20view%20and%20visitor
&chxt=y,r,y,r
&chxl=0:|0|500|1000|1500|2000|1:|0|250|500|750|1000|2:|page%20view|3:|visitor
&chxp=2,50|3,50
&chg=0,25
&chf=c,lg,90,ffffff,0,ccffff,1
|
|---|
| 上のURLにアクセスしたときに表示されるグラフ |
このように、手軽に使えるGoogle Chartはグラフの作成時に覚えておくと便利です。また、PHPやJavaScriptなどを使って、データをプログラムで出力するようにすれば、動的に変化するグラフを自動的に表示できます。Google Chartの詳細な使い方は、以下のGoogle Codeのサイトで解説されていますのでチェックしてみてください。
http://code.google.com/intl/ja/apis/chart/
