スプレッドシートでグラフの範囲を可変にする方法!

スプレッドシートでグラフの範囲を可変にする方法!

Googleスプレッドシートで、グラフの範囲を可変にしたいと思ったことはありませんか?大量のデータの間から、特定の期間のデータをグラフに表示させたいというシーンもあるかと思います。この記事では、スプレッドシートでグラフの範囲を可変にする方法をご紹介しています。


目次[非表示]

  1. スプレッドシートでグラフの範囲を可変にしたい
  2. スプレッドシートでグラフの範囲を可変にする方法

スプレッドシートでグラフの範囲を可変にしたい

Googleスプレッドシートで、グラフの範囲可変にしたいと思ったことはありませんか?大量のデータの間から、特定の期間のデータをグラフに表示させたいというシーンもあるかと思います。この記事では、スプレッドシートでグラフの範囲を可変にする方法をご紹介していきます。

スプレッドシートでグラフの範囲を可変にする方法

「ファイル」タブ→「インポート」をクリック
それでは、スプレッドシートでグラフの範囲を可変にする方法を説明していきます。まずは、グラフの作成を行いましょう。当記事では、用意したデータを元にグラフを作成していきます。画面上部の「ファイル」タブをクリックしてメニューを開き、「インポート」をクリックしましょう。
「アップロード」タブをクリックしてデータファイルをドラッグ&ドロップで追加
「ファイルをインポート」ダイアログボックスが表示されるので、「アップロード」タブをクリックしてデータファイルをドラッグ&ドロップで追加してアップロードしましょう。
「挿入」タブ→「グラフ」をクリック
データを読み込んだら新しいシートを作成して、作成したシートの「挿入」タブをクリックしてメニューの「グラフ」をクリックしましょう。
グラフにしたいデータ範囲を指定して「OK」をクリック
グラフエディタが表示されるので、「データ範囲」のボタンをクリックして「データ範囲の選択」ダイアログボックスを表示します。グラフにしたいデータ範囲を指定して「OK」をクリックしましょう。候補にデータ範囲が表示されている場合は、クリックするだけで範囲を指定できます。
プルダウンメニューから「折れ線グラフ」を選択
画面右側に「グラフエディタ」が表示されるので、グラフの種類のプルダウンメニューから「折れ線グラフ」を選択しましょう。
「…」→「削除」をクリック
軸のデータが多すぎる場合は、不要なデータの右側の「…」をクリックしてメニューから「削除」をクリックして削除しましょう。
「拡張機能」タブ→「Apps Script」をクリック
グラフが用意できたら、次はGoogle Apps Scriptでスクリプトを組みます。「拡張機能」タブをクリックして、メニューから「Apps Script」をクリックしましょう。
Apps Scriptの入力画面
Apps Scriptの入力画面が表示されるので、下記のコードを入力して「保存」→「実行」を行いましょう。シート名は適宜変更してください。

function findRow(sheet,val,col){
    var dat = sheet.getDataRange().getValues();

    for(var i=1;i<dat.length;i++){
      if(String(dat[i][col-1]) == String(val)){
        return i+1;
      }
    }
    return 0;
  }

function makeGraphData() {

    var objSpreadsheet = SpreadsheetApp.getActiveSpreadsheet();
    var graphSheet = objSpreadsheet.getSheetByName("グラフ");
    var sapporoSheet = objSpreadsheet.getSheetByName("札幌");
    var tokyoSheet = objSpreadsheet.getSheetByName("東京");
    var oosakaSheet = objSpreadsheet.getSheetByName("大阪");
    sapporoSheet.unhideRow(sapporoSheet.getRange("A1:A")); // グラフの非表示をリセット
    tokyoSheet.unhideRow(tokyoSheet.getRange("A1:A")); // グラフの非表示をリセット
    oosakaSheet.unhideRow(oosakaSheet.getRange("A1:A")); // グラフの非表示をリセット

    var startValue = graphSheet.getRange("B2").getValue(); // 開始日の値を取得
    var endValue = graphSheet.getRange("D2").getValue(); // 終了日の値を取得

    var str_row = 0;
    var end_row = 0;

    str_row = findRow(sapporoSheet,startValue,1)
    if(0 == str_row){
        Browser.msgBox("開始日の値がデータ範囲外です", Browser.Buttons.OK);
        return -1
    }
    end_row = findRow(sapporoSheet,endValue,1)
    if(0 == end_row){
        Browser.msgBox("終了日の値がデータ範囲外です", Browser.Buttons.OK);
        return -1
    }
  
    sapporoSheet.hideRow(sapporoSheet.getRange("A"+(end_row+1)+":A"+sapporoSheet.getLastRow()));
    sapporoSheet.hideRow(sapporoSheet.getRange("A2:A"+(str_row+1)));
    tokyoSheet.hideRow(tokyoSheet.getRange("A"+(end_row+1)+":A"+tokyoSheet.getLastRow()));
    tokyoSheet.hideRow(tokyoSheet.getRange("A2:A"+(str_row+1)));
    oosakaSheet.hideRow(oosakaSheet.getRange("A"+(end_row+1)+":A"+oosakaSheet.getLastRow()));
    oosakaSheet.hideRow(oosakaSheet.getRange("A2:A"+(str_row+1)));
}

グラフから開始日と終了日を指定する入力セルを作成する
続いて、グラフから開始日と終了日を指定する入力セルを作成します。画像例では、開始日と終了日のセルを作成しようとしています。
「データ」タブ→「データの入力規則」をクリック
セルを選択して「データ」タブをクリックしてメニューを開き、「データの入力規則」をクリックしましょう。
「条件」のプルダウンメニューから「有効な日付」を選択して「完了」をクリック
画面右側に「データの入力規則」メニューが表示されるので、「条件」のプルダウンメニューから「有効な日付」を選択して「完了」をクリックしましょう。開始日と終了日のセルに対してこの操作を行うことで、セルを選択した際に日付選択のカレンダーが表示されて日付を選択できるようになります。
「挿入」タブ→「図形描画」をクリック
続いて、作成したスクリプトを実行するボタンを作成します。「挿入」タブをクリックしてメニューを開き、「図形描画」をクリックして図形描画のダイアログボックスからボタンを作成してシート内に挿入します。
「スクリプトを割り当て」をクリック
作成したボタンをクリックして、表示されるメニューの「スクリプトを割り当て」をクリックします。作成したスクリプト名を入力して「OK」をクリックしましょう。これで、ボタンが有効になります。
グラフの情報が更新された
あとは日付を選択してからボタンをクリックすることで、グラフの情報が更新されますよ。

関連記事