デザイン

前年同月比スパークバー付きKPIチャートの作り方

前年同月比スパークバー付きKPIチャートの作り方

今回は、前年同月比スパークバー付きKPIチャートの作り方について紹介していきます。

これまでスパークライン付きのKPIチャートについて扱いましたが、各KPI値の過去の月別推移ではなく、直接、前年同月比の推移を確認したいという方もいるかと思います。

それを実現するために、スパークバーを活用していきます。

スパークバーとは、小さな棒グラフを複数並べたチャートのことであり、各棒グラフは、縦軸の目盛りなどの表記がないシンプルなグラフとなります。

前年同月比のスパークバーを用いることで、前年同月比の推移をより容易に把握することができますし、月毎の変化度合いが一定してるのかどうか等を確認することができるでしょう。

ここでは、前回と同じデータを用いて、各KPI値に対して、直近1年における前年同月比のスパークバーを添える方法を説明していきます。

ベースとなるKPIチャートの作成

ベースとなるKPIチャートは、以前作成した前年比付き前月分KPIチャートであり、作成方法については以下を参照してください。

KPIチャートについて～応用編～
関連記事KPIチャートについて～応用編～

計算フィールドの作成

以下の計算フィールドを作成します。

  • 名前：Until End of Month Flag
[Order Date] <= DATETRUNC("month", {MAX([Order Date])}+1) -1

「Until End of Month Flag」は、注文日（Order Date）が直近の月末以前かどうかの判定フラグを示します。スパークライン付きKPIチャートの作り方でも、同計算フィールドを使用しており、詳細については、以下を参照してください。

関連記事スパークライン付きKPIチャートの作り方
  • 名前：Last 12 Months Flag
LAST() <= 11

「Last 12 Months Flag」は、直近の12ヵ月（＝１年）かどうかの判定フラグを示します。LAST()は、直近の1ヵ月目では0を、直近の2ヵ月目では1を、直近の3ヵ月目では2を返し、直近の12ヶ月目では11を返し、その値をもとに判定します。

  • 名前：Sales | YoY
(ZN(SUM([Sales]))-LOOKUP(ZN(SUM([Sales])),-12))/ABS(LOOKUP(ZN(SUM([Sales])),-12))

「Sales | YoY」は、売上の前年同月比を示します。

まず、基準の月となる売上合計より、12個前の売上合計、すなわち、前年度の同月の売上合計を取得します。そして、基準となる月の売上合計から前年度同月の売上合計を引いて、その差分を前年度同月の売上合計の絶対値で割ることにより算出します。

  • 名前：Profit | YoY
(ZN(SUM([Profit]))-LOOKUP(ZN(SUM([Profit])),-12))/ABS(LOOKUP(ZN(SUM([Profit])),-12))

「Profit | YoY」は、利益の前年同月比を示します。

まず、基準の月となる利益合計より、12個前の利益合計、すなわち、前年度の同月の利益合計を取得します。そして、基準となる月の利益合計から前年度同月の利益合計を引いて、その差分を前年度同月の利益合計の絶対値で割ることにより算出します。

  • 名前：Profit Ratio
SUM([Profit])/SUM([Sales])

「Profit Ratio」は、利益率を示します。利益を売上で割ることにより算出します。

  • 名前：Profit Ratio | YoY
(ZN([Profit Ratio])-LOOKUP(ZN([Profit Ratio]),-12))/ABS(LOOKUP(ZN([Profit Ratio]),-12))

「Profit Ratio | YoY」は、利益率の前年同月比を示します。

まず、基準の月となる利益率より、12個前の利益率、すなわち、前年度の同月の利益率を取得します。そして、基準となる月の利益率から前年度同月の利益率を引いて、その差分を前年度同月の利益率の絶対値で割ることにより算出します。

  • 名前：Quantity | YoY
(ZN(SUM([Quantity]))-LOOKUP(ZN(SUM([Quantity])),-12))/ABS(LOOKUP(ZN(SUM([Quantity])),-12))

「Quantity | YoY」は、数量の前年同月比を示します。

