カレンダーチャート

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

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

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

今回は、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>

参考リンク

Calender Chart - Google Developer

Google Sites

Report abuse