Google Chart Toolsでグラフを書いてみた（国勢調査のデータ使って）
Webアプリケーションで、度々、
折れ線、円、棒グラフなどを描きたいということがあります。
昔はPHP+GDの構成で描いていた気がしますが、
この記事では今風にHTML5/SVGでグラフを描く「Google Chart Tools」を使って
グラフを描いてみることにします。
# HTML5で描けば、PHP+GD構成とは異なり、
# サーバ側に負荷のかかるイメージ生成が不要になります。
Google Chart Tools
https://developers.google.com/chart/
「Google Chart Tools」を使うと、次の種類のグラフを描画できます。
・PieChart ←円グラフ
・ScatterChart
・Gauge
・GeoChart
・Table
・TreeMap
・ComboChart
・LineChart ←折れ線グラフ
・BarChart ←棒グラフ
・ColumnChar
・AreaChart
・CandlestickChart
以下で、それぞれどんなグラフかのイメージが閲覧できます。
Chart Gallery（描けるグラフの種類）
https://google-developers.appspot.com/chart/interactive/docs/gallery
データの入手（国勢調査）
グラフを描く前に何かグラフにするデータが必要なので、
ここでは、馴染みやすく＆入手が容易な「国勢調査」のデータを使います。
以下のs-statのリンクから、
→主要な統計から探す
→国勢調査
→時系列データ→男女，年齢，配偶関係
→1. 男女別人口及び人口性比－全国，都道府県（大正9年～平成22年）
と辿って「da01.xls」というファイルをダウンロードします。
政府統計の総合窓口 (s-stat)
http://www.e-stat.go.jp/
このファイルから、
大正9年～平成22年の都道府県別・男女別の人口を知ることができます。
グラフの描画①（円グラフ）
データが入手できたところで、グラフを書いてみます。
まずは、都道府県別の人口を円グラフにしてみます。
「Pie Chart」の説明ページで、Exampleコードを見てみます。
Visualization: Pie Chart
https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
Exampleコードの以下が、データを指定している部分です。
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
]);
・１行目がラベルで、２行目以降がデータ
・１列目が項目名、２列目が値
という形になっていることがわかります。
都道府県別の人口に当てはめると、
・１列目が都道府県名、２列目が都道府県別の人口
とすればよいと考えられます。
元データをこの形に合わせるためにExcel上でデータを加工します。
<a href="http://www.flickr.com/photos/62769571@N03/9710078362" title="View 'gchart_01' on Flickr.com"><img height="216" title="gchart_01" alt="gchart_01" border="0" src="http://farm6.staticflickr.com/5342/9710078362_6631533ea5.jpg" width="500"/></a>
上記のイメージのように、
『= "['" & A9 & "'," & BD9 & "], "』という数式をBH9セルに入力し、
『['01 北 海 道',5506419], 』という形のデータを作ります。
これを47都道府県分適用し、
Exampleコードのデータ位置に貼り付けます。
```html
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['都道府県', '人口'],
['01 北 海 道',5506419],
['02 青 森 県',1373339],
['03 岩 手 県',1330147],
['04 宮 城 県',2348165],
['05 秋 田 県',1085997],
['06 山 形 県',1168924],
['07 福 島 県',2029064],
['08 茨 城 県',2969770],
['09 栃 木 県',2007683],
['10 群 馬 県',2008068],
['11 埼 玉 県',7194556],
['12 千 葉 県',6216289],
['13 東 京 都',13159388],
['14 神 奈 川 県',9048331],
['15 新 潟 県',2374450],
['16 富 山 県',1093247],
['17 石 川 県',1169788],
['18 福 井 県',806314],
['19 山 梨 県',863075],
['20 長 野 県',2152449],
['21 岐 阜 県',2080773],
['22 静 岡 県',3765007],
['23 愛 知 県',7410719],
['24 三 重 県',1854724],
['25 滋 賀 県',1410777],
['26 京 都 府',2636092],
['27 大 阪 府',8865245],
['28 兵 庫 県',5588133],
['29 奈 良 県',1400728],
['30 和 歌 山 県',1002198],
['31 鳥 取 県',588667],
['32 島 根 県',717397],
['33 岡 山 県',1945276],
['34 広 島 県',2860750],
['35 山 口 県',1451338],
['36 徳 島 県',785491],
['37 香 川 県',995842],
['38 愛 媛 県',1431493],
['39 高 知 県',764456],
['40 福 岡 県',5071968],
['41 佐 賀 県',849788],
['42 長 崎 県',1426779],
['43 熊 本 県',1817426],
['44 大 分 県',1196529],
['45 宮 崎 県',1135233],
['46 鹿 児 島 県',1706242],
['47 沖 縄 県',1392818],
]);
var options = {
title: '都道府県別人口'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
すると、以下のような円グラフを描くことができます。
東京、神奈川、千葉、埼玉への人口集中が見て取れますねww
グラフの描画②（折れ線グラフ）
次に、調査年時系列で男女別人口を折れ線グラフに描いてみます。
「Line Chart」の説明ページで、Exampleコードを見てみます。
Visualization: Pie Chart https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart
Exampleコードの以下が、データを指定している部分です。
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
]);
・１行目がラベルで、２行目以降がデータ
・１列目が軸（年次）、２列目以降が各項目に対する値
という形になっていることがわかります。
調査年時系列で男女別人口に当てはめると、
・１列目が調査年次
・２列目が男性の人口
・３列目が女性の人口
とすればよいと考えられます。
元データをこの形に合わせるためにExcel上でデータを加工します。
まず、表の行列が逆の方が都合がよいので、次の手順で入れ替えます。
1. 新しいシートを作成
2. 元データを選択
<a href="http://www.flickr.com/photos/62769571@N03/9706839361" title="View 'gchart_03' on Flickr.com"><img height="245" title="gchart_03" alt="gchart_03" border="0" src="http://farm8.staticflickr.com/7393/9706839361_efdf1fc599.jpg" width="500"/></a>
3. 新しいシートでコンテキストメニューから「形式を選択して貼り付け」
「行列を入れ替える」にチェックを入れて貼り付け
<a href="http://www.flickr.com/photos/62769571@N03/9706839339" title="View 'gchart_04' on Flickr.com"><img height="280" title="gchart_04" alt="gchart_04" border="0" src="http://farm8.staticflickr.com/7396/9706839339_a9668ab5b5.jpg" width="330"/></a>
<a href="http://www.flickr.com/photos/62769571@N03/9706839353" title="View 'gchart_05' on Flickr.com"><img height="245" title="gchart_05" alt="gchart_05" border="0" src="http://farm6.staticflickr.com/5341/9706839353_7e64c88e02.jpg" width="500"/></a>
次に、データの形式を合わせるため次のようにデータを作ります。
<a href="http://www.flickr.com/photos/62769571@N03/9710078304" title="View 'gchart_06' on Flickr.com"><img height="245" title="gchart_06" alt="gchart_06" border="0" src="http://farm4.staticflickr.com/3731/9710078304_f6ce8f01d5.jpg" width="500"/></a>
上記のイメージのように、
『= IF(A3<>"", "['" & A3 & "'," & D3 &","& D4 & "]","")』という数式をF3セルに入力し、
『['大 正 9 年 1920',28044185,27918868],』という形のデータを作ります。
これを調査年次分適用し、
Exampleコードのデータ位置に貼り付けます。
```html
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['調査年次', '男性', '女性'],
['大 正 9 年 1920',28044185,27918868],
['大 正 14 年 1925',30013109,29723713],
['昭 和 5 年 1930',32390155,32059850],
['昭 和 10 年 1935',34734133,34520015],
['昭 和 15 年 1940',36566010,36548298],
['昭 和 20 年 1945 1)',33894059,38104045],
['昭 和 25 年 1950',41241192,42873382],
['昭 和 30 年 1955',44242657,45833937],
['昭 和 35 年 1960 2)',46300445,48001178],
['昭 和 40 年 1965',48692138,50516999],
['昭 和 45 年 1970',51369177,53295994],
['昭 和 50 年 1975',55090673,56848970],
['昭 和 55 年 1980',57593769,59466627],
['昭 和 60 年 1985',59497316,61551607],
['平 成 2 年 1990',60696724,62914443],
['平 成 7 年 1995',61574398,63995848],
['平 成 12 年 2000',62110764,64815079],
['平 成 17 年 2005',62348977,65419017],
['平 成 22 年 2010',62327737,65729615],
]);
var options = {
title: '男女別人口推移'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
すると、以下のような折れ線グラフを描くことができます。
# 昭和20年に男性の人口が激減しているのは第二次世界大戦の影響
# 昭和55,60年あたりから人口増加が緩やかになっているのは少子化の影響
# 平成7,12年あたりから女性は増加するが男性があまり増加していないのは、
# 不況による男性の自殺が増加した影響でしょうか。。
この記事では、「Google Chart Tools」の使い方をメインに扱ったため
Excelでデータを加工してグラフを書きました。
データをデータベースから抽出し、
データ部分を動的に書き換えてやることで、
日毎に手動作成しているレポートの自動出力なども可能になると思います。
