カレンダーチャート

この記事は既に古い記事です。最新の記事はこちらのサイトで閲覧することが出来ます。

漫然と積み上げられた人の出勤状況などのデータをチャート化するなどの利用方法が考えられるカレンダーチャートですが、まだベータ版ということもあって、機能的には多機能ではないので、まだまだですが、非常に面白いチャートを作ることができます。人の出勤状況だけではなく、毎日の情報を定量的にヒートマップのように表示することもできると思います。

このチャートは日付と数値の２列のみで構成されている非常にシンプルなチャートです。とりわけ、数値は定量的なチャートの場合にはそのまま数値を用意すれば良いのですが、例えば今回のような出勤状況チャートの場合、自分で数値の意味を定義して入れてあげないといけません。また、判例にあまり意味がないので、チャートを使う時には、判例的な説明文が必要になると思います。

今回は、0 = 出勤者なし, 30 = 午前のみ, 70 = 午後のみ, 100 = １日中出勤

と定義して数値を入れてみました。また、見た目についてはGoogleのコードそのままですが、オプション設定をいじると結構見栄えが変えることが可能です。

このグラフは上から日曜日～土曜日に並んでいます。今回の場合、土日が休みならば、一番上と下がデータがからになるわけで色付けがなくなるわけです。

チャート本体

ソースコード

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="sample1" scaling="true" scrolling="true" />
<Content type="html">
<![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

<script type="text/javascript"

src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['calendar']}]}">

</script>


<script type="text/javascript">

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=14');
        query.send(draw);
      }
      function draw(response) {
        if (response.isError()) {
          alert('Error in query');
        }
        var data = response.getDataTable();
        var chart = new google.visualization.Calendar(document.getElementById('chart_div'));


//行の数を取得する

var numRows = response.getDataTable().getNumberOfRows();

//カラムを設定し、データテーブルを用意

var dataTable = new google.visualization.DataTable();

dataTable.addColumn({ type: 'date', id: data.getValue(0,0) });

dataTable.addColumn({ type: 'number', id: data.getValue(0,1) });


var cnt = numRows -1;

//データテーブルにデータを流し込む

for(i=1;i<cnt;i++){

var row = [];

row.push(new Date(data.getValue(i, 0)));

row.push(data.getValue(i, 1));

dataTable.addRow(row);

}

var options = {

title: 'お医者さんの当直状況',

height: 350,

calendar: {

monthLabel: {

fontName: 'Times-Roman',

fontSize: 12,

color: '#981b48',

bold: true,

italic: true

},

monthOutlineColor: {

stroke: '#981b48',

strokeOpacity: 0.8,

strokeWidth: 2

},

unusedMonthOutlineColor: {

stroke: '#bc5679',

strokeOpacity: 0.8,

strokeWidth: 1

},

underMonthSpace: 16,

}

};


//グラフの描画

        chart.draw(dataTable, options);

}

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

参考リンク