まず、基準の月となる数量合計より、12個前の数量合計、すなわち、前年度の同月の数量合計を取得します。そして、基準となる月の数量合計から前年度同月の数量合計を引いて、その差分を前年度同月の数量合計の絶対値で割ることにより算出します。

  • 名前：Sales Color Flag
[Sales | YoY] > 0

「Sales Color Flag」は、売上の前年同月比が0より大きいかどうかの判定フラグを示します。0より大きいか小さいかによって、棒の色を変えるのに使用します。

  • 名前：Profit Color Flag
[Profit | YoY] > 0

「Profit Color Flag」は、利益の前年同月比が0より大きいかどうかの判定フラグを示します。0より大きいか小さいかによって、棒の色を変えるのに使用します。

  • 名前：Profit Ratio Color Flag
[Profit Ratio | YoY] > 0

「Profit Ratio Color Flag」は、利益率の前年同月比が0より大きいかどうかの判定フラグを示します。0より大きいか小さいかによって、棒の色を変えるのに使用します。

  • 名前：Quantity Color Flag
[Quantity | YoY] > 0

「Quantity Color Flag」は、数量の前年同月比が0より大きいかどうかの判定フラグを示します。0より大きいか小さいかによって、棒の色を変えるのに使用します。

ワークシート「前年同月比スパークバー 売上」の作成

ワークシートの編集

次の流れでワークシートを編集していきます。

  1. 新しいワークシートを作成し、以降、このワークシートを編集していきます。
  2. 「Order Date」を列シェルフに入れます。
  3. 列シェルフにある「年（Order Date）」を右クリックして、「月　2015年5月」を選択します。
  4. 「Sales | YoY」を行シェルフに入れます。
  5. 「Until End of Month Flag」をフィルターシェルフに入れます。
  6. フィルター画面が表示されるので、「真」にチェックを入れて、「OK」ボタンを押します。
  7. 「Last 12 Months Flag」をフィルターシェルフに入れます。
  8. フィルター画面が表示されるので、「真」にチェックを入れて、「OK」ボタンを押します。
  9. マークタイプを「棒」に変更します。
  10. 「Sales Color Flag」をマークパネルの色に入れます。
前年同月比スパークバー 売上：ワークシートの編集を説明する画像

ワークシートの微調整

次の流れでワークシートの微調整をしていきます。

  1. 列シェルフにある「月（Order Date）」を右クリックして、「ヘッダーの表示」のチェックを外します。
  2. 行シェルフにある「Sales | YoY」を右クリックして、「ヘッダーの表示」のチェックを外します。
  3. Viz上で右クリックして、「書式設定」を選択します。
  4. 線の書式設定にて、シートのグリッド線を「なし」に設定します。
  5. 更に、シートのゼロラインにて、線の種類を「実線」に、幅を「5px」に、色を「黒色」に設定し、線の書式設定を閉じます。
  6. 「集計（Sales Color Flag）」凡例カードの「▼」を左クリックし、「色の編集」を選択します。
  7. 色の編集画面が表示されるので、それぞれ、色を選択します。
  8. マークパネルにて、ツールヒントの「ツールヒントの編集」を開き、「ツールヒントの表示」のチェックを外します。
  9. シートの名前を「前年同月比スパークバー 売上」に変更します。
前年同月比スパークバー 売上：ワークシートの微調整を説明する画像

ワークシート「前年同月比スパークバー 利益」の作成

ワークシートの編集

次の流れでワークシートを編集していきます。

  1. 新しいワークシートを作成し、以降、このワークシートを編集していきます。
  2. 「Order Date」を列シェルフに入れます。
  3. 列シェルフにある「年（Order Date）」を右クリックして、「月　2015年5月」を選択します。
  4. 「Profit | YoY」を行シェルフに入れます。
  5. 「Until End of Month Flag」をフィルターシェルフに入れます。
  6. フィルター画面が表示されるので、「真」にチェックを入れて、「OK」ボタンを押します。
  7. 「Last 12 Months Flag」をフィルターシェルフに入れます。
  8. フィルター画面が表示されるので、「真」にチェックを入れて、「OK」ボタンを押します。
  9. マークタイプを「棒」に変更します。
  10. 「Profit Color Flag」をマークパネルの色に入れます。
