「Google Chart API」を利用するとグラフが簡単に作成できる

Google Chartを使うときには、JavaScriptを利用しますが、ある程度JavaScriptを知っていれば詳しくなくても簡単にグラフ（チャート）が作成できます。

Google Chartの使い方

Google Chartには色々なチャートがありますけれど、利用するパッケージによって使うメソッドなどが変わりますが、ほとんど下のような流れで作成することができます。

１．最初のスクリプトタグで「https://www.google.com/jsapi」を設定することでGoogle Chartを利用できるようになります。

２．google.loadでチャートの種類によって読み込むパッケージを設定（例：corechart）

３．setOnLoadCallbackに適当な名前の関数を設定します。（例：graphChart）

４．関数を作成します。この関数の中で「google.visualization.arrayToDataTable」を使いデータを設定していきます。

５．データを設定したあと表示するHTMLタグを取得して、表示したいグラフ（例：google.visualization.PieChart）の引数に設定します。

６．グラフを設定したあとdrawメソッドの引数にデータを渡すとグラフを表示します。

※オプションの設定もありますが、チャートを作成する流れは以上です。

<script src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(graphChart);

function graphChart() {
	var data = google.visualization.arrayToDataTable([
		['都道府県', '人口'],
		['東京都', 13159388],
		['大阪府', 8865245],
		['神奈川県',　9048331],
		['愛知県',　7410719],
		['福岡県',　5071968],
		['北海道',　5506419],
		['埼玉県',　7194556]
	]);
	var graph = new google.visualization.PieChart(document.getElementById('enGraph'));
	graph.draw(data);
}
</script>

<div id="enGraph" style="width:500px"></div>

※上の例ですとチャートの表示範囲をstyleで設定していますが、チャートの表示の大きさなどの設定するのにオプションを使い、それをdrawメソッドに設定する方法もあります。

jQueryを使用した場合の例です。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
...
...
$(function() {
	var char = $('#enGraph');
	graph.draw(data);
});