Google Chartsを利用した棒グラフの作成

Google Charts のAPIを利用するとあっという間に見易いグラフを作れます。手順をここでまとめておきます。

例題：東京の最高気温と最低気温を表す棒グラフ

例として2013年12月から2014年1月にかけての東京の最高気温と最低気温のデータを使います。Google Chartsに読み込ませるデータは、原則、二次元配列で構成するようです。上位の配列の第1要素に変数名の配列を設定します。第2要素からがデータになります。また、下位の配列の第1要素はｘ軸のラベルデータにします。何も設定しない場合、自動的に第1要素のデータを使ってX軸の値を決めてくれます。

var dataset = [
["date","tempmax","tempmin"],
["12/11",12.8,7.3],
["12/12",13.2,7.9],
["12/13",14.9,4.1],
["12/14",11.2,4.6],
["12/15",11.4,2.8],
["12/16",11.9,5.4],
["12/17",12,7],
["12/18",8.8,3.6],
["12/19",7.6,3.7],
["12/20",9.4,3.3],
["12/21",11,2.8],
["12/22",11.4,5.5],
["12/23",8.4,4.4],
["12/24",12.5,4.5],
["12/25",10.3,3.3],
["12/26",10,3.4],
["12/27",9.4,5.1],
["12/28",9.3,2.7],
["12/29",9.5,0.5],
["12/30",10.5,0.6],
["12/31",12.7,1.3],
["1/1",15.5,3.1],
["1/2",12.1,3.1],
["1/3",8.5,3.8],
["1/4",11.7,2.4],
["1/5",7.3,3.9],
["1/6",10.5,2.1],
["1/7",9.9,1.9],
["1/8",12.8,2.8],
["1/9",11.8,3],
["1/10",6.8,1.4],
["1/11",9,0.7]
];

HTMLの要素にはグラフを格納するためのdiv要素とGoogle Visualization APIを起動するためのscriptタグ要素を書いておきます。このAPIのライブラリファイルはダウンロードできません。必ずgoogleのページへのリンクを設定します。Google　Chartsに関して唯一不便な点は、これかもしれません。

<script src = "https://www.google.com/jsapi"></script>
<div id ='chart_div' style="width:550px; height:500px;"></div>

あとはグラフを書くためのコマンドです。呪文のように関数を呼び出す以外、ほとんど設定がいりません。デフォルトの設定を変更する際はoptionsの中に加えます。ここは連想配列になっていて、入れ子にする場合、階層の下位にも連想配列を作ります。今回の例では、titleにタイトル、hAxis(x軸のこと)のタイトルと文字の色、barの色を加えました。

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable(dataset);
    var options = {
    title: 'Temperature in Tokyo',
    hAxis: {title: 'DATE', titleTextStyle: {color: 'red'}},
    bar: {groupWidth: "100%"},
        colors: ['red', 'blue']
    };
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);

}

これだけです。簡単ですね。
ここまでをまとめるとこうなります。

ここまで作ってみて、実際のグラフを見て、感心してしまいました。というのは、Y軸に関して何の設定もしないのに、適切な範囲で表示されているからです。では、一部のデータが0よりも小さい値の場合はどうなるでしょうか。試しに札幌の最高気温と最低気温のデータを利用して同様のグラフを作ってみました。

このように0を挟んで正の値と負の値の両方を含むデータも、特別な設定なしできれいに表示されます。

最後に、まとめですが、たくさんの数字を含むデータをまとめる形式として表とグラフが考えられます。今回の例のように、複数の変数から傾向を読みとるのであればグラフの方が良さそうです。
グラフを見れば、「東京の12月から1月にかけての気温の変化は主に最低気温の下降で特徴づけれられる」ことが一目了然です。そして、今回の例のように、なじみのないデータの傾向をつかむためにGoogle Chartsが便利に使えそうです。