ピラミッドグラフ

棒グラフには通常の下から上に棒を伸ばした棒グラフと、横にした棒グラフの２種類があります。縦横が違うだけなのですが、利用頻度は圧倒的に通常の棒グラフのほうが多いです。横の棒グラフは利用頻度がそれほど多くない理由は使いドコロが多くないということもあります。しかし、一つ良く見る使い方があります。それがピラミッドグラフ。人口統計などで年齢層別に表示しているアレです。

横の棒グラフは下から上に積み上げていく形では使いやすいですし、この手の表現は通常の棒グラフでは正直不便と言えます。そこで、これをGoogle Chartの一つであるBarChartで作る方法を記述します。このチャートはApps Scriptでもガジェットでも作成が可能です。

グラフ本体

Google Apps Scriptで作る

ソースコード

function doGet() {
    //スプレッドシートのIDとシート名を指定
    var sheet = SpreadsheetApp.openById("0AjN10lCzkUqkdHJqaUxkaUdyOUR3VGQwM3VHWTdWcGc").getSheetByName("sheet9");
  
    //データテーブルを作成し、カラムを設定する
    var dataTable = Charts.newDataTable();
    dataTable.addColumn(Charts.ColumnType.STRING, "年度");
    dataTable.addColumn(Charts.ColumnType.NUMBER, "男");
    dataTable.addColumn(Charts.ColumnType.NUMBER, "女");
  
    
  //特定のレンジを配列として取得
  var varValues = sheet.getRange("A2:C19").getValues();
    
  
    //配列データをテーブルに格納
    var counter = Number(0);
    for(var i in varValues) {
      var row = []; 
      row.push(String(varValues[counter][0]));
      row.push(Number(varValues[counter][1]));
      row.push(Number(varValues[counter][2]));
      dataTable.addRow(row);
      counter++;
    }

var data = dataTable.build(); 

  
    //チャートを作成
    var chart = Charts.newBarChart()
       .setTitle('H25年9月段階人口推計男女別(単位：千人)')
       .setStacked()
       .setDimensions(700, 500)
       .setDataTable(data)
       .setOption('hAxis.format', ';')
       .setOption('vAxis.direction', -1)
       .build();
    
    //チャートを表示する
    return UiApp.createApplication().add(chart);
}

Googleガジェットで作る

ソースコード

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="sample1" />
<Content type="html">
<![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

//corechartのパッケージをロード

google.load("visualization", "1", {packages:["corechart"]});

      google.setOnLoadCallback(initialize);
      function initialize() {
        // The URL of the spreadsheet to source data from.
        var query = new google.visualization.Query(
            'https://docs.google.com/spreadsheet/pub?key=0AjN10lCzkUqkdHJqaUxkaUdyOUR3VGQwM3VHWTdWcGc&gid=9');
        query.send(draw);
      }
      function draw(response) {
        if (response.isError()) {
          alert('Error in query');
        }
        var data = response.getDataTable();
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));


//グラフオプションの指定

        var options = {
           isStacked: true,

chartArea: {left:80,top:30,width:"80%",height:"90%"},

title: 'H25年9月段階人口推計男女別(単位：千人)',

height: 500,

width: 700,

           hAxis: {
               format: ';'
           },
           vAxis: {
               direction: -1
           }
        };


var formatter = new google.visualization.NumberFormat({

             pattern: ';'
        });
 
        formatter.format(data, 2)


//グラフの描画

        chart.draw(data, options);

}

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="chart_div"></div>
  </body>
</html>
]]>
</Content>
</Module>

ポイント

  • 用意するデータの片方（このグラフの場合、女性の人口数）は、マイナス値で作成すること。
  • setStacked / isStackedで積み上げグラフとして指定すること。これをやらないと、男女の棒が平行にならないで互い違いになるので汚くなる。
  • vAxisのdirectionオプションで、-1を指定することで、一番下が0才からのスタートになる。
  • hAxisのformatオプションで、セミコロンを指定することで、男女両方の値はプラス値で表示される。同時にNumberFormat側でもpatternオプションでセミコロンを入れておく。これで完璧。

参考リンク