前年同月比スパークバー 利益：ワークシートの編集を説明する画像

ワークシートの微調整

次の流れでワークシートの微調整をしていきます。

  1. 列シェルフにある「月（Order Date）」を右クリックして、「ヘッダーの表示」のチェックを外します。
  2. 行シェルフにある「Profit | YoY」を右クリックして、「ヘッダーの表示」のチェックを外します。
  3. Viz上で右クリックして、「書式設定」を選択します。
  4. 線の書式設定にて、シートのグリッド線を「なし」に設定します。
  5. 更に、シートのゼロラインにて、線の種類を「実線」に、幅を「5px」に、色を「黒色」に設定し、線の書式設定を閉じます。
  6. 「集計（Profit Color Flag）」凡例カードの「▼」を左クリックし、「色の編集」を選択します。
  7. 色の編集画面が表示されるので、それぞれ、色を選択します。
  8. マークパネルにて、ツールヒントの「ツールヒントの編集」を開き、「ツールヒントの表示」のチェックを外します。
  9. シートの名前を「前年同月比スパークバー 利益」に変更します。
前年同月比スパークバー 利益：ワークシートの微調整を説明する画像

ワークシート「前年同月比スパークバー 利益率」の作成

ワークシートの編集

次の流れでワークシートを編集していきます。

  1. 新しいワークシートを作成し、以降、このワークシートを編集していきます。
  2. 「Order Date」を列シェルフに入れます。
  3. 列シェルフにある「年（Order Date）」を右クリックして、「月　2015年5月」を選択します。
  4. 「Profit Ratio | YoY」を行シェルフに入れます。
  5. 「Until End of Month Flag」をフィルターシェルフに入れます。
  6. フィルター画面が表示されるので、「真」にチェックを入れて、「OK」ボタンを押します。
  7. 「Last 12 Months Flag」をフィルターシェルフに入れます。
  8. フィルター画面が表示されるので、「真」にチェックを入れて、「OK」ボタンを押します。
  9. マークタイプを「棒」に変更します。
  10. 「Profit Ratio Color Flag」をマークパネルの色に入れます。
前年同月比スパークバー 利益率：ワークシートの編集を説明する画像

ワークシートの微調整

次の流れでワークシートの微調整をしていきます。

  1. 列シェルフにある「月（Order Date）」を右クリックして、「ヘッダーの表示」のチェックを外します。
  2. 行シェルフにある「Profit Ratio | YoY」を右クリックして、「ヘッダーの表示」のチェックを外します。
  3. Viz上で右クリックして、「書式設定」を選択します。
  4. 線の書式設定にて、シートのグリッド線を「なし」に設定します。
  5. 更に、シートのゼロラインにて、線の種類を「実線」に、幅を「5px」に、色を「黒色」に設定し、線の書式設定を閉じます。
  6. 「集計（Profit Ratio Color Flag）」凡例カードの「▼」を左クリックし、「色の編集」を選択します。
  7. 色の編集画面が表示されるので、それぞれ、色を選択します。
  8. マークパネルにて、ツールヒントの「ツールヒントの編集」を開き、「ツールヒントの表示」のチェックを外します。
  9. シートの名前を「前年同月比スパークバー 利益率」に変更します。
前年同月比スパークバー 利益率：ワークシートの微調整を説明する画像

ワークシート「前年同月比スパークバー 数量」の作成

ワークシートの編集

次の流れでワークシートを編集していきます。

  1. 新しいワークシートを作成し、以降、このワークシートを編集していきます。
  2. 「Order Date」を列シェルフに入れます。
  3. 列シェルフにある「年（Order Date）」を右クリックして、「月　2015年5月」を選択します。
  4. 「Quantity | YoY」を行シェルフに入れます。
  5. 「Until End of Month Flag」をフィルターシェルフに入れます。
  6. フィルター画面が表示されるので、「真」にチェックを入れて、「OK」ボタンを押します。
  7. 「Last 12 Months Flag」をフィルターシェルフに入れます。
  8. フィルター画面が表示されるので、「真」にチェックを入れて、「OK」ボタンを押します。
  9. マークタイプを「棒」に変更します。
  10. 「Quantity Color Flag」をマークパネルの色に入れます。
