--- title: 【Sisense Widget】Timeframe Widgetを作成してみた description: 今回は、通常とはちょっと異なる形で散布図ウィジェットを使用することで作成可能な、利用期間等を可視化した「Timeframe Widget」を作成してみました。一部スクリプトを編集する必要がありますが、コピー&ペーストだけで済むので、苦手意識がある方でも簡単に作成することができます。是非試してみてください。 image: https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/d62cf1bb869cdabf6fff2d3297e73f94-1024x432-2.png --- ![INSIGHT LAB_文字のみ_WHT-1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png) ![INSIGHT LAB_文字のみ](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png) [![お問い合わせ](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/5935783/a4a0266e-14ad-4388-b83f-681a6f35b8a7.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/5935783/a4a0266e-14ad-4388-b83f-681a6f35b8a7) - [Sisenseとは](https://service.insight-lab.co.jp/sisense) - [Sisenseナレッジ](https://knowledge.insight-lab.co.jp/sisense) - [セミナー](https://event.insight-lab.co.jp/sisense-seminar) - [トレーニング](https://service.insight-lab.co.jp/data-analytics-dojo/training_course) - [お役立ち資料](https://download.insight-lab.co.jp/sisense/download) ###### 2 分で読むことができます。 # [【Sisense Widget】Timeframe Widgetを作成してみた](https://knowledge.insight-lab.co.jp/sisense/widget/timeframe_widget) 執筆者 [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle) 更新日時 2020年10月16日 ###### Topics: [Widget](https://knowledge.insight-lab.co.jp/sisense/tag/widget) ![【Widget】Timeframe Widgetを作成してみた](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/d62cf1bb869cdabf6fff2d3297e73f94-1024x432-2.png) 目次 こんにちは。 実はぼくは最近まで通称「G」と呼ばれているらしい'ゴキブリ'という昆虫を見たことがなかったのだが、先日、ついにコンビニから帰る途中で出会ってしまった。あまりに興奮して写真も撮ってしまったよ... さすがに神聖なSisense Knowledgeにゴキブリの写真なんて載せたら生きていけなくなりそうだから、ここで載せるのはやめておこうと思う。（見たい方は連絡ください） 「変な人」と思ったそこのあなた。北海道民はみんなこんな感じですよ。 [「ゴキブリを初めて見た北海道県民の反応が面白いw」（Youtubeより）](https://youtu.be/I3p04VMF3ps) ...さて。話を本題に。 今回は、利用期間等を表示するTimeframe Widgetを作成する。それほど難しくないウィジェットなので、サクッと作ってしまおう！データのダウンロードは[こちら](https://knowledge.insight-lab.co.jp/hubfs/SISENSE/Data/Test_Data.zip)から。   ## 1. データの準備 今回のスタートとゴールはこちら。「User\_Name」「Start\_Date」「End\_Date」が入ったデータを使って、期間を表示したTimeframe Widgetを作成したい。 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/dbf9e4ff462547c8a90a70060a093e0c-2.png?width=987&height=355&name=dbf9e4ff462547c8a90a70060a093e0c-2.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/dbf9e4ff462547c8a90a70060a093e0c-2.png) なお、データについての設定は以下の通り。 ・2020/01/01~2020/01/20の期間限定サービス ・「Start\_Date」= 登録日, 「End\_Date」= 登録解除日 ・「End\_Date」がNULL = 期間内に解除することがなかった スタートとゴール、設定を確認したところで、ここからほんの少しだけデータを加工していく。 今は「Start\_Date」と「End\_Date」のように日付が横持ちになっているが、今回の目的物を作成するためには日付を縦持ちに変換する必要がある。 また、元データでは「User\_Name」= 'Horse'の「End\_Date」がNULLになっている。NULLのままだとうまく表示することができないので、今回はサービス終了日の2020/01/20を入れることにする。 カスタムテーブルを作成し、以下のコードを張り付ける。 ``` SELECT [User_Name] , [Start_Date] AS Date , 'Start' AS Category FROM [Test_Data] UNION ALL SELECT [User_Name] , CASE WHEN [End_Date] IS NULL THEN CreateDate(2020,01,20) ELSE [End_Date] END AS Date , 'End' AS CategoryFROM [Test_Data] ``` 「解析に成功しました」の表示が出たら、プレビューで確認してみる。 以下のように、日付が縦持ちになっており、「User\_Name」= 'Horse'の日付がNULLから変更できているのを確認したら、保存してビルドする。 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/b9adb99fcde8339952593423377e694b-1024x526-2.png?width=1024&height=526&name=b9adb99fcde8339952593423377e694b-1024x526-2.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/b9adb99fcde8339952593423377e694b-2.png) これで準備完了！ ## 2. ウィジェットの作成 次はウィジェットを作成していく。 散布図ウィジェットで以下のように設定する。 **X軸：Days 単位 Date** **Y軸：User\_Name** **break by / color：User\_Name** [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/50ee5b9cd63f9a2ae1734d472da4a14f-1024x468-2.png?width=1024&height=468&name=50ee5b9cd63f9a2ae1734d472da4a14f-1024x468-2.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/50ee5b9cd63f9a2ae1734d472da4a14f-2.png) 上図を見ても分かるように、ただ設定しただけではUser\_NameごとにStart\_DateとEnd\_Dateがプロットされるだけで、線で繋がっていない。線でつなぐためには、メニューボタン→「スクリプトの編集」で編集画面を開き、以下のスクリプトを張り付けて保存する必要がある。（スクリプトについては、[こちら](https://support.sisense.com/hc/en-us/community/posts/360016697334-Connecting-Points-in-Scatter-Chart-by-Dim-and-in-Order-aka-Snake-Chart-)の記事を参考にさせていただきました） [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/fdb3ea0fb4ebc5306a09fef84aa8d3af-2.png?width=996&height=283&name=fdb3ea0fb4ebc5306a09fef84aa8d3af-2.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/fdb3ea0fb4ebc5306a09fef84aa8d3af-2.png) ``` widget.on('processresult', function(se,ev){ ev.result.plotOptions.series.dataLabels.formatter = function(){ var temp = this.point.pointText.toString().substring(4,7) + this.point.breakByValue; return temp; }; }); widget.on('render', function(se, ev){se.queryResult.plotOptions.series.lineWidth = 2;}); ``` ウィジェットの編集画面に戻ってリフレッシュすると、目的物であるTimeframe Widgetが完成するはずだ。 [![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/d62cf1bb869cdabf6fff2d3297e73f94-1024x432-2.png?width=1024&height=432&name=d62cf1bb869cdabf6fff2d3297e73f94-1024x432-2.png)](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/d62cf1bb869cdabf6fff2d3297e73f94-2.png) ## 3. まとめ 今回は、散布図を通常とは少し異なる使い方をして、期間を可視化するTimeframe Widgetを作成してみた。ありそうで意外と見ないウィジェットだと思う。（特にSisenseでは） もちろん、作成してみたはいいものの、問題がないわけではない。今回は「User\_Name」が少なかったから問題なかったが、これが増えたら見栄えが悪くなってしまうことや、必ずbreak by / colorにY軸と同じものを入れなければならない（単色にできない）ことなど、まだまだ使い勝手が良いとは言えないのが現状だ。 時間があるときに少しずつ改良していきたいと思う。 それでは。 Sisenseを体験してみませんか？ INSIGHT LABではSisense紹介セミナーを定期開催しています。Sisenseの製品紹介や他BI製品との比較だけでなく、デモンストレーションを通してSisenseのシンプルな操作性やプレゼンテーション機能を体感いただけます。 [![詳細はこちら](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/5935783/ff8d86bf-1184-4d92-8926-6a31a20de4b0.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/5935783/ff8d86bf-1184-4d92-8926-6a31a20de4b0) - [Tweet](https://twitter.com/share) ![Turtle](https://knowledge.insight-lab.co.jp/hubfs/Sunflower.jpg) #### 執筆者 [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle) 可視化領域を中心とした業務に従事しています。 ###### [前の投稿](https://knowledge.insight-lab.co.jp/sisense/information/pareto-chart) [![【Info】パレート図をサクッと作る](https://knowledge.insight-lab.co.jp/hubfs/paleto-1.png)](https://knowledge.insight-lab.co.jp/sisense/information/pareto-chart) ###### [【Sisense Widget】パレート図をサクッと作る](https://knowledge.insight-lab.co.jp/sisense/information/pareto-chart) ###### [次の投稿](https://knowledge.insight-lab.co.jp/sisense/data-modeling/cumulative-calendar) [![【Data Modeling】累計カレンダーでCOVID-19の移動合計推移を求めてみる](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/06_result-1024x517-1.png)](https://knowledge.insight-lab.co.jp/sisense/data-modeling/cumulative-calendar) ###### [【Sisense Data Modeling】累計カレンダーでCOVID-19の移動合計推移を求めてみる](https://knowledge.insight-lab.co.jp/sisense/data-modeling/cumulative-calendar) RECOMMEND こちらの記事も人気です。 ###### 4 分で読むことができます。 #### [【Sisense Administaration】無料のSSL証明書"Let's Encrypt"でSSL化してみる](https://knowledge.insight-lab.co.jp/sisense/administration/ssl_lets_encrypt) ###### 2020年 10月 16日 ###### 8 分で読むことができます。 #### [【API連携】Spotify音楽データの分析①【Sisense】](https://knowledge.insight-lab.co.jp/sisense/information/spotify_music_data_1) ###### 2020年 10月 16日 ###### 2 分で読むことができます。 #### [【Sisense Widget】折れ線グラフを階段状に表示する](https://knowledge.insight-lab.co.jp/sisense/widget/step_line_chart) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Widget】Radar Chartを使ってポケモンの種族値を表示してみた](https://knowledge.insight-lab.co.jp/sisense/widget/radarchart) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Formula】CASE関数を使って条件分岐する](https://knowledge.insight-lab.co.jp/sisense/formula/case) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Widget】折れ線グラフにおける欠落値の対処法](https://knowledge.insight-lab.co.jp/sisense/widget/line-graph) ###### 2020年 10月 16日 ##### 運営会社 運営会社 - [会社概要](https://www.insight-lab.co.jp/about/company.html) - [お問い合わせ](https://contact.insight-lab.co.jp/main) ##### メニュー メニュー - Sisenseとは - [Sisenseナレッジ](https://knowledge.insight-lab.co.jp/sisense) - [セミナー](https://event.insight-lab.co.jp/sisense-seminar) - [お役立ち資料](https://download.insight-lab.co.jp/sisense/download) [![INSIGHT LAB_文字のみ_WHT-1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=200&height=55&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png "INSIGHT LAB_文字のみ_WHT-1")](https://www.insight-lab.co.jp/) - [プライバシーポリシー](https://www.insight-lab.co.jp/privacy.html) Copyright © 2020 INSIGHT LAB, Inc.