未分類

GASで勤怠管理グラフを高度にカスタマイズ！EmbeddedChartBuilder.setOptionで業務効率化

GASで勤怠管理グラフを高度にカスタマイズ！EmbeddedChartBuilder.setOptionで業務効率化

本記事では、Google Apps Script（GAS）のEmbeddedChartBuilder.setOptionを用いて、勤怠管理のグラフを高度にカスタマイズし、業務効率化を図る方法を解説します。勤怠管理における課題を解決し、より見やすく、分析しやすいグラフを作成するためのテクニックを、具体的なコード例を交えてご紹介します。

勤怠管理における課題とGASによる解決

多くの企業で勤怠管理は重要な業務ですが、データの集計や分析に時間がかかったり、グラフが見づらかったりする課題があります。GASを利用することで、これらの課題を解決し、リアルタイムでのデータ可視化や、カスタマイズされたグラフによる詳細な分析が可能になります。

EmbeddedChartBuilder.setOptionとは？

EmbeddedChartBuilder.setOption(option, value)は、グラフの様々なオプションを設定するためのメソッドです。グラフの種類、色、軸ラベル、凡例など、多岐にわたる要素をカスタマイズできます。これにより、データの特性や分析目的に合わせた最適なグラフを作成できます。

勤怠管理グラフの実装例

1. 日ごとの勤務時間グラフ

従業員ごとの日ごとの勤務時間を棒グラフで表示します。setOptionを使って、グラフの色や軸ラベルをカスタマイズします。

function createDailyWorkHoursChart() {
  // スプレッドシートとデータ範囲を取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("勤怠データ");
  const dataRange = sheet.getDataRange();
  const data = dataRange.getValues();

  // グラフを作成
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.COLUMN)
    .addRange(dataRange)
    .setPosition(5, 5, 0, 0)
    .setOption("title", "日ごとの勤務時間")
    .setOption("hAxis.title", "日付")
    .setOption("vAxis.title", "勤務時間（時間）")
    .setOption("series.0.color", "#3366CC") // 棒の色を設定
    .build();

  // シートにグラフを挿入
  sheet.insertChart(chart);
}

2. 月ごとの残業時間グラフ

従業員ごとの月ごとの残業時間を折れ線グラフで表示します。setOptionを使って、グラフの凡例の位置や線の色をカスタマイズします。

function createMonthlyOvertimeChart() {
  // スプレッドシートとデータ範囲を取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("勤怠データ");
  const dataRange = sheet.getDataRange();
  const data = dataRange.getValues();

  // グラフを作成
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.LINE)
    .addRange(dataRange)
    .setPosition(5, 15, 0, 0)
    .setOption("title", "月ごとの残業時間")
    .setOption("hAxis.title", "月")
    .setOption("vAxis.title", "残業時間（時間）")
    .setOption("legend.position", "top") // 凡例を上に表示
    .setOption("series.0.color", "#FF0000") // 線の色を設定
    .build();

  // シートにグラフを挿入
  sheet.insertChart(chart);
}

3. 特定期間の勤務時間推移グラフ

指定した期間の勤務時間の推移をグラフで表示します。日付範囲に基づいてグラフを動的に生成します。

function createCustomDateRangeChart(startDate, endDate) {
  // スプレッドシートとデータ範囲を取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("勤怠データ");
  const dataRange = sheet.getDataRange();
  const data = dataRange.getValues();

  // 開始日と終了日をDate型に変換
  startDate = new Date(startDate);
  endDate = new Date(endDate);

  // グラフを作成
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.AREA)
    .addRange(dataRange)
    .setPosition(5, 25, 0, 0)
    .setOption("title", startDate.toLocaleDateString() + "から" + endDate.toLocaleDateString() + "までの勤務時間推移")
    .setOption("hAxis.title", "日付")
    .setOption("vAxis.title", "勤務時間（時間）")
    .setOption("series.0.color", "green") // エリアの色を設定
    .build();

  // シートにグラフを挿入
  sheet.insertChart(chart);
}

使用例:

createCustomDateRangeChart("2024/01/01", "2024/01/31");

よくある問題とトラブルシューティング

  • グラフが表示されない：データ範囲が正しいか確認してください。また、シート名が正しいか確認してください。

  • グラフの軸ラベルが正しくない：setOptionで軸ラベルを正しく設定してください。

  • 日付が正しく表示されない：日付の形式がスプレッドシートとGASで一致しているか確認してください。

カスタマイズ方法と応用例

  • グラフの種類の変更：setChartTypeでグラフの種類を変更できます。

  • 色のカスタマイズ：setOptionでグラフの色を自由にカスタマイズできます。

  • 複数のデータ系列の表示：addRangeを複数回呼び出すことで、複数のデータ系列を表示できます。

例えば、部署ごとの残業時間を比較するグラフを作成したり、特定のプロジェクトにかかった時間を可視化したりすることも可能です。

まとめ

GASのEmbeddedChartBuilder.setOptionを用いることで、勤怠管理のグラフを高度にカスタマイズし、業務効率化に大きく貢献できます。本記事で紹介したコード例を参考に、ぜひ自社の勤怠管理に役立ててください。

本記事が、皆様のGAS開発の一助となれば幸いです。

PR

CodeCampは、現役エンジニアからマンツーマンで学べるオンラインプログラミングスクールです。WebデザインやWebサービス開発、転職支援など、目的に合わせた多様なコースが選べます。
朝7時〜夜23時40分まで、365日レッスンが受けられるため、忙しい方でも自分のペースで学習を進めることが可能です。通過率8%の厳しい選考を通過した質の高い講師陣が、あなたのキャリアチェンジを強力にサポートします。
さらに、未経験者向けのカリキュラムや、学習開始から20日以内の全額返金保証制度もあるため、プログラミング学習に不安を感じている方でも安心して始めることができます。

CodeCampで理想の働き方を実現しよう