---
title: 【Sisense Widget】キャンペーン期間をエリア表示する
description: 今回は、折れ線グラフ内にキャンペーン期間を表示する方法について紹介します。集計値に対してキャンペーンの効果がどのくらいのものだったかを把握するのに便利なウィジェットとなっています。また、時間単位の変更やフィルターによる絞り込みにも柔軟に対応できるような使用になっているのが大きな魅力です。
---

[Sisenseナレッジ - INSIGHT LAB](https://knowledge.insight-lab.co.jp/sisense)

# [【Sisense Widget】キャンペーン期間をエリア表示する](https://knowledge.insight-lab.co.jp/sisense/widget/campaign_area)

 作成者: [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle)｜2020年10月16日

こんにちは。Turtleです。

いつまで続くんだ...と思っていた暑さも終わりを迎え、最近は涼しくなってきたと感じている。もうすぐ秋なのかな...個人的に秋は一番好きな季節。地元北海道では秋は一瞬で終わりを迎えるのだけど、東京はどうなのだろうか。

半袖だと肌寒いから服を買わなきゃ。

...さて、本題に。  
今回は、「**折れ線グラフにキャンペーン期間をエリア表示する**」ということをやってみたいと思う。キャンペーンを行った時期を可視化して、その効果がどうだったか見たくなることって、あるよね（ぼくはある）。

## 1. 確認

まずは今回行いたいことの確認。冒頭の繰り返しになるが、今回は、「**折れ線グラフにキャンペーン期間をエリア表示する**」方法の一例を紹介する（あくまで「一例」だからね）。イメージとしては、下図のようにキャンペーン期間をエリア表示し、「キャンペーンの効果がどのくらいあったのか？」ということを一目で確認できるようにするといった感じ。

※売上データは**【Sisenseはじめの一歩：データモデリング編-1】Data Designerでデータモデルを作ってみる**で使用したものを引き続き使用するので、データのダウンロードは[こちら](https://sisense-knowledge.insight-lab.co.jp/introduction/datamodeling1/)からどうぞ。

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/389e61eace39edd51cf5ceb548974c29-2.png>

なお、キャンペーンのデータは以下のようなものに設定した。キャンペーン名、開始日、終了日の３つがカラムとして存在する簡単なデータになっている。

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/d10e99b200bbacb142d645c86c744ef1-2.png>

それでは早速やっていこう。

## 2. 準備

簡単に今回の内容を確認したところで、次は準備に入っていく。まずはじめに、今回の完成図を確認しておこう。今回は以下のような簡単なデータモデルを作成する。\[Campaign\], \[Calender\], \[売上データ\]の３つが日付で関連付けされた状態となっている。

※\[Campaign\]を作成するために使用した\[campaign\_list.csv\]は、ウィジェット作成時に使用しないため非表示にしておく。

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/653e2d34bec40ff46e0419c45c29d051-2.png>

売上データは先ほどリンクを貼っておいた記事のものをそのまま使用するので、以下では、\[Calender\]と\[Campaign\]の二つのテーブルを作成するSQL文について確認していく。

### Calender

まずはカレンダーテーブルを作成していく。\[売上データ\]から売上日をSELECT DISTINCTしても良いのだが、歯抜けがあるとキャンペーン期間を正確に取得することができなくなってしまうため、今回は**【Data Modeling】カレンダーテーブルを自動生成する** を参考にカレンダーテーブルを作成する。まだ読んでいない方は[こちら](https://knowledge.insight-lab.co.jp/sisense/data-modeling/calendar-table)からどうぞ。

実際のSQLは以下の通り。

```
SELECT
    date + rownum *(60*60*24) AS date
FROM
(
SELECT  d2.date,
        RANKASC(d1.売上日)-1 AS rownum
FROM [売上データ] d1,
    (SELECT
        Createdate(
            GetYear(Min([売上日])),
            GetMonth(Min([売上日])),
            GetDay(Min([売上日]))
        )
         AS date
    FROM [売上データ]
    ) d2
) d3
WHERE date + rownum *(60*60*24)
<=
(SELECT
    MAX([売上日])
FROM [売上データ]
)
ORDER BY date + rownum *(60*60*24)
```

SQLの中身については先ほどリンクを貼った記事と全く同じなのでそちらを参照されたい。

### Campaign

カレンダーテーブルを作成したら、次は\[Campaign\]テーブルを作成する。今回は、以下のようなSQLで作成した。

```
SELECT
      date
    , campaign
    , 1 AS campaign_flg
FROM
    [Calender]
    CROSS JOIN
    [campaign_list.csv]
WHERE
    date >= start_date AND date <= end_date
```

原理としては以下の通り。\[Calender\]と\[campaign\_list.csv\]をCROSS JOINすることですべての組み合わせを取得し、WHERE句で日付がキャンペーン期間に該当するレコードのみを取得するようにしている。  
<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/b24fe2a269479ff2094f67bc6e6afb24-2.png>

今の操作に加え、最終的に、ウィジェットを作成するための'campaign\_flg'という値を持たせている。

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/8fc9601281d131e0043b2a4395071d7d-2.png>

ざっくり確認できたら、SQLを張り付けしてビルドし、準備は完了だ。

## 3. 作成

ウィジェット作成はいたって簡単。今回は折れ線グラフの日付単位を '週' に設定して作成していく。以下のように設定すれば目的物が完成するはずだ。

X-軸：*Weeks 単位 date*  
※\[Calender\]テーブルのカラムを使用する必要がある

値1：キャンペーン期間  
数式=*AVG(\[campaign\_flg\])*

値2：売上金額  
数式=*SUM(\[売上金額\])*

さらに少し設定を加えていく。以下のように、値1：キャンペーン期間のメニューから「系列の種類」を「エリア」に設定し、さらに「右軸に表示」を選択する。

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/61c7429670dc47eb62b6e4421eccedca-2.png>

次に、右側のデザインペインを開き、Y-2軸のラベルのチェックを外し、最大値を1に設定する。

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/3a4d02ed3675b6c4afa604a3d4f677cd-2.png>

これで目的物が完成した。常にAVG(\[campaign\_flg\])とY-2軸の最大値は1で固定されているため、**時間単位の変更やフィルターによる絞り込みにも対応した仕様となっている**。

試しに時間単位を「週」から「月」に変更しても、問題なくキャンペーン期間が表示されるはずだ。

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/4a0780ec453e4f11e8ac9da6c141f0c0-2.png>

## 4. まとめ

今回は、折れ線グラフ内にキャンペーン期間を表示する方法について紹介した。集計値の推移とキャンペーン期間を同時に表示することで、効果を確認しやすくなると思う。

また、時間単位の変更やフィルターによる絞り込みに対しても柔軟に対応できるようになっていることが魅力だと思う。実は、この仕組みを考え出したのはぼくではないんだけど。笑

なるべく制限のない柔軟なウィジェットを作成していきたいよね。

それでは。

[完全な記事を表示](https://knowledge.insight-lab.co.jp/sisense/widget/campaign_area)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Turtle"
  },
  "dateModified" : "2020-11-18T01:34:44.939Z",
  "datePublished" : "2020-10-16T07:14:02Z",
  "headline" : "【Sisense Widget】キャンペーン期間をエリア表示する",
  "image" : {
    "@type" : "ImageObject",
    "height" : 270,
    "url" : "https://download.insight-lab.co.jp/hubfs/Imported_Blog_Media/389e61eace39edd51cf5ceb548974c29-1024x270-2.png",
    "width" : 1024
  },
  "mainEntityOfPage" : "https://knowledge.insight-lab.co.jp/sisense/widget/campaign_area",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Sisenseナレッジ"
  }
}
```