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],

]);
```

・1行目がラベルで、2行目以降がデータ ・1列目が項目名、2列目が値 という形になっていることがわかります。

都道府県別の人口に当てはめると、 ・1列目が都道府県名、2列目が都道府県別の人口 とすればよいと考えられます。

元データをこの形に合わせるためにExcel上でデータを加工します。

gchart_01

上記のイメージのように、 『= "['" & A9 & "'," & BD9 & "], "』という数式をBH9セルに入力し、 『['01 北  海  道',5506419], 』という形のデータを作ります。 これを47都道府県分適用し、 Exampleコードのデータ位置に貼り付けます。

<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>  

すると、以下のような円グラフを描くことができます。

gchart_02

東京、神奈川、千葉、埼玉への人口集中が見て取れますね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],  

]); ```

・1行目がラベルで、2行目以降がデータ
・1列目が軸(年次)、2列目以降が各項目に対する値
という形になっていることがわかります。

調査年時系列で男女別人口に当てはめると、
・1列目が調査年次
・2列目が男性の人口
・3列目が女性の人口
とすればよいと考えられます。

元データをこの形に合わせるためにExcel上でデータを加工します。
まず、表の行列が逆の方が都合がよいので、次の手順で入れ替えます。
1. 新しいシートを作成
2. 元データを選択
gchart_03

  1. 新しいシートでコンテキストメニューから「形式を選択して貼り付け」
     「行列を入れ替える」にチェックを入れて貼り付け
    gchart_04

gchart_05

次に、データの形式を合わせるため次のようにデータを作ります。

gchart_06

上記のイメージのように、
『= IF(A3<>"", "['" & A3 & "'," & D3 &","& D4 & "]","")』という数式をF3セルに入力し、
『['大 正 9 年 1920',28044185,27918868],』という形のデータを作ります。
これを調査年次分適用し、
Exampleコードのデータ位置に貼り付けます。

<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>

すると、以下のような折れ線グラフを描くことができます。

gchart_07

# 昭和20年に男性の人口が激減しているのは第二次世界大戦の影響
# 昭和55,60年あたりから人口増加が緩やかになっているのは少子化の影響
# 平成7,12年あたりから女性は増加するが男性があまり増加していないのは、
#  不況による男性の自殺が増加した影響でしょうか。。

この記事では、「Google Chart Tools」の使い方をメインに扱ったため
Excelでデータを加工してグラフを書きました。

データをデータベースから抽出し、
データ部分を動的に書き換えてやることで、
日毎に手動作成しているレポートの自動出力なども可能になると思います。