ガントチャート
グラフ本体
新チャートの中でも最も実用性が高いのが、このチャート。スタート日と終了日を持ってして、ガントチャートを作ってくれるすぐれもの。優れているポイントは、例えば、今回のケースのように、人名単位でグループ化した上で、ワークの内容が入ってくれること。ワークのタイプによってカラーリングも統一してくれる点。注意すべきは、開始日付もしくは終了日付のどちらかが空だとエラーになるので、本来であれば、queryで投げる前にそういったデータはフィルタしておくと良い。フィルタをする場合には、query.send()の前に下記のようなクエリ文を記述すると良い。今回は４列のシートなので以下のようになる。
query.setQuery('SELECT B,C,D,E WHERE D is not null AND E is not null and D != "" AND E != ""');また、開始日付より終了日付が前に記述してしまってるケースの場合もエラーで表示されないので、そちらは、スプレッドシート側で制御を入れておくと良い。開始日付より終了日付が前に来ている時にはエラー表示するか？それとも、クリアして再入力を促す仕組みが必要である（onEditのイベントトリガーで判定すると良い）。なお、タイムラインチャートは最低３つ（項目名、開始日、終了日）が必要です。さらに、タスク名の４つ目があればこのようにガントチャートになります。左端のカラムから項目名、タスク名、開始日、終了日とならべてグラフにします。
※IEだと不具合があるとかないとか。妙なエラーがタスクに触ると出てくる事があります。
ソースコード
<?xml version="1.0" encoding="UTF-8" ?><Module><ModulePrefs title="sample1" /><Content type="html"><![CDATA[//とりあえずライブラリ読み込み
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization', 'version':'1','packages':['timeline']}]}"></script><script type="text/javascript">google.setOnLoadCallback(initialize);//初期化function initialize() { var query = new google.visualization.Query('https://docs.google.com/spreadsheet/pub?key=0AjN10lCzkUqkdHJqaUxkaUdyOUR3VGQwM3VHWTdWcGc&single=true&gid=8');query.send(handleQueryResponse);}function handleQueryResponse(response) { //レスポンスデータを受け取る var data = response.getDataTable();//行の数を取得する var numRows = response.getDataTable().getNumberOfRows();//カラムを設定し、データテーブルを用意
var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'string', id: 'Job' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' });//データテーブルにデータを流し込む
for(i=0;i<numRows;i++){ var row = [];
row.push(data.getValue(i, 0));
row.push(data.getValue(i, 1));
row.push(new Date(data.getValue(i, 2)));
row.push(new Date(data.getValue(i, 3)));
dataTable.addRow(row);
}//チャートを描画するvar chart = new google.visualization.Timeline(document.getElementById("schedule"));
chart.draw(dataTable,null);
}</script><div id="schedule" style="width: 900px; height: 500px;"></div>]]></Content></Module>ポイント
- 読み込むパッケージはtimelineであるので、きちんと冒頭で定義しておくこと。
- カラムをきちんと設定しないとデータテーブルを用意しただけでは反映されない。
- データテーブルに流し込むときには、new Dateで入れ込むデータの型変換をしておく。