Googleチャートの円グラフを表示する

Googleの提供しているチャートAPIで簡単に様々なグラフを作ることができます。

準備

head内で下記のようにAPIを読み込みます。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

円グラフを描く

グラフを描くコードををhead内でもbody内でもどこでも良いので記述します。

<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([ //グラフデータの指定
        ['Task', 'Hours per Day'],
        ['Work',     11],
        ['Eat',      2],
        ['Commute',  2],
        ['Watch TV', 2],
        ['Sleep',    7]
    ]);
    var options = { //オプションの指定
        pieSliceText: 'label',
        title: 'Test Chart'
    };
    var chart = new google.visualization.PieChart(document.getElementById('piechart')); //グラフを表示させる要素の指定
    chart.draw(data, options);
}
</script>

表示させたい箇所に下記のようにHTMLを記述します。

<div id="piechart"></div>

下記のような円グラフが表示されます。

グラフ用のコードを眺めてもらえば、いじる箇所はなんとなく分かると思います。