棒グラフには通常の下から上に棒を伸ばした棒グラフと、横にした棒グラフの２種類があります。縦横が違うだけなのですが、利用頻度は圧倒的に通常の棒グラフのほうが多いです。横の棒グラフは利用頻度がそれほど多くない理由は使いドコロが多くないということもあります。しかし、一つ良く見る使い方があります。それがピラミッドグラフ。人口統計などで年齢層別に表示しているアレです。
横の棒グラフは下から上に積み上げていく形では使いやすいですし、この手の表現は通常の棒グラフでは正直不便と言えます。そこで、これをGoogle Chartの一つであるBarChartで作る方法を記述します。このチャートは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);}<?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>