How to Google Chart for Beginner:humming bird

これだけ知っていればGoogle Chartが使えるようになる、というレベルを目指して、Google Chartの使い方を説明したいと思います。

必須パラメータ

必須パラメータは以下の3つです。

チャートデータ(chart data)
チャートサイズ(chart size)
チャートタイプ(chart type)

チャート図を作成するには少なくとも、この3つを指定する必要があります。

チャートデータのデータ形式

Google Chartで扱えるデータ形式は3つあります。

テキストエンコード(Text Encode)
簡易エンコード(Simple Encode)
拡張エンコード(Extended Encode)

テキストエンコード: 通常の使い方をする場合、扱うことができる値の範囲は0.0～100.0までとなっています。数値をそのままデータとして扱えるため、これが一番扱いやすいデータ形式と言えるでしょう。
簡易エンコード: データとなる値を"A～Za～z0～9"の何れかの文字に置き換えて扱います。このため扱える値は0～61までとなります。0は"A"、61は"9"です。例えば『23, 45, 61』というデータを渡すなら『chd=Xt9』という形になります。詳しくはこちらをご覧下さい。
拡張エンコード: 簡易エンコードと同じく、データとなる値を文字に置き換えるのですが、拡張エンコードは2文字で一つの値を表します。これにより、扱える値の範囲は0～4095までとなっています。 0は"AA"、4095は".."となります。置き換える文字の種類は簡易エンコードで扱う文字に、さらに'-.'を加えたものとなります。例えば『23, 45, 61』というデータを渡すなら『chd=AXAtA9』という形になります。詳しくはこちらで確認して下さい。

簡易エンコードと拡張エンコードの利点はURLが短くなることです。
しかし、URLを短くしなければならない理由がないのなら、変換(エンコード)する処理を必要としないテキストエンコードを使う方が無難でしょう。

データスケーリング

データスケーリングとは指定した範囲にデータが納まるように値を修正(パーセントに変換)することを指します。対象となるデータ形式はテキストエンコードのみです。

例えば、-1000～1000の範囲のデータがあるとします。通常のテキストエンコードであればこれを正しく表現することはできませんが、データスケーリングすることでそれを可能とします。
データスケーリングを行うには『chds=最小値,最大値』のように指定します。

Example
以下のチャート図では最小値に"-1000"、最大値に"1000"を指定し、-1000～1000の範囲のデータを表示しています。

これによって0.0～100.0の範囲の値という制限を気にせず、ほとんどのデータは表現できるはずです。

チャートサイズ

チャートサイズは『chs=幅x高さ』という形で指定します。幅(width)が"300"、高さ(height)が"200"ピクセルのサイズを指定するなら『chs=300,200』となります。
例えば棒グラフでは扱うデータの数によって幅を調整する必要があります。円グラフではデータに付けるラベルを使用する場合には、これも幅を調整する必要があります。

チャートタイプ

チャートタイプの種類は以下の16種類になります。

lc - 折れ線グラフ
lxy - 折れ線グラフ
bhs - 棒グラフ(横)
bvs - 棒グラフ(縦)
bhg - 棒グラフ(横)グループ化
bvg - 棒グラフ(縦)グループ化
p - 円グラフ
p3 - 円グラフ3D
v - ベン図
s - 散布図
ls - スパークライン
r - レーダー(直線)
rs - レーダー(曲線)
t - 地図
gom - Google-o-meter
qr - QR コード

どのタイプを使用するにしても、この他に様々なオプションやスタイルの指定を組み合わせてチャート図を作成することになるでしょう。
チャートタイプ、あるいは用途に合わせてテンプレートのようなものを作成しておくと便利です。

Example

$.gChart.pie3D = function(options){
  return (new $.gChart(this.merge({
    cht: this.chartType.pie3D,
    chs: '300x200',
    chco: 'ff69b4'
  }, options))).image();
}

Usage

$(document.body)
  .append($.gChart.pie3D({
    chd:bsData,
    chl:label,
    chco: '99cc00|cc6699',
    chs: '350x125',
    chtt:'Browser Share:May 2009'
}));

チャートタイトル

以前は日本語を使用できなかったようですが、現在は日本語を使用しても問題ないようです。
チャートタイトルの指定は『chtt=チャートタイトル』のように行います。
チャートタイトルの文字に対して、色と文字サイズを指定することが可能です。
スタイルの指定は『chts=カラー,フォントサイズ』という形になります。
色は赤、フォントサイズに13を指定するなら『chts=ff0000,13』とします。
スペースはプラス記号 (+) で指定する、となっていますが、実際にはそのまま空白を使用しても良いようです。

軸ラベル

軸ラベルとはチャート図のメモリの数値などを表すラベルのことを指しますが、この軸ラベルを指定する方法は全部で3つあります。

軸ラベル指定例:

『chxr=0,0,100』
『chxl=0:|0|20|40|60|80|100』
『chxp=0,0,20,40,60,80,100』

上記3つで指定した値はチャート図の大きさにもよりますが、どれもほぼ同じ値を指定をしていることになります。
それぞれに特徴があるので、実際に使用するときにでも確認し、適宜使い分けて下さい。ここでの説明は割合させて頂きます。

以上、チャート図を作成するために必要な最低限の知識は得られたのではないかと思います。これ以上のことは実際に使用しながら覚えていけば良いのではないかと考えます。

色々なオプションやスタイルの指定方法を覚えるとこんなおかしな使い方もできるという例を一つ。
Google Chartでサッカーのシステム(フォーメーション)を表示してみました。

チャート図となるimg要素さえ生成できれば、Javascriptを使用できないGoogle Sitesでも利用することができます。
より良いコンテンツを作成するための一つのツールとしてGoogle Chartを利用してみては如何でしょうか。

jQueryのプラグインも作成しましたのでご利用下さい。

jquery.gchart.js

jQuery plugin - gChart Demo

こちらは「あったら便利かも」おまけ程度にどぞ

jquery.gchart.map.js

余談:
意味もなく、タイトルを英語にしてみました。
英語を知らない人ほど横文字を使いたがるという傾向は私にも当てはまるようです。(>_<)