「Google Chart API」で作成できるグラフの例

Google Chartでは、色々なグラフを作成することができます。
その作成方法は、ほとんどのグラフでほぼ同じです。
※特殊なグラフなどでは、違う部分が増えます。

グラフによってコードを変更する箇所
1. グラフのコード例

グラフによってコードを変更する箇所

各グラフによって変更する主なコードの場所は、以下の3点です。

google.loadにあるpackagesの箇所
drawChart関数にあるgoogle.visualization.○○○の箇所
グラフ表示用のデータ

他にもオプションを設定する場合、グラフによって設定項目に違いがある場合もあります。

グラフのコード例

円グラフ（PieChart）や縦棒グラフ（Column Chart）など主なグラフでは、以下のコードをそれぞれ表示するグラフに合わせて変更・追加していくだけでグラフを表示することができます。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script>
//PieChart、AreaChart、LineChart、ColumnChart、BarChartなどcorechart
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
        //グラフに使用するデータを設定
        var chartData = [データ];
        //オプション設定、無くても可
	options = {
	width:600,
	height: 300
	}
	data = google.visualization.arrayToDataTable(chartData);
        //goolge.visualization.○○○を利用するグラフの関数を設定
	chart = new google.visualization.○○○Chart(document.getElementById('chartPNG'));
	chart.draw(data, options);
}
</script>