前年同月比スパークバー 数量：ワークシートの編集を説明する画像

ワークシートの微調整

次の流れでワークシートの微調整をしていきます。

  1. 列シェルフにある「月（Order Date）」を右クリックして、「ヘッダーの表示」のチェックを外します。
  2. 行シェルフにある「Quantity | YoY」を右クリックして、「ヘッダーの表示」のチェックを外します。
  3. Viz上で右クリックして、「書式設定」を選択します。
  4. 線の書式設定にて、シートのグリッド線を「なし」に設定します。
  5. 更に、シートのゼロラインにて、線の種類を「実線」に、幅を「5px」に、色を「黒色」に設定し、線の書式設定を閉じます。
  6. 「集計（Quantity Color Flag）」凡例カードの「▼」を左クリックし、「色の編集」を選択します。
  7. 色の編集画面が表示されるので、それぞれ、色を選択します。
  8. マークパネルにて、ツールヒントの「ツールヒントの編集」を開き、「ツールヒントの表示」のチェックを外します。
  9. シートの名前を「前年同月比スパークバー 数量」に変更します。
前年同月比スパークバー 数量：ワークシートの微調整を説明する画像

ダッシュボードの作成

次の流れでダッシュボードを作成していきます。

  1. 新しいダッシュボードを作成し、以降、このダッシュボードを編集していきます。
  2. サイズにて、「固定サイズ」の「ノートPCブラウザー（800×600）」を選択します。
  3. オブジェクトの水平方向を3つ、縦に並ぶように追加します。
  4. 1番上の水平方向のオブジェクトに、シート「スーパーストア 前年比付き前月分KPIチャート」を入れます。
  5. ダッシュボードに入れたシート「スーパーストア 前年比付き前月分KPIチャート」のタイトルを右クリックして、「タイトルの編集」を選択します。
  6. タイトルの編集画面が表示されるので、「《<月(Last Day of Last Month)>》」と入力して、「OK」ボタンを押します。
  7. 真ん中の水平方向のオブジェクトに、以下のシートを順に入れます。
    • 前年同月比スパークバー 売上
    • 前年同月比スパークバー 利益
    • 前年同月比スパークバー 利益率
    • 前年同月比スパークバー 数量
  8. ダッシュボードに入れた、以下の各々のシートのタイトルを右クリックして、「タイトルの非表示」にチェックを入れます。
    • 前年同月比スパークバー 売上
    • 前年同月比スパークバー 利益
    • 前年同月比スパークバー 利益率
    • 前年同月比スパークバー 数量
  9. 以下の凡例カードの「×」を押して、ダッシュボードから削除します。
    • Sales Color Flag
    • Profit Color Flag
    • Profit Ratio Color Flag
    • Quantity Color Flag
  10. ダッシュボードの名称を「スーパーストア 前年同月比スパークバー付きKPIチャート」に変更します。
  11. 「ダッシュボードのタイトルを表示」にチェックを入れます。
  12. 以下の各々のシートの幅を調整します。
    • 前年同月比スパークバー 売上
    • 前年同月比スパークバー 利益
    • 前年同月比スパークバー 利益率
    • 前年同月比スパークバー 数量
  13. 1番上、および、真ん中の水平方向のオブジェクトの高さを調整します。
  14. 以下のシートを非表示にします。
    • スーパーストア 前年比付き前月分KPIチャート
    • 前年同月比スパークバー 売上
    • 前年同月比スパークバー 利益
    • 前年同月比スパークバー 利益率
    • 前年同月比スパークバー 数量
ダッシュボードの作成を説明する画像

前年同月比スパークバー付きKPIチャートの完成

これで、スーパーストアの前年同月比スパークバー付きKPIチャートが完成です。KPIチャートに、各KPI値に対する直近1年間の前年同月比の月別推移のスパークバーが添えられていることがわかります。

前年同月比スパークバー付きKPIチャートの完成を説明する画像

Tableau Publicのリンクを貼っています。

カテゴリー