Google Chart Toolsを使って円グラフ

昨日某政党が行っていたアンケート結果の円グラフですが、このツールを使っていたようでした。

ページをリロードするとアンケート総数が減ってみたり、途中でリセットしてみたりと迷走を続けた中、最終的に結果を発表しないという画期的なアンケートでした。ネットユーザにとっての格好のおもちゃになることは誰にとっても想像に難くなく、最初からネットでやるなと言いたくなります。
アンケート総数の増減に関して、、グラフはサーバ上にJSONファイルを生成して作成していたいようですが、そのファイルの更新日付が遡っていたりしてたので、そこが問題じゃなかったのではないかと思うところです。

そんなことは置いといて本題ですが、Google chart Toolsを使用して円グラフを作成してみました。デモ

スクリプト

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

実装

<!-- 表示要素 -->
<div id="div1053"></div>

<script type="text/javascript">
// Visualization APIとpiechart packageをロード
google.load( 'visualization', '1.0', { 'packages': ['corechart']});

// APIロード時のコールバックをセット
google.setOnLoadCallback( drawChart);

// データ取得・
function drawChart() {

    // データテーブル作成
    var data = new google.visualization.DataTable();
    data.addColumn( 'string', 'votes');     // カラム追加
    data.addColumn( 'number', 'number');    // カラム追加
    data.addRows([                          // グラフデータ挿入
        ['賛成', 91],
        ['反対', 3]
    ]);
 
    // オプション
    var options = {
        'title': '推進に賛成?',             // タイトル
        // タイトルのスタイル
        'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},
        'width':  800,                      // 横
        'height': 600,                      // 縦
        colors: [ '#009A44', '#67C91C'],    //グラフ配色
        legend: { position: 'bottom'}       // 凡例
    };
 
    // 円グラフ初期化・描写(オプション)
    var chart = new google.visualization.PieChart( document.getElementById( 'div1053'));
    chart.draw( data, options);
}
</script>

ページに複数の円グラフを描写するには、div1052div1053の部分を複数用意すればできます。

オプション

Visualization: Pie Chart

Related

ローソク足チャート「jqPlot」 Google Places Autocompleteを使って地名入力補助 「jqPlot」を使って円グラフを作成 Google Maps APIを使用して住所から緯度・経度を取得(ジオコーディング) Google アナリティクスで管理外のサイトへのアクセスがレポートされている場合の対処 Google Chrome インストール Google+ プラスワン(+1)ボタンの設置 「Google Analytics for WordPress」投稿URLにやたら長いパラメータがついてしまう