ガントチャート (Google チャートの活用) ‐ Yellowfin でプロジェクトの進捗管理

今回は、Google チャートと連携してガントチャートを作成します。

1. 事前準備

1-1. ライブラリーの配置

ライブラリーを Yellowfin サーバーがアクセスできる場所に配置する必要があります。Yellowfin サーバーがインターネットにアクセスできる環境であれば、以下の URL を参照することが可能です。
https://www.gstatic.com/charts/loader.js
Yellowfin サーバーがインターネットにアクセスできない場合は、loader.js をダウンロードして、Yellowfin サーバーの以下ディレクトリに配置します。
(Yellowfin)/appserver/webapps/ROOT/js/chartingLibraries/google/loader.js
以下の手順では、Yellowfin サーバーにライブラリを配置する手順を前提とします。

1-2. JavaScript グラフの有効化

JavaScript グラフを作成するためには、いくつか Yellowfin サーバーで事前設定が必要です。必要な設定内容に関しては、以下 Wiki の情報を参考にしてください。
https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293926

1-3. データの準備

以下の手順では、こちらからダウンロード可能なサンプルデータを使用します。 Yellowfin のトランスフォーメーションフローを活用して、サンプルデータをデータベースに取り込むことも可能です。もちろん、直接データベースに取り込んでいただいても構いません。
トランスフォーメーションフロー：https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293853

1-4. ビューの作成

下記テーブルに記すデータ型でビューを作成します。

列名	書式
task_id	テキスト
task_name	テキスト
resource	数値型 (小数点以下桁数：0)
start	日付 (yyyy/MM/dd)
end	日付 (yyyy/MM/dd)
percent_complete	数値型 (デフォルト集約：合計)
duration	数値型 (デフォルト集約：合計)
dependencies	テキスト
ビューの詳細：https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293852

これで事前準備は完了です。

2. グラフの作成

2-1.「データ」ステップ

[task_id] [task_name] [resource] [start] [end] [percent_complete] [duration] [dependencies] を全て「カラム(列)」に追加します。

2-2.「グラフ」ステップ

[グラフ] ステップに進み、画面右側 [グラフの選択] から [JavaScriptグラフ] を選択します。

[JavaScript] タブの雛形を全て削除し、以下のコードに置き換えます。コードの処理の内容は後ほど説明します。

JS

generateChart = function(options) 
{
    var $chartDrawDiv = $(options.divSelector);
    require(['js/chartingLibraries/google/loader.js'],function() 
   {
       google.charts.load("current", {packages: ["gantt"]});
       google.charts.setOnLoadCallback(function()
       {
           var processedData = processData(options.dataset.data);
           doDrawing(processedData, $chartDrawDiv);
       });
   });
},

processData = function(dataset) 
{
   var ds = [['task_id', 'task_name', 'resource', 'start', 'end', 'duration', 'percent_complete', 'dependencies']];
    for (var i = 0; i < dataset['task_id'].length; i++){
      ds.push([
        dataset['task_id'][i].formatted_data,
        dataset['task_name'][i].formatted_data,
        dataset['resource'][i].formatted_data,
        new Date(dataset['start'][i].formatted_data),
        new Date(dataset['end'][i].formatted_data),
        parseFloat(dataset['duration'][i].raw_data),
        parseFloat(dataset['percent_complete'][i].raw_data),
        dataset['dependencies'][i].formatted_data,
      ]);
    }
  return google.visualization.arrayToDataTable(ds);
},

doDrawing = function(data, $chartDrawDiv)
{
   var chart = new google.visualization.Gantt($chartDrawDiv[0]);
      var options = {
        height: 400,
        gantt: {
            trackHeight: 30,
            palette: [
                {
                    "color": "#B6B6B6",
                    "dark": "#6A91C1",
                    "light": "#B6B6B6"
                },
            ]

        },
      };
   chart.draw(data, options);
}

[プレビュー] に移り、どのようなチャートが作成されるか確認します。プロジェクト全体および各タスクの進捗状況が色で確認できるのが分かります。

3. コードの説明

ここでコードの説明に移ります。

generateChart

generateChart

generateChart = function(options) 
{
    var $chartDrawDiv = $(options.divSelector);
    require(['js/chartingLibraries/google/loader.js'],function() 
   {
       google.charts.load("current", {packages: ["gantt"]});
       google.charts.setOnLoadCallback(function()
       {
           var processedData = processData(options.dataset.data);
           doDrawing(processedData, $chartDrawDiv);
       });
   });
},

JavaScript グラフの処理において、最初に呼び出される部分です。
options に「データ」ステップで表に格納したデータが格納されています。

var $chartDrawDiv = $(options.divSelector)でグラフを出力する div を選択します。
require(['js/chartingLibraries/google/loader.js'],function()で参照するライブラリーを指定します。今回の場合は、先の手順でローカルに保管したライブラリを相対パスで指定します。

google.charts.load("current", {packages: ["gantt"]})
google.charts.setOnLoadCallback(function()
上記2行は、Google チャートの処理に関わる定型的なものです。チャートの種別を指定する際に、packages: ["gantt"] の ”gantt” の部分を変更します。詳しくはこちらをご確認ください。

var processedData = processData(options.dataset.data)
doDrawing(processedData, $chartDrawDiv)
上記2行で、別の関数を呼び出して、データ処理とグラフ描画処理を行っています。呼び出し先の関数での処理内容は後続の個所で説明をします。

processData

processData

processData = function(dataset) 
{
   var ds = [['task_id', 'task_name', 'resource', 'start', 'end', 'duration', 'percent_complete', 'dependencies']];
    for (var i = 0; i < dataset['task_id'].length; i++){
      ds.push([
        dataset['task_id'][i].formatted_data,
        dataset['task_name'][i].formatted_data,
        dataset['resource'][i].formatted_data,
        new Date(dataset['start'][i].formatted_data),
        new Date(dataset['end'][i].formatted_data),
        parseFloat(dataset['duration'][i].raw_data),
        parseFloat(dataset['percent_complete'][i].raw_data),
        dataset['dependencies'][i].formatted_data,
      ]);
    }
  return google.visualization.arrayToDataTable(ds);
},

Yellowfin のデータセットをGoogleチャートが扱う形式に変換して、ds に格納しています。Gantt チャート作成に必要なデータとその形は、Google チャートの仕様に従います。詳しくは[こちら] (https://developers.google.com/chart/interactive/docs/gallery/ganttchart#data-format) をご覧ください。

doDrawing

doDrawing

doDrawing = function(data, $chartDrawDiv)
{
   var chart = new google.visualization.Gantt($chartDrawDiv[0]);
      var options = {
        height: 400,
        gantt: {
            trackHeight: 30,
            palette: [
                {
                    "color": "#B6B6B6",
                    "dark": "#6A91C1",
                    "light": "#B6B6B6"
                },
            ]

        },
      };
   chart.draw(data, options);
}

関数の中に記述する内容は、全て Google チャートの仕様に従います。
var optionsの中で、チャートのサイズやバーの色を定義しています。オプションの中で定義が可能な情報一覧はこちらをご確認ください。

chart.draw(data, options)でチャートを描画します。Google チャートのメソッドに関する詳細はこちらをご確認ください。

Google チャートなどのライブラリと連携することで、Yellowfin の用途もますます広がりますね。
是非皆さんもお試しください。
See you then, Cheers!