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

オプション名 タイプ デフォルト 説明
fontname 文字列 'Arial' チャート内の標準のフォントを設定。要素ごとにプロパティを設定することで個別に指定も可能
legend.position 文字列 'right' 凡例の表示位置
'right'(右), 'left'(左), 'top'(上), bottom'(下), 'none'は非表示
titleTextStyle タイトルのスタイル設定
color、fontName、fontSizeでタイトルの色、フォント、フォントサイズを設定
tooltip.trigger 文字列 'focus' ツールチップの表示
'focus' (マウスオーバー時に表示), 'none'(表示しない)
  • このエントリーをはてなブックマークに追加

関連記事

798

Googleマップ上に複数マーカー・吹き出しを表示する

Google Maps上に複数のマーカーとクリックすると吹き出しを表示するサンプルを作成しました。CakePHP経由でDBからデータを取得し表示しています。 デモはこちら スクリプト

761

Foursquare APIのvenue searchを使って周辺のランドマークを取得

Foursquare APIを使用して、緯度と経度をもとに周辺の店情報などを取得するWebアプリをつくってみました。venue search (https://api.foursquare.com/v

no image

Googleマップの吹き出し(infowindow)内にコンテンツを表示する

前回、Google Maps上にinfowindow(吹き出し)を表示させました。infowindowに表示データを追加し、デザインをしてみました。どうやら普通にHTMLを書けばいいようです。画像とリ

no image

Googleマップ上のマーカーをまとめてくれる「MarkerClusterer」

以前、google Maps上にマーカー(と吹き出し)を表示するサンプルを作成しましたが(記事)、密集していると見づらい場合がありますよね。そこで、MarkerClustererという密集したマーカー

no image

Google Maps APIを使用して住所から緯度・経度を取得(ジオコーディング)

Google Maps APIを使用して入力された住所から緯度・経度へ変換できるようです。 「ジオコーディング」というらしいですが定義は以下 Google Geocoding API 通常、「ジオ

flickr-logo

Flickrアカウントの作成

Flickrを使用したWebサイトを構築するためFlickr API Keyを取得しました。まずは、API key取得のために必要なアカウントの作成方法を追います。 Flickr Flickr

flickr-logo

Flickr API Keyの取得

前回のアカウント作成ができたらAPI keyを取得します。ログイン後、API key作成ページへアクセスします。 http://www.flickr.com/services/apps/by をク

no image

Google Places Autocompleteを使って地名入力補助

ユーザに地名入力を促す際には、Google Places Autocompleteが便利です。 簡単なサンプルを以下に スクリプト 実装 function in

Comment

  1. div1052の場所とはどこでしょう?
    サイト内をdiv1052で検索かけてもここしかヒットしなかったのですが・・・

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

PAGE TOP